snake game but Apple Is anales un moviment's game

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

No:43188

←

Prev Next

→

snake game but Apple Is anales un moviment
Developer User19134｜Date and time 24/2/14 21:03:08
Build time 16.766 sec｜Game capacity 4.114KB｜

Script

←

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>
	<style>
		canvas {
			background-color: #222;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>

// Definimos la velocidad de movimiento de la serpiente
		const speed = 100;

// Obtenemos el canvas y su contexto
		const canvas = document.getElementById("canvas");
		const context = canvas.getContext("2d");

// Inicializamos variables para guardar la posición de la serpiente
		let snake = [
			{x: 5, y: 5},
			{x: 6, y: 5},
			{x: 7, y: 5}
		];

// Guardamos la dirección actual de la serpiente
		let direction = "right";

// Generamos una manzana en una posición aleatoria
		let apple = generateApple();

// Escuchamos los eventos de teclado para cambiar la dirección de la serpiente
		document.addEventListener("keydown", changeDirection);

// Función para cambiar la dirección de la serpiente
		function changeDirection(event) {
			switch(event.keyCode) {
				case 37:
					if (direction !== "right") direction = "left";
					break;
				case 38:
					if (direction !== "down") direction = "up";
					break;
				case 39:
					if (direction !== "left") direction = "right";
					break;
				case 40:
					if (direction !== "up") direction = "down";
					break;
			}
		}

// Función para generar una posición aleatoria para la manzana
		function generateApple() {
			return {
				x: Math.floor(Math.random() * boardSize),
				y: Math.floor(Math.random() * boardSize)
			};
		}

// Función principal del juego
		function gameLoop() {
			// Limpiamos el canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

// Movemos la serpiente según su dirección
			moveSnake();

// Verificamos si la serpiente ha colisionado consigo misma
			if (checkCollision()) {
				setTimeout(() => {
					alert("Game Over!");
					location.reload(); // Reiniciamos el juego
				}, 500);
				return;
			}

// Verificamos si la serpiente ha comido la manzana
			if (snake[0].x === apple.x && snake[0].y === apple.y) {
				// Añadimos un nuevo segmento a la serpiente
				snake.push({});
				// Generamos una nueva posición para la manzana
				apple = generateApple();
			}
			
			// Dibujamos la serpiente y la manzana
			drawSnake();
			drawApple();

// Ejecutamos la función recursivamente cada cierto tiempo
			setTimeout(gameLoop, speed);
		}

// Función para mover la serpiente
		function moveSnake() {
			const head = {...snake[0]}; // Copiamos la posición de la cabeza

// Movemos la cabeza según la dirección actual
			switch(direction) {
				case "right":
					head.x++;
					break;
				case "left":
					head.x--;
					break;
				case "up":
					head.y--;
					break;
				case "down":
					head.y++;
					break;
			}

// Insertamos la nueva cabeza al principio del arreglo
			snake.unshift(head);

// Removemos la última posición de la serpiente
			snake.pop();
		}

// Función para verificar si la serpiente ha colisionado con su propio cuerpo o con los bordes
		function checkCollision() {
			const head = snake[0];

// Verificamos si la cabeza ha colisionado con los bordes del tablero
			if (head.x < 0 || head.y < 0 || head.x >= boardSize || head.y >= boardSize) {
				return true;
			}

// Verificamos si la cabeza ha colisionado con alguna parte de su cuerpo
			for (let i = 1; i < snake.length; i++) {
				if (snake[i].x === head.x && snake[i].y === head.y) {
					return true;
				}
			}

return false;
		}

// Función para dibujar la serpiente
		function drawSnake() {
			snake.forEach(segment => {
				context.fillStyle = "#FFF";
				context.fillRect(segment.x * size, segment.y * size, size, size);
			});
		}

// Función para dibujar la manzana
		function drawApple() {
			context.fillStyle = "red";
			context.fillRect(apple.x * size, apple.y * size, size, size);
		}

// Iniciamos el juego llamando a la función principal
		gameLoop();
	</script>
</body>
</html>