AI game creator

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

No:3508

1525

←

Prev Next

→

Snake
Developer User3712｜Date and time 23/6/25 9:13:14
Build time 25.048 sec｜Game capacity 2.917KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Snake Game</title>
	<style>
		canvas {
			background-color: black;
			border: 5px solid white;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		let canvas = document.getElementById("canvas");
		let context = canvas.getContext("2d");
		let tileSize = 10;
		let foodX, foodY;
		let snake = [];
		let snakeLength = 1;
		let direction = "right";
		let score = 0;

function createFood() {
			foodX = Math.floor(Math.random() * (canvas.width / tileSize)) * tileSize;
			foodY = Math.floor(Math.random() * (canvas.height / tileSize)) * tileSize;
		}

function drawFood() {
			context.fillStyle = "red";
			context.fillRect(foodX, foodY, tileSize, tileSize);
		}

function moveSnake() {
			let headX = snake[0].x;
			let headY = snake[0].y;

if (direction === "right") {
				headX += tileSize;
			} else if (direction === "left") {
				headX -= tileSize;
			} else if (direction === "up") {
				headY -= tileSize;
			} else if (direction === "down") {
				headY += tileSize;
			}

let tail = snake.pop();
			tail.x = headX;
			tail.y = headY;

snake.unshift(tail);
		}

function drawSnake() {
			for (let i = 0; i < snake.length; i++) {
				context.fillStyle = "white";
				context.fillRect(snake[i].x, snake[i].y, tileSize, tileSize);
			}
		}

function checkCollision() {
			let headX = snake[0].x;
			let headY = snake[0].y;

if (headX < 0 || headX >= canvas.width || headY < 0 || headY >= canvas.height) {
				return true;
			}

for (let i = 1; i < snake.length; i++) {
				if (headX === snake[i].x && headY === snake[i].y) {
					return true;
				}
			}

return false;
		}

function checkFoodCollision() {
			if (snake[0].x === foodX && snake[0].y === foodY) {
				score++;
				snakeLength++;
				createFood();
			}
		}

function updateScore() {
			let scoreElement = document.getElementById("score");
			scoreElement.innerHTML = "Score: " + score;
		}

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

moveSnake();
			drawSnake();

drawFood();
			checkFoodCollision();

if (checkCollision()) {
				clearInterval(gameInterval);
				alert("Game over!");
			}

updateScore();
		}

for (let i = 0; i < snakeLength; i++) {
			snake.push({x: 50 + tileSize * i, y: 50});
		}

createFood();

drawSnake();
		drawFood();

document.addEventListener("keydown", handleKeyDown);

let gameInterval = setInterval(gameLoop, 100);
	</script>
	<p id="score">Score: 0</p>
</body>
</html>