mazu

最新推荐文章于 2025-08-06 16:42:26 发布

米雪321

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： canvas HTML5 javascript

本文链接：https://blog.youkuaiyun.com/mixue321/article/details/51085793

HTML5 专栏收录该内容

4 篇文章

订阅专栏

这是一个简单的网页版祖玛游戏实现，采用HTML5 Canvas绘制图形，并利用JavaScript进行交互逻辑处理。游戏包含基本的游戏循环、碰撞检测等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前做的一个简单祖玛游戏，功能不全，有待改善。

效果展示：

贴上代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>祖玛游戏</title>
<style>
*{ margin:0; padding:0; }	
body{ background-color:pink; }
#wrapper{ width:600px; margin:20px auto; background-color:white; }
</style>
<script>
	window.onload = function(){
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		var i = 0;
		var oImg = new Image();
		oImg.src = "person.png";
		oImg.onload = function(){
			
			setInterval( function(){
			oGC.clearRect(0,0,oC.width,oC.height);

			//小球经过的路径，非闭合外圆
			oGC.beginPath();
			oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
			oGC.stroke();

			//小球经过的路径，非闭合内圆
			oGC.beginPath();
			oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
			oGC.stroke();
			
			//终点上的固定小圆
			oGC.beginPath();
			oGC.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
			oGC.stroke();

			//产生运动的黑球
			for(i = 0; i < ball.length; i++){
				oGC.beginPath();
				oGC.moveTo(ball[i].x,ball[i].y);
				oGC.arc(ball[i].x,ball[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
				oGC.fill();
			}
				//translate每次平移之后会累加，通过save()，restore()将它保存在独立的空间，相当于局部变量
				oGC.save();
				oGC.translate(300,200);
				oGC.rotate(iRotate);
				//让中间的图片围绕中心点旋转，而不是左上角
				oGC.translate(-40,-40);
				//将图片添加进canvas画布里
				oGC.drawImage(oImg,0,0);
				oGC.restore();
				
				for(var i = 0;i < bullet.length; i++){
				oGC.save();
				oGC.fillStyle = 'red';
				oGC.beginPath();
				oGC.moveTo(bullet[i].x,bullet[i].y);
				oGC.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
				oGC.fill();
				oGC.restore();
			}
			
			oGC.save();
			oGC.font = '60px impact';
			oGC.textBaseline = 'top';
			oGC.fillStyle = 'red';
			oGC.shadowOffsetX = 10;
			oGC.shadowOffsetY = 10;
			oGC.shadowColor = 'green';
			oGC.shadowBlur = 5;
			var w = oGC.measureText('简易祖玛').width;
			var h = 60;
			oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
			oGC.restore();
				
		},1000/60);

		//让产生的小球沿着圆的路径做圆周运动
		setInterval(function(){
				for(var i = 0; i < ball.length; i++){
				ball[i].num++;
				//当小球运动到270度时，改变路径（从大圆转到小圆）
				if(ball[i].num == 270){
						ball[i].r = 150;
						ball[i].startX = 250;
						ball[i].startY = 50;
					}
				//当小球到达终点时，游戏结束并重新加载页面	
				if(ball[i].num == 270+180){
						alert('Game is over');
						window.location.reload();
					}
				// 小球每次移动之后的坐标		
				ball[i].x = ball[i].r*Math.sin(ball[i].num*Math.PI/180) + ball[i].startX;
				ball[i].y = ball[i].r - ball[i].r*Math.cos(ball[i].num * Math.PI/180) + ball[i].startY;}
				
				for(var i = 0; i < bullet.length; i++){
				bullet[i].x = bullet[i].x + bullet[i].sX;
				bullet[i].y = bullet[i].y + bullet[i].sY;
			}
			//碰撞成功即删除碰撞的两个小球
			for(var i = 0; i<bullet.length; i++){
				for(var j = 0;j < ball.length; j++){
					if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
						bullet.splice(i,1);
						ball.splice(j,1);
						break;
					}
				}
			}
			},30);
		
		var ball = [];
		//每隔350毫秒就向ball数组添加一个小球
		//实现路径起点连续产生小球功能
		setInterval(function(){
				ball.push({
					x : 300, //小球初始坐标x，在运动过程中被改变
					y : 0, // 小球初始坐标y，在运动过程中被改变
					r : 200, //小球围绕圆的半径
					num : 0, //通过num的自增控制小球运动过程中的角度
					startX : 300,
					startY : 0});
			},350);
			
		var iRotate = 0;
		
		oC.onmousemove = function(ev){
			var ev = ev || window.event;
			//取得鼠标相对于画布的坐标
			var x = ev.clientX - oC.offsetLeft;
			var y = ev.clientY - oC.offsetTop;
			
			var a = x - 300;
			var b = y - 200;
			
			var c = Math.sqrt(a*a + b*b);
			//判断鼠标位于中央图片的哪个方向，得到旋转的弧度
			if(a > 0 && b > 0){
				iRotate = Math.asin(b/c) + 90*Math.PI/180;
			}
			else if(a > 0){
				iRotate = Math.asin(a/c);
			}
			
			if(a < 0 && b > 0){
				iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
			}
			else if(a < 0){
				iRotate = Math.asin(a/c);
			}
			
		};
		
		var bullet = [];
		//按下鼠标即发射鼠标方向的红球
		oC.onmousedown = function(ev){
			var ev = ev || window.event;
			
			var x = ev.clientX - oC.offsetLeft;
			var y = ev.clientY - oC.offsetTop;
			
			var a = x - 300;
			var b = y - 200;
			
			var c = Math.sqrt(a*a + b*b);
			
			var speed = 5;
			
			var sX = speed * a/c;
			var sY = speed * b/c;
			
			bullet.push({
				x : 300,
				y : 200,
				sX : sX,
				sY : sY
			});
			
		};
		
	};
	//小球的碰撞检测方法
	function pz(x1,y1,x2,y2){
		
		var a = x1 - x2;
		var b = y1 - y2;
		
		var c = Math.sqrt(a*a + b*b);
		
		if(c < 40){
			return true;
		}
		else{
			return false;
		}
		
	};
};
</script>
</head>

<body>
	<div id="wrapper">
    	<canvas id="c1" width="600" height="600">
        	<p>该浏览器暂不支持canvas</p>
        </canvas>
    </div>
</body>
</html>