html5 射击小游戏demo,html5写的射击小游戏

通过设置小球的水平速度和竖直速度，让小球射击右侧在墙上的小球，当两个小球碰撞时，墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。

以下是代码：

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:

下面是效果图：