const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const playerSize = 20; const enemySize = 20; const playerSpeed = 5; const enemySpeed = 3; const lives = 3; let playerX = canvas.width / 2 - playerSize / 2; let playerY = canvas.height / 2 - playerSize / 2; let enemyX = Math.random() * (canvas.width - enemySize); let enemyY = Math.random() * (canvas.height - enemySize); let enemyDirectionX = Math.random() < 0.5 ? -1 : 1; let enemyDirectionY = Math.random() < 0.5 ? -1 : 1; let livesLeft = lives; function drawPlayer() { ctx.fillStyle = 'blue'; ctx.fillRect(playerX, playerY, playerSize, playerSize); } function drawEnemy() { ctx.fillStyle = 'red'; ctx.fillRect(enemyX, enemyY, enemySize, enemySize); } function movePlayer(key) { if (key === 'ArrowLeft' && playerX > 0) { playerX -= playerSpeed; } else if (key === 'ArrowRight' && playerX < canvas.width - playerSize) { playerX += playerSpeed; } else if (key === 'ArrowUp' && playerY > 0) { playerY -= playerSpeed; } else if (key === 'ArrowDown' && playerY < canvas.height - playerSize) { playerY += playerSpeed; } } function moveEnemy() { if (enemyX + enemySize > canvas.width || enemyX < 0) { enemyDirectionX = -enemyDirectionX; } if (enemyY + enemySize > canvas.height || enemyY < 0) { enemyDirectionY = -enemyDirectionY; } enemyX += enemySpeed * enemyDirectionX; enemyY += enemySpeed * enemyDirectionY; } function checkCollision() { if (playerX < enemyX + enemySize && playerX + playerSize > enemyX && playerY < enemyY + enemySize && playerY + playerSize > enemyY) { livesLeft--; playerX = canvas.width / 2 - playerSize / 2; playerY = canvas.height / 2 - playerSize / 2; enemyX = Math.random() * (canvas.width - enemySize); enemyY = Math.random() * (canvas.height - enemySize); enemyDirectionX = Math.random() < 0.5 ? -1 : 1; enemyDirectionY = Math.random() < 0.5 ? -1 : 1; } } function drawLives() { ctx.fillStyle = 'black'; ctx.font = '20px Arial'; ctx.fillText(`Lives: ${livesLeft}`, 10, 20); } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); drawEnemy(); moveEnemy(); checkCollision(); drawLives(); if (livesLeft > 0) { requestAnimationFrame(gameLoop); } else { ctx.fillStyle = 'black'; ctx.font = '50px Arial'; ctx.fillText('GAME OVER', canvas.width / 2 - 150, canvas.height / 2); } } document.addEventListener('keydown', (event) => { movePlayer(event.key); }); gameLoop();

GPTgame

Sign up for free tokens!

Game of tag, with a lives system

GPTgame