Snake: ``` const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = 10, y = 10, xv = 10, yv = 0, size = 10, trail = [], tail = 5; document.addEventListener('keydown', e => { if (e.keyCode === 37) { xv = -size; yv = 0; } if (e.keyCode === 38) { xv = 0; yv = -size; } if (e.keyCode === 39) { xv = size; yv = 0; } if (e.keyCode === 40) { xv = 0; yv = size; } }); setInterval(() => { x += xv; y += yv; if (x < 0) x = canvas.width - size; if (x >= canvas.width) x = 0; if (y < 0) y = canvas.height - size; if (y >= canvas.height) y = 0; ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'lime'; for (let i = 0; i < trail.length; i++) { ctx.fillRect(trail[i].x, trail[i].y, size, size); if (trail[i].x === x && trail[i].y === y) { tail = 5; } } trail.push({ x, y }); while (trail.length > tail) { trail.shift(); } }, 100); ``` Pong: ``` const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let ballX = canvas.width / 2, ballY = canvas.height / 2, ballVX = 5, ballVY = 5, paddleY = canvas.height / 2 - 25, score = 0; document.addEventListener('keydown', e => { if (e.keyCode === 38) { paddleY -= 20; } if (e.keyCode === 40) { paddleY += 20; } }); setInterval(() => { ballX += ballVX; ballY += ballVY; if (ballX < 0) { ballVX = -ballVX; } if (ballX > canvas.width) { ballVX = -ballVX; } if (ballY < 0) { ballVY = -ballVY; } if (ballY > canvas.height) { ballVY = -ballVY; } if (ballX < 10 && ballY > paddleY && ballY < paddleY + 50) { ballVX = -ballVX; score++; } ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.fillRect(10, paddleY, 10, 50); ctx.fillRect(canvas.width - 20, ballY - 5, 10, 10); ctx.fillText(`Score: ${score}`, canvas.width / 2 - 30, 20); }, 50); ``` Breakout: ``` const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const brickWidth = 50, brickHeight = 20, bricks = []; let ballX = canvas.width / 2, ballY = canvas.height - 30, ballVX = 5, ballVY = -5, paddleX = canvas.width / 2 - 25, score = 0; for (let i = 0; i < canvas.width / brickWidth; i++) { for (let j = 0; j < 3; j++) { bricks.push({ x: i * brickWidth, y: j * brickHeight, visible: true }); } } document.addEventListener('keydown', e => { if (e.keyCode === 37) { paddleX -= 20; } if (e.keyCode === 39) { paddleX += 20; } }); setInterval(() => { ballX += ballVX; ballY += ballVY; if (ballX < 0 || ballX > canvas.width) { ballVX = -ballVX; } if (ballY < 0) { ballVY = -ballVY; } if (ballY > canvas.height) { ballVY = -ballVY; } if (ballX > paddleX && ballX < paddleX + 50 && ballY > canvas.height - 30) { ballVY = -ballVY; score++; } for (let i = 0; i < bricks.length; i++) { if (bricks[i].visible && ballX > bricks[i].x && ballX < bricks[i].x + brickWidth && ballY > bricks[i].y && ballY < bricks[i].y + brickHeight) { ballVY = -ballVY; bricks[i].visible = false; score++; } } ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.fillRect(paddleX, canvas.height - 20, 50, 10); ctx.fillRect(ballX - 5, ballY - 5, 10, 10); ctx.fillText(`Score: ${score}`, canvas.width / 2 - 30, 20); for (let i = 0; i < bricks.length; i++) { if (bricks[i].visible) { ctx.fillRect(bricks[i].x, bricks[i].y, brickWidth, brickHeight); } } }, 50);

GPTgame

Sign up for free tokens!

Snake, Pong, Breakout.

GPTgame