lgastako/snake.gpt4.txt

## snake.gpt4.txt
Prompt
Please write me a classic Snake game in a single page HTML document with the CSS and JS inline.

ChatGPT
Here's a simple classic Snake game using HTML, CSS, and JavaScript, all within a single HTML file. Just copy and paste the code below into a new HTML file, then open it in your web browser to play the game.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Snake Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            margin: 0;
        }

        canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('game');
        const context = canvas.getContext('2d');
        const gridSize = 20;
        const snakeSpeed = 100;

        let snake = [{x: gridSize, y: gridSize}];
        let dx = gridSize;
        let dy = 0;
        let food = null;

        function mainLoop() {
            setTimeout(() => {
                requestAnimationFrame(mainLoop);
                moveSnake();
                draw();
            }, snakeSpeed);
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);

            if (food && head.x === food.x && head.y === food.y) {
                food = null;
            } else {
                snake.pop();
            }

            if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
                resetGame();
            }

            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    resetGame();
                }
            }

            if (!food) {
                food = createFood();
            }
        }

        function draw() {
            context.fillStyle = '#222';
            context.fillRect(0, 0, canvas.width, canvas.height);

            context.fillStyle = 'lime';
            for (let part of snake) {
                context.fillRect(part.x, part.y, gridSize, gridSize);
            }

            context.fillStyle = 'red';
            context.fillRect(food.x, food.y, gridSize, gridSize);
        }

        function createFood() {
            return {
                x: Math.floor(Math.random() * canvas.width / gridSize) * gridSize,
                y: Math.floor(Math.random() * canvas.height / gridSize) * gridSize,
            };
        }

        function resetGame() {
            snake = [{x: gridSize, y: gridSize}];
            dx = gridSize;
            dy = 0;
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowUp' && dy === 0) {
                dx = 0;
                dy = -gridSize;
            } else if (event.key === 'ArrowDown' && dy === 0) {
                dx = 0;
                dy = gridSize;
            } else if (event.key === 'ArrowLeft' && dx === 0) {
                dx = -gridSize;
                dy = 0;
            } else if (event.key === 'ArrowRight' && dx === 0) {
                dx = gridSize;
                dy = 0;
            }
        });

        mainLoop();
    </script>
</body>
</html>
	Prompt
	Please write me a classic Snake game in a single page HTML document with the CSS and JS inline.

	ChatGPT
	Here's a simple classic Snake game using HTML, CSS, and JavaScript, all within a single HTML file. Just copy and paste the code below into a new HTML file, then open it in your web browser to play the game.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Classic Snake Game</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #222;
	margin: 0;
	}

	canvas {
	border: 1px solid #fff;
	}
	</style>
	</head>
	<body>
	<canvas id="game" width="400" height="400"></canvas>
	<script>
	const canvas = document.getElementById('game');
	const context = canvas.getContext('2d');
	const gridSize = 20;
	const snakeSpeed = 100;

	let snake = [{x: gridSize, y: gridSize}];
	let dx = gridSize;
	let dy = 0;
	let food = null;

	function mainLoop() {
	setTimeout(() => {
	requestAnimationFrame(mainLoop);
	moveSnake();
	draw();
	}, snakeSpeed);
	}

	function moveSnake() {
	const head = {x: snake[0].x + dx, y: snake[0].y + dy};
	snake.unshift(head);

	if (food && head.x === food.x && head.y === food.y) {
	food = null;
	} else {
	snake.pop();
	}

	if (head.x < 0 \|\| head.x >= canvas.width \|\| head.y < 0 \|\| head.y >= canvas.height) {
	resetGame();
	}

	for (let i = 1; i < snake.length; i++) {
	if (head.x === snake[i].x && head.y === snake[i].y) {
	resetGame();
	}
	}

	if (!food) {
	food = createFood();
	}
	}

	function draw() {
	context.fillStyle = '#222';
	context.fillRect(0, 0, canvas.width, canvas.height);

	context.fillStyle = 'lime';
	for (let part of snake) {
	context.fillRect(part.x, part.y, gridSize, gridSize);
	}

	context.fillStyle = 'red';
	context.fillRect(food.x, food.y, gridSize, gridSize);
	}

	function createFood() {
	return {
	x: Math.floor(Math.random() * canvas.width / gridSize) * gridSize,
	y: Math.floor(Math.random() * canvas.height / gridSize) * gridSize,
	};
	}

	function resetGame() {
	snake = [{x: gridSize, y: gridSize}];
	dx = gridSize;
	dy = 0;
	}

	document.addEventListener('keydown', (event) => {
	if (event.key === 'ArrowUp' && dy === 0) {
	dx = 0;
	dy = -gridSize;
	} else if (event.key === 'ArrowDown' && dy === 0) {
	dx = 0;
	dy = gridSize;
	} else if (event.key === 'ArrowLeft' && dx === 0) {
	dx = -gridSize;
	dy = 0;
	} else if (event.key === 'ArrowRight' && dx === 0) {
	dx = gridSize;
	dy = 0;
	}
	});

	mainLoop();
	</script>
	</body>
	</html>