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

No:2404

197

←

Prev Next

→

A snake game with levels with different fruits and..ALL
Developer User3408｜Date and time 23/6/21 10:29:49
Build time 56.972 sec｜Game capacity 4.98KB｜

Script

Snake Game

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Snake Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f5f5f5;
			color: #333;
			font-family: sans-serif;
			text-align: center;
		}
		canvas {
			border: 2px solid #333;
			margin: 10px auto;
		}
		#score {
			font-weight: bold;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<h1>Snake Game</h1>
	<canvas id="game" width="300" height="300"></canvas>
	<p id="score">Score: 0</p>
	<script>
		var canvas = document.getElementById("game");
		var context = canvas.getContext("2d");
		var score = document.getElementById("score");
		var level = 1;
		var fruits = [
			{
				type: "apple",
				color: "#ff5555",
				points: 10
			},
			{
				type: "banana",
				color: "#ffff55",
				points: 20
			},
			{
				type: "orange",
				color: "#ffaa00",
				points: 30
			},
			{
				type: "star",
				color: "#ffffff",
				points: 50
			}
		];
		var snake;
		var direction;
		var fruit;
		var intervalId;
		init();
		function init() {
			snake = [
				{x: 5, y: 5},
				{x: 4, y: 5},
				{x: 3, y: 5}
			];
			direction = "right";
			fruit = generateFruit();
			score.innerHTML = "Score: 0";
			draw();
			intervalId = setInterval(gameLoop, 1000/10);
		}
		function gameLoop() {
			var head = getHead();
			if (head.x < 0 || head.x >= canvas.width/10 || head.y < 0 || head.y >= canvas.height/10) {
				gameOver();
				return;
			}
			if (collidesWithSnake(head)) {
				gameOver();
				return;
			}
			if (collidesWithFruit(head)) {
				score.innerHTML = "Score: " + fruit.points;//(parseInt(score.innerHTML.substring(7)) + fruit.points);
				snake.unshift(head);
				if (fruit.type == "star") {
					level++;
				}
				if (level > 3) {
					win();
					return;
				}
				fruit = generateFruit();
			} else {
				snake.pop();
				snake.unshift(head);
			}
			draw();
		}
		function draw() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			for (var i = 0; i < snake.length; i++) {
				drawSquare(snake[i], i == 0 ? "#333" : "#555");
			}
			drawSquare(fruit, fruit.color);
		}
		function drawSquare(square, color) {
			context.fillStyle = color;
			context.fillRect(square.x*10, square.y*10, 10, 10);
		}
		function getHead() {
			var head = {x: snake[0].x, y: snake[0].y};
			switch (direction) {
				case "up":
					head.y--;
					break;
				case "down":
					head.y++;
					break;
				case "left":
					head.x--;
					break;
				case "right":
					head.x++;
					break;
			}
			return head;
		}
		function collidesWithSnake(square) {
			for (var i = 1; i < snake.length; i++) {
				if (square.x == snake[i].x && square.y == snake[i].y) {
					return true;
				}
			}
			return false;
		}
		function collidesWithFruit(square) {
			return square.x == fruit.x && square.y == fruit.y;
		}
		function generateFruit() {
			var index = Math.floor(Math.random() * fruits.length);
			var fruit = fruits[index];
			var square;
			do {
				square = {x: Math.floor(Math.random() * canvas.width/10), y: Math.floor(Math.random() * canvas.height/10)};
			} while (collidesWithSnake(square));
			if (fruit.type == "star") {
				drawStar(square);
			} else {
				drawFruit(square, fruit.color);
			}
			return Object.assign({}, square, fruit);
		}
		function drawFruit(square, color) {
			context.fillStyle = color;
			context.beginPath();
			context.arc(square.x*10+5, square.y*10+5, 5, 0, 2*Math.PI);
			context.fill();
		}
		function drawStar(square) {
			context.fillStyle = "#ffffff";
			context.beginPath();
			context.moveTo(square.x*10+5, square.y*10+2);
			context.lineTo(square.x*10+7, square.y*10+7);
			context.lineTo(square.x*10+10, square.y*10+7);
			context.lineTo(square.x*10+7, square.y*10+10);
			context.lineTo(square.x*10+9, square.y*10+13);
			context.lineTo(square.x*10+5, square.y*10+11);
			context.lineTo(square.x*10+1, square.y*10+13);
			context.lineTo(square.x*10+3, square.y*10+10);
			context.lineTo(square.x*10, square.y*10+7);
			context.lineTo(square.x*10+3, square.y*10+7);
			context.lineTo(square.x*10+5, square.y*10+2);
			context.fill();
		}
		function gameOver() {
			clearInterval(intervalId);
			alert("Game Over!");
			init();
		}
		function win() {
			clearInterval(intervalId);
			alert("You Win!");
			init();
		}
		document.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 38:
					if (direction != "down") {
						direction = "up";
					}
					break;
				case 40:
					if (direction != "up") {
						direction = "down";
					}
					break;
				case 37:
					if (direction != "right") {
						direction = "left";
					}
					break;
				case 39:
					if (direction != "left") {
						direction = "right";
					}
					break;
			}
		});
	</script>
</body>
</html>