A game where you eat food to survive's game

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

No:490

435

←

Prev Next

→

A game where you eat food to survive
Developer User2995｜Date and time 23/6/14 21:16:37
Build time 64.076 sec｜Game capacity 4.328KB｜

Script

Score: 0

This is a game called ”Eat to Survive.” In this game, you control the movement of a snake and try to eat as much food as possible to score points. The game is played on a canvas element, and the controls are based on arrow keys. The game ends when the snake hits the wall or hits its own body. The game starts again when the user clicks the ”Start Game” button. The score is shown at the top of the game screen, and the game over message appears when the game ends. The emojis are not used in this code.

←

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>Eat to Survive</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #f2f2f2;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		canvas {
			border: 1px solid black;
			background-color: white;
			margin: 10px auto;
			display: block;
		}
		#score {
			font-size: 24px;
			margin-bottom: 10px;
		}
		#result {
			font-size: 32px;
			margin-bottom: 10px;
		}
		button {
			padding: 10px 20px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 4px;
			font-size: 16px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<div id="score">Score: 0</div>
	<div id="result"></div>
	<button id="start" onclick="startGame()">Start Game</button>
	<script>
		// Game variables
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var foodSize = 10;
		var foodColor = "#f44336";
		var snakeSize = 10;
		var snakeColor = "#4CAF50";
		var snakeSpeed = 100;
		var snake = [{ x: 0, y: 0 }];
		var direction = "right";
		var food = { x: 0, y: 0 };
		var gameInterval;

function startGame() {
			document.getElementById("start").style.display = "none";
			document.addEventListener("keydown", changeDirection);
			generateFood();
			gameInterval = setInterval(gameLoop, snakeSpeed);
		}

function gameLoop() {
			updateSnakePosition();
			if (isGameOver()) {
				endGame();
			} else {
				drawCanvas();
			}
		}

function changeDirection(event) {
			switch (event.keyCode) {
				case 37: // left arrow
					if (direction !== "right")
						direction = "left";
					break;
				case 38: // up arrow
					if (direction !== "down")
						direction = "up";
					break;
				case 39: // right arrow
					if (direction !== "left")
						direction = "right";
					break;
				case 40: // down arrow
					if (direction !== "up")
						direction = "down";
					break;
			}
		}

function generateFood() {
			var x = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
			var y = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
			food = { x: x, y: y };
		}

function drawCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = foodColor;
			ctx.fillRect(food.x, food.y, foodSize, foodSize);
			ctx.fillStyle = snakeColor;
			snake.forEach(function (part) {
				ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
			});
		}
	</script>
</body>
</html>

This is a game called "Eat to Survive." In this game, you control the movement of a snake and try to eat as much food as possible to score points. The game is played on a canvas element, and the controls are based on arrow keys. The game ends when the snake hits the wall or hits its own body. The game starts again when the user clicks the "Start Game" button. The score is shown at the top of the game screen, and the game over message appears when the game ends. The emojis are not used in this code.