AI game creator

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

No:3321

6418

←

Prev Next

→

death march
Developer User3655｜Date and time 23/6/24 13:22:07
Build time 31.178 sec｜Game capacity 3.035KB｜

Script

HTML5のcanvas要素を使用し、JavaScriptでゲームを実装しました。プレイヤーはスマホで画面をタップしてジャンプし、障害物を避けることが目的です。以下が実際のプログラムです：

このプログラムを実行すると、黄色い四角がプレイヤー、赤い四角が障害物です。スマホで画面をタップするとプレイヤーがジャンプします。障害物を避けているとスコアが加算されます。障害物に当たるとゲームオーバーになります。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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="game" width="320" height="480"></canvas>
	<script>
		var canvas = document.getElementById("game");
		var ctx = canvas.getContext("2d");

var score = 0;
		var scoreInterval = setInterval(function() {
			score++;
		}, 100);

document.addEventListener("touchstart", function(event) {
			player.jump();
		});

function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

player.draw();
			player.update();

for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].draw();
				obstacles[i].update();
				if (collision(player, obstacles[i])) {
					clearInterval(gameInterval);
					clearInterval(obstacleInterval);
					clearInterval(scoreInterval);
					alert("Game Over! Your score is " + score + ".");
				}
				if (obstacles[i].x + obstacles[i].width < 0) {
					obstacles.splice(i, 1);
					i--;
				}
			}

ctx.fillStyle = "black";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, 10, 30);

gameInterval = requestAnimationFrame(gameLoop);
		}

function collision(a, b) {
			return a.x < b.x + b.width &&
				a.x + a.width > b.x &&
				a.y < b.y + b.height &&
				a.y + a.height > b.y;
		}

var gameInterval = requestAnimationFrame(gameLoop);
	</script>
</body>
</html>