html5写的射击小游戏

最新推荐文章于 2023-10-09 18:32:48 发布

SherryWang0622

最新推荐文章于 2023-10-09 18:32:48 发布

阅读量3.3k

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/supersnow0622/article/details/8563228

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

以下是代码：

<!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>

下面是效果图：

SherryWang0622

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
html5写的射击小游戏

通过设置小球的水平速度和竖直速度，让小球射击右侧在墙上的小球，当两个小球碰撞时，墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。以下是代码：var cwidth=600//画布宽var cheight=400;//画布高var aimx=300;//长方体目标物x坐标var aimy=100;//长方体目标物y坐标var aimWidth=80;//长方体目标物的
复制链接

扫一扫