C%C3%B3digo JavaScript para un Juego de Serpientes 2D - Tutorial

Aqu%C3%AD tienes un ejemplo de c%C3%B3digo en JavaScript para un juego de culebras 2D: \n\njavascript\n// Configuraci%C3%B3n del juego\nconst canvas = document.getElementById("gameCanvas");\nconst ctx = canvas.getContext("2d");\nconst tileSize = 20;\nconst gameSize = canvas.width / tileSize;\nlet snake = [{x: 10, y: 10}];\nlet apple = {x: 5, y: 5};\nlet direction = "right";\n\n// Funci%C3%B3n principal del juego\nfunction gameLoop() {\n clearCanvas();\n moveSnake();\n drawSnake();\n drawApple();\n checkCollision();\n\n setTimeout(gameLoop, 100);\n}\n\n// Funci%C3%B3n para limpiar el canvas\nfunction clearCanvas() {\n ctx.fillStyle = "black";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n}\n\n// Funci%C3%B3n para mover la serpiente\nfunction moveSnake() {\n const head = {x: snake[0].x, y: snake[0].y};\n\n if (direction === "up") head.y--;\n if (direction === "down") head.y++;\n if (direction === "left") head.x--;\n if (direction === "right") head.x++;\n\n snake.unshift(head);\n snake.pop();\n}\n\n// Funci%C3%B3n para dibujar la serpiente\nfunction drawSnake() {\n snake.forEach((segment) => {\n ctx.fillStyle = "green";\n ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);\n });\n}\n\n// Funci%C3%B3n para dibujar la manzana\nfunction drawApple() {\n ctx.fillStyle = "red";\n ctx.fillRect(apple.x * tileSize, apple.y * tileSize, tileSize, tileSize);\n}\n\n// Funci%C3%B3n para verificar colisiones\nfunction checkCollision() {\n const head = snake[0];\n\n // Verificar colisi%C3%B3n con la pared\n if (head.x < 0 || head.x === gameSize || head.y < 0 || head.y === gameSize) {\n gameOver();\n }\n\n // Verificar colisi%C3%B3n con la serpiente\n for (let i = 1; i < snake.length; i++) {\n if (head.x === snake[i].x && head.y === snake[i].y) {\n gameOver();\n }\n }\n\n // Verificar colisi%C3%B3n con la manzana\n if (head.x === apple.x && head.y === apple.y) {\n snake.push({});\n generateApple();\n }\n}\n\n// Funci%C3%B3n para generar una nueva manzana\nfunction generateApple() {\n apple.x = Math.floor(Math.random() * gameSize);\n apple.y = Math.floor(Math.random() * gameSize);\n}\n\n// Funci%C3%B3n para finalizar el juego\nfunction gameOver() {\n alert("Game over!");\n snake = [{x: 10, y: 10}];\n direction = "right";\n}\n\n// Event listener para detectar las teclas presionadas\ndocument.addEventListener("keydown", (event) => {\n if (event.key === "ArrowUp" && direction !== "down") direction = "up";\n if (event.key === "ArrowDown" && direction !== "up") direction = "down";\n if (event.key === "ArrowLeft" && direction !== "right") direction = "left";\n if (event.key === "ArrowRight" && direction !== "left") direction = "right";\n});\n\n// Iniciar el juego\ngameLoop();\n\n\nEste es un ejemplo b%C3%A1sico de un juego de culebras 2D en JavaScript. Utiliza el canvas HTML para dibujar los elementos del juego y detectar las teclas presionadas para controlar la direcci%C3%B3n de la serpiente. El juego se ejecuta en un bucle principal que se repite cada 100 milisegundos. El objetivo es comer las manzanas sin chocar con la pared o con la serpiente misma.