Code a maze game but snake chases you and there is 1 door 🚪 if you touch the door you won if the snake touches you you lose's game

Click here for free DL of the app version that can save data.

No:48010

←

Prev Next

→

Code a maze game but snake chases you and there is..ALL
Developer User20679｜Date and time 24/3/1 7:22:10
Build time 11.809 sec｜Game capacity 2.466KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Game</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

let playerX = 50;
  let playerY = 50;
  let doorX = 350;
  let doorY = 350;
  let snakeX = 200;
  let snakeY = 200;
  let gameOver = false;

function drawPlayer() {
    ctx.fillStyle = '#0000ff';
    ctx.fillRect(playerX, playerY, 10, 10);
  }

function drawSnake() {
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(snakeX, snakeY, 10, 10);
  }

function drawDoor() {
    ctx.fillStyle = '#00ff00';
    ctx.fillRect(doorX, doorY, 10, 10);
  }

function draw() {
    if (gameOver) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#000';
      ctx.font = '30px Arial';
      ctx.fillText('Game Over', 150, 200);
      return;
    }

ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawSnake();
    drawDoor();

if (playerX < doorX + 10 && playerX + 10 > doorX && playerY < doorY + 10 && playerY + 10 > doorY) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#00ff00';
      ctx.font = '30px Arial';
      ctx.fillText('You Win!', 150, 200);
      gameOver = true;
    }

if (playerX < snakeX + 10 && playerX + 10 > snakeX && playerY < snakeY + 10 && playerY + 10 > snakeY) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#ff0000';
      ctx.font = '30px Arial';
      ctx.fillText('Game Over', 150, 200);
      gameOver = true;
    }
  }

function update() {
    if (gameOver) {
      return;
    }

if (playerY < doorY) {
      playerY += 1;
    } else if (playerY > doorY) {
      playerY -= 1;
    }

if (playerX < doorX) {
      playerX += 1;
    } else if (playerX > doorX) {
      playerX -= 1;
    }

if (snakeY < playerY) {
      snakeY += 1;
    } else if (snakeY > playerY) {
      snakeY -= 1;
    }

if (snakeX < playerX) {
      snakeX += 1;
    } else if (snakeX > playerX) {
      snakeX -= 1;
    }

draw();
  }

setInterval(update, 100);
</script>
</body>
</html>