通过设置小球的水平速度和竖直速度，让小球射击右侧在墙上的小球，当两个小球碰撞时，墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。
以下是代码：
var cwidth=600//画布宽
var cheight=400;//画布高
var aimx=300;//长方体目标物x坐标
var aimy=100;//长方体目标物y坐标
var aimWidth=80;//长方体目标物的宽
var aimHeight=200;//长方体目标物的高
var groundx=0;//地面的x坐标
var groundy=300//地面的y坐标
var groundWidth=500;//地面的宽
var groundHeight=30;//地面的高
var ballx=20;//小球圆心的x坐标
var bally=290;//小球圆心的y坐标
var ballRadius=10;//小球的半径
var horvelocity;//小球的水平速度
var verticalvel1;//小球的竖直方向初速度
var verticalvel2;//小球竖直方向末速度
var addx;//小球x轴方向的增量
var addy;//小球y轴方向的增量
var gravity=2;//竖直方向的重力加速度
var context;
var everything=[];
var tid;//时间监视器
var shotx=aimx-7;//被射击小球的x坐标
var shoty=aimy+ballRadius/2+Math.floor(Math.random()*aimHeight-ballRadius);//被射击小球的y坐标
var score=0;//记录得分情况
function CreateBall(bx,by,brad,fillStyle){
this.bx=bx;
this.by=by;
this.brad=brad;
this.fillStyle=fillStyle;
this.moveball=moveball;
this.draw=drawball;
}
function CreateRect(rx,ry,rw,rh,fillStyle){
this.rx=rx;
this.ry=ry;
this.rw=rw;
this.rh=rh;
this.fillStyle=fillStyle;
this.draw=drawrect;
}
function drawball(){
context.beginPath();
context.fillStyle=this.fillStyle;
context.arc(this.bx,this.by,this.brad,0,Math.PI*2,true);
context.fill();
}
function drawrect(){
context.beginPath();
context.fillStyle=this.fillStyle;
context.fillRect(this.rx,this.ry,this.rw,this.rh);
}
function moveball(addx,addy){
this.bx+=addx;
this.by+=addy;
}
var ball=new CreateBall(ballx,bally,ballRadius,"rgb(250,0,0)");
var target=new CreateRect(aimx,aimy,aimWidth,aimHeight,"rgb(0,5,90)");
var ground=new CreateRect(groundx,groundy,groundWidth,groundHeight,"rgb(10,250,0)");
var aim=new CreateBall(shotx,shoty,ballRadius,"rgb(30,40,200)");
everything.push(ball);
everything.push(target);
everything.push(ground);
everything.push(aim);
function drawall(){
context.clearRect(0,0,cwidth,cheight);
for(var i=0;i
everything[i].draw();
}
function init(){
context=document.getElementById("canvas").getContext("2d");
drawall();
}
function fire(){
horvelocity=Number(document.getElementById("hv").value);
verticalvel1=Number(document.getElementById("vv").value);
drawall();
tid=setInterval(change,100);
return false;
}
function distance(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
function change(){
addx = horvelocity;
verticalvel2 = verticalvel1 + gravity;
addy = (verticalvel1 + verticalvel2)*.5;
verticalvel1 = verticalvel2;
ball.moveball(addx,addy);
if(distance(ball.bx,ball.by,aim.bx,aim.by)<=11){
score++;
document.getElementById("score").value=score;
aim.by=aimy+ballRadius/2+Math.floor(Math.random()*aimHeight-ballRadius);
clearInterval(tid);
ball.bx = ballx;
ball.by= bally;
}
else if(ball.bx+1>=target.rx&&ball.by>target.ry){
clearInterval(tid);
ball.bx = ballx;
ball.by= bally;
}
else if (ball.by>=ground.ry) {
clearInterval(tid);
ball.bx = ballx;
ball.by= bally;
}
drawall();
}
Your brower doesn't support canvas.
Initial Horizontal Velocity:
Initial Vertical Velocity:
Geted Scores:
下面是效果图：
