AI game creator

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

No:3450

5502

←

Prev Next

→

move a serpent
Developer User3707｜Date and time 23/6/25 5:23:04
Build time 33.283 sec｜Game capacity 2.698KB｜

Script

←

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;
			background-color: #E3E3E3;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');

// 大蛇オブジェクト
		let snake = {
			x: 200,
			y: 200,
			size: 10,
			speed: 10,
			direction: 'right',
			tail: [] // 末尾の座標を格納する配列
		};

// キーボードの入力を取得
		document.addEventListener('keydown', function(event) {
			if (event.key === 'ArrowLeft' && snake.direction !== 'right') {
				snake.direction = 'left';
			} else if (event.key === 'ArrowRight' && snake.direction !== 'left') {
				snake.direction = 'right';
			} else if (event.key === 'ArrowUp' && snake.direction !== 'down') {
				snake.direction = 'up';
			} else if (event.key === 'ArrowDown' && snake.direction !== 'up') {
				snake.direction = 'down';
			}
		});

// ゲームループ
		function gameLoop() {
			requestAnimationFrame(gameLoop); // 毎フレーム再描画

// 末尾の座標を格納
			snake.tail.unshift({x: snake.x, y: snake.y});

// 移動方向に応じて座標変更
			if (snake.direction === 'right') {
				snake.x += snake.speed;
			} else if (snake.direction === 'left') {
				snake.x -= snake.speed;
			} else if (snake.direction === 'up') {
				snake.y -= snake.speed;
			} else if (snake.direction === 'down') {
				snake.y += snake.speed;
			}

// 大蛇が画面端に到達した場合、反対側の端から再出発
			if (snake.x > canvas.width) {
				snake.x = 0;
			} else if (snake.x < 0) {
				snake.x = canvas.width;
			} else if (snake.y > canvas.height) {
				snake.y = 0;
			} else if (snake.y < 0) {
				snake.y = canvas.height;
			}

// 大蛇が自分の体に触れた場合、ゲームオーバー
			for (let i = 0; i < snake.tail.length; i++) {
				if (snake.x === snake.tail[i].x && snake.y === snake.tail[i].y) {
					alert('Game Over!');
					location.reload();
				}
			}

// 大蛇の描画
			context.clearRect(0, 0, canvas.width, canvas.height); // 画面クリア
			context.fillStyle = 'green';
			context.fillRect(snake.x, snake.y, snake.size, snake.size); // 大蛇の頭
			context.fillStyle = 'lightgreen';
			for (let i = 0; i < snake.tail.length; i++) { // 大蛇の体
				context.fillRect(snake.tail[i].x, snake.tail[i].y, snake.size, snake.size);
			}

// 末尾が5個以上ある場合、古い座標を捨てる
			if (snake.tail.length > 5) {
				snake.tail.pop();
			}
		}

gameLoop();
	</script>
</body>
</html>