A devil moves in the field, we control the little man to avoid him, if you touch it directly dead's game

Click here for free DL of the app version that can save data.

No:2516

884

←

Prev Next

→

A devil moves in the field, we control the little ..ALL
Developer User3575｜Date and time 23/6/21 20:43:17
Build time 16.642 sec｜Game capacity 1.97KB｜

Script

亡。游戏界面上方显示分数，记录躲避成功的次数。当小人与魔鬼碰撞时，游戏结束，显示最终得分。以下是实现的代码：

躲避成功次数： 0

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

亡。游戏界面上方显示分数，记录躲避成功的次数。当小人与魔鬼碰撞时，游戏结束，显示最终得分。

以下是实现的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>魔鬼追踪</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="300" height="500"></canvas>
	<p>躲避成功次数： <span id="score">0</span></p>

// 绘制魔鬼和小人
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillText("👿", devilX, devilY);
			ctx.fillText("🙂", playerX, canvas.height - 50);
			ctx.fillText("躲避成功次数： " + score, 10, 30);
		}

// 魔鬼移动
		function moveDevil() {
			devilY += devilSpeed;
			if (devilY > canvas.height) {
				devilY = -50;
			}
		}

// 小人移动
		function movePlayer(event) {
			if (playing) {
				if (event.keyCode == 37 && playerX > 0) { // 左箭头
					playerX -= playerSpeed;
				}
				else if (event.keyCode == 39 && playerX < canvas.width - 35) { // 右箭头
					playerX += playerSpeed;
				}
			}
		}

// 碰撞检测
		function checkCollision() {
			if (Math.abs(playerX - devilX) < 20 && Math.abs(canvas.height - 50 - devilY) < 20) {
				playing = false;
				alert("游戏结束，最终得分为：" + score);
			}
			else if (devilY >= canvas.height / 2 && devilY <= canvas.height / 2 + devilSpeed) {
				score++;
			}
		}

// 循环执行
		function loop() {
			if (playing) {
				draw();
				moveDevil();
				checkCollision();
			}
			requestAnimationFrame(loop);
		}

// 添加键盘监听器
		document.addEventListener("keydown", movePlayer);

// 开始游戏
		loop();
	</script>
</body>
</html>