html5写的射击小游戏

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

　　以下是代码：

< !DOCTYPE html>
< mata charset= "utf-8">
< html>

< script>
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.length;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();  
}
< /script>
< body onLoad="init()">
< canvas id="canvas" width="600" height="400">
Your brower doesn't support canvas.
< /canvas>
< form onSubmit="return fire();">
Initial Horizontal Velocity:<input type="number" id="hv"  value="10"   >
Initial Vertical Velocity:<input type="number" id="vv" value="-25"  >
< input type="submit" value="fire" >
< p><h2>Geted Scores:<input id="score" value=""></h2></p>
< /form>

< /body>
< /html>

　　下面是效果图：

　　

      转自： www.6m5m.com   6m5m是中国最好的、最安全的游戏素材资源共享与交易网站，提供各种游戏素材下载，游戏素材交易，游戏源码下载，3d游戏模型，2d游戏图片，游戏音效，原创游戏作品等最新的游戏开发资源。