通过设置小球的水平速度和竖直速度,让小球射击右侧在墙上的小球,当两个小球碰撞时,墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。
以下是代码:
<
!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游戏图片,游戏音效,原创游戏作品等最新的游戏开发资源。
< 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>
下面是效果图:
![](http://www.silverlightchina.net/uploads/allimg/130216/0202202K9-0.png)