HTML实现台球游戏

【实例简介】

HTML实现台球游戏

【实例截图】

【核心代码】

//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);
drawLine();

//参考线
function drawLine() {
var dotNum = 16,
pos = getBallPos(cueBall.elem);
dotWrap.innerHTML = "";
fromX = pos[0];
fromY = pos[1];
var partX = (toX - fromX) / dotNum,
partY = (toY - fromY) / dotNum;
for(var i = 1; i < dotNum; i ) {
var x = fromX partX * i,
y = fromY partY * i;
drawDot(dotWrap, x, y);
}
}
}

function roll() {
if(movingBalls.length <= 0) {
if(!hasShot) shots = 0;
else shots ; //累计连击

hasShot = false;
setStyle($("force"),"width",80 "px");
setPos($("dot"),22,22);
window.clearInterval(timer);

if(shots > 1) showScore(shots); //显示连击数
startShot();
}
for(var i = 0; i < movingBalls.length; i ) {
var ball = movingBalls[i],
sin = Math.sin(ball.angle),
cos = Math.cos(ball.angle);
ball.v -= F;
//移除静止的小球
if(Math.round(ball.v) == 0) {
ball.v = 0;
movingBalls.remove(i);
continue;
}
var vx = ball.v * sin,
vy = ball.v * cos;
ball.x = vx;
ball.y = vy;

//入袋
if(isPocket(ball.x,ball.y)) {
hide(ball.elem);

if(ball.type == "cue") {
if(!hasShot) shots = 0;
hasShot = false;

window.setTimeout(function(){

ball.v = 0;
setBallPos(ball,170,250);

},500);

}else {
//移除入袋小球
hasShot = true;
ball.v = 0;
for(var k = 0, l =0; k < balls.length; k ) {
if(balls[k] != ball) {
balls[l ] = balls[k];
}
}
balls.length -= 1;
}
return;
}

//边缘碰撞
if(ball.x < R || ball.x > W - R) {
ball.angle *= -1;
ball.angle %= Math.PI;
ball.v = ball.v * (1 - LOSS);
vx = ball.v*Math.sin(ball.angle);
vy = ball.v*Math.cos(ball.angle);
if(ball.x < R) ball.x = R;
if(ball.x > W - R) ball.x = W - R;
//母球加塞
if(ball.type == "cue") {
if(ball.angle > 0) vy -= rollRight;
else vy = rollRight;
vx = rollUp;
rollUp *= 0.2;
rollRight *= 0.2;
ball.v = Math.sqrt(vx*vx vy*vy);
ball.angle = Math.atan2(vx,vy);
}
}
if(ball.y < R || ball.y > H - R) {
ball.angle = ball.angle > 0 ? Math.PI - ball.angle : - Math.PI - ball.angle ;
ball.angle %= Math.PI;
ball.v = ball.v * (1 - LOSS);
vx = ball.v*Math.sin(ball.angle);
vy = ball.v*Math.cos(ball.angle);
if(ball.y < R) ball.y = R;
if(ball.y > H - R) ball.y = H - R;
//母球加塞
if(ball.type == "cue") {
if(Math.abs(ball.angle) < Math.PI/2) vx = rollRight;
else vx -= rollRight;
vy = rollUp;
rollUp *= 0.2;
rollRight *= 0.2;
ball.v = Math.sqrt(vx*vx vy*vy);
ball.angle = Math.atan2(vx,vy);
}
}