javascript桌球游戏.zip

  • L4_178990
    了解作者
  • 92.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 13:45
    上传日期
一款简单的桌球游戏
js桌球游戏.zip
  • js桌球游戏
  • js
  • jquery-1.8.3.min.js
    128.6KB
  • .DS_Store
    6KB
  • index.html
    16.4KB
  • img
  • white_ball.png
    1.6KB
  • yellow_ball.png
    1.7KB
  • table.gif
    40.5KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <title>网页特效 好玩的2D桌球游戏</title> <style type="text/css"> * {margin:0; padding:0} body {background:black; text-align:center; font-size:12px} h1 {font-size:12px; color:gray; font-weight:normal; line-height:200%} h1 .sub {vertical-align:super; color:red; font-size:9px} .info {position:absolute; right:0; color:gray} #table {position:relative; width:800px; margin:20px auto 10px; height:544px; background:url(img/table.gif) no-repeat} .ball {position:absolute; width:30px; height:30px} #dotWrap {position:absolute; z-index:2; left:32px; top:32px; width:736px; height:480px} .guide {z-index:3; background-image:url(img/dashed_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/img/dashed_ball.png"); background-repeat:no-repeat} .target {left:500px; top:250px; background-image:url(img/yellow_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/img/yellow_ball.png"); background-repeat:no-repeat} .cue {background-image:url(img/white_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/img/white_ball.png"); background-repeat:no-repeat} .bot {position:relative; width:800px; margin:10px auto 10px; height:70px} .ctrl {position:absolute; top:0; right:0; width:200px; height:80px; background:url(img/bg_controler.png) no-repeat} #force {position:absolute; left:0; top:18px; width:75px; height:20px; background:url(img/force_conver.png) no-repeat} #shootPos {position:absolute; top:0; right:14px; width:52px; height:52px} #dot {position:absolute; top:22px; left:22px; width:8px; height:8px; background:url(img/bule_dot.png) no-repeat; font-size:1px} #scoreBoard {position:absolute; z-index:3; top:230px; left:346px; font-size:50px; color:white; filter:alpha(opacity=0); -moz-opacity:0; opacity:0} #tips {padding:15px 0 0 20px; text-align:left; color:red; font-size:12px} </style> <script type="text/javascript"> // common function $(str) { return document.getElementById(str); } function $tag(str,target) { target = target || document; return target.getElementsByTagName(str); } function addEventHandler(obj,eType,fuc){ if(obj.addEventListener){ obj.addEventListener(eType,fuc,false); }else if(obj.attachEvent){ obj.attachEvent("on" + eType,fuc); }else{ obj["on" + eType] = fuc; } } function removeEventHandler(obj,eType,fuc){ if(obj.removeEventListener){ obj.removeEventListener(eType,fuc,false); }else if(obj.attachEvent){ obj.detachEvent("on" + eType,fuc); } } function randowNum(start,end) { return Math.floor(Math.random()*(end - start)) + start; } Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=this[i] } } this.length-=1 } //const var TOTALR = 15, //球的半径(包括阴影) R = 12, //球真实半径 POKER = 20, W = 736, //案宽 H = 480, //案高 THICKNESS = 32, //边缘厚度 RATE = 100, //刷新频率 F = 0.01, //摩擦力 LOSS = 0.2, // 碰撞速度损失 TIPS = ["Tip1: 参考球,目标球,目标袋,三点一线,这是最基本的进球方法","Tip2: 右下角蓝条代表击球力度,小的力度更便于控制母球位置","Tip3: 右下角白球上的蓝点控制击球点,高杆,低杆,加塞都由它控制,高手与菜鸟的区别往往在此","Tip4: 桌球,其实打的不是目标球,是母球"]; var table, //案子 cueBall, //母球 guideBall, //参考球 dotWrap, //参考线 speed = 12, rollUp = 0, rollRight = 0, timer, forceTimer, balls = [], movingBalls = [], pokes = [[0,0],[W/2,-5],[W,0],[0,H],[W/2,H+5],[W,H]], hasShot = false; shots = 0; //连击次数 window.onload = function() { initTable(); initShootPos(); showTips(); startGame(); } function startGame() { initBall(); addEventHandler(table,"mousemove",dragCueBall); addEventHandler(table,"mouseup",setCueBall); } function initTable() { table = $("table"); var dotWrapDiv = document.createElement("div"), guideBallDiv = document.createElement("div"); dotWrapDiv.id = "dotWrap"; guideBallDiv.className = "guide ball"; setStyle(guideBallDiv,"display","none"); dotWrap = table.appendChild(dotWrapDiv); guideBall = table.appendChild(guideBallDiv); } function initBall() { //添加母球 cueBall = new Ball("cue",170,H/2); balls.push(cueBall); //添加目标球 for(var i = 0; i < 5; i++) { for(var j = 0; j <= i; j++) { var ball = new Ball("target",520 + i*2*R, H/2 - R*i + j*2*R); balls.push(ball); } } } function initShootPos() { var wrap = $("shootPos"), handler = $("dot"), arrowR = 18; addEventHandler(wrap,"mousedown",selectDot); function selectDot(e) { e = e || event; var pos = getElemPos(wrap), x = e.clientX - pos[0] - handler.offsetWidth/2, y = e.clientY - pos[1] - handler.offsetHeight/2; if(Math.sqrt((x-22)*(x-22) + (y-22)*(y-22)) > arrowR) { var angle = Math.atan2(x-22,y-22); x = arrowR*Math.sin(angle) + 22; y = arrowR*Math.cos(angle) + 22; } setPos(handler,x,y); } } function getElemPos(target,reference) { reference = reference || document; var left = 0,top = 0; return getPos(target); function getPos(target) { if(target != reference) { left += target.offsetLeft; top += target.offsetTop; return getPos(target.parentNode); } else { return [left,top]; } } } // ball class function Ball(type,x,y) { var div = document.createElement("div"); div.className = type + " ball"; this.elem = table.appendChild(div); this.type = type; this.x = x; //位置 this.y = y; this.angle = 0; //角度 this.v = 0; //速度(不包含方向) setBallPos(this.elem,x,y); return this; } function setCueBall() { removeEventHandler(table,"mousemove",dragCueBall); removeEventHandler(table,"mouseup",setCueBall); startShot(); } function startShot() { show(cueBall.elem); addEventHandler(table,"mousemove",showGuide); addEventHandler(table,"mousedown",updateForce); addEventHandler(table,"mouseup",shotCueBall); } function dragCueBall(e) { var toX,toY; e = e || event; toX = e.clientX - table.offsetLeft - THICKNESS, toY = e.clientY - table.offsetTop - THICKNESS; toX = toX >= R ? toX : R; toX = toX <= 170 ? toX : 170; toY = toY >= R ? toY : R; toY = toY <= H - R ? toY : H - R; setBallPos(cueBall,toX,toY); } function shotCueBall() { removeEventHandler(table,"mousemove",showGuide); removeEventHandler(table,"mousedown",updateForce); removeEventHandler(table,"mouseup",shotCueBall); window.clearInterval(forceTimer); speed = $("force").offsetWidth * 0.15; var dotDisX = $("dot").offsetLeft-22, dotDisY = $("dot").offsetTop-22, dotDis = Math.sqrt(dotDisX*dotDisX + dotDisY*dotDisY), dotAngle = Math.atan2(dotDisX,dotDisY); rollRight = Math.round(dotDis*Math.sin(dotAngle))/5; rollUp = -Math.round(dotDis*Math.cos(dotAngle))/5; var formPos = getBallPos(cueBall.elem), toPos = getBallPos(guideBall), angle = Math.atan2(toPos[0] - formPos[0],toPos[1] - formPos[1]); hide(dotWrap); hide(guideBall); cueBall.v = speed; cueBall.angle = angle; movingBalls.push(cueBall); timer = window.setInterval(roll,1000 / RATE); } function showGuide(e) { var fromX,fromY,toX,toY; e = e || event; toX = e.clientX - table.offsetLeft - THICKNESS, toY = e.clientY - table.offsetTop - THICKNESS; setBallPos(guideBall,toX,toY); show(dotWrap); show(guideBall); dra
评论
    相关推荐