Today we are going to use ChatGPT-4 to code an entire snake game for you. Here is the step-by-step process:
Step 1: Create a HTML Canvas
We'll use a HTML canvas element to render the game. In the HTML file, add a canvas element with an ID of "canvas" to the body of the page:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Snake Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Step 2: Style the Canvas with CSS
In the CSS file, style the canvas element to give it a background color and center it on the page:
#canvas {
border: 1px solid black;
margin: 0 auto;
display: block;
}
Step 3: Set up the Game with JavaScript
In the JavaScript file, we'll set up the game loop and initialize the game state. We'll also handle user input to control the snake. Here's the complete code for this step:
// Set up the canvas and score display
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// Set up the snake and score
let snake = [{x: 10, y: 10}];
let dx = 10;
let dy = 0;
let food = getRandomFood();
// Set up the game loop
setInterval(gameLoop, 100);
function gameLoop() {
clearCanvas();
moveSnake();
drawSnake();
drawFood();
checkCollision();
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
}
function moveSnake() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(head);
if (!ateFood()) {
snake.pop();
} else {
food = getRandomFood();
score++;
}
}
function drawSnake() {
ctx.fillStyle = 'black';
snake.forEach((segment) => {
ctx.fillRect(segment.x, segment.y, 10, 10);
});
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}
function getRandomFood() {
return {
x: Math.floor(Math.random() * (canvasWidth / 10)) * 10,
y: Math.floor(Math.random() * (canvasHeight / 10)) * 10
}
}
function ateFood() {
return snake[0].x === food.x && snake[0].y === food.y;
}
function checkCollision() {
// Check if snake hits the wall
if (snake[0].x < 0 || snake[0].x >= canvasWidth || snake[0].y < 0 || snake[0].y >= canvasHeight) {
resetGame();
}
// Check if snake hits itself
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
resetGame();
}
}
}
function resetGame() {
// Reset snake and food positions
snake = [{x: 10, y: 10}];
dx = 10;
dy = 0;
food = getRandomFood();
// Display game over message
alert('Game over!');
// Refresh the page
location.reload();
}
// Handle user input
document.addEventListener('keydown', (event) => {
if (event.keyCode === 37 && dx === 0) {
dx = -10;
dy = 0;
} else if (event.keyCode === 38 && dy === 0) {
dx = 0;
dy = -10;
} else if (event.keyCode === 39 && dx === 0) {
dx = 10;
dy = 0;
} else if (event.keyCode === 40 && dy === 0) {
dx = 0;
dy = 10;
}
});
Part 4: Recap
After reading this, I sincerely hope you learnt something new and were inspired to try your hand at creating something lovely.
Top comments (0)