AI game creator

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

No:42974

112

←

Prev Next

→

Maze
Developer User19028｜Date and time 24/2/13 15:54:59
Build time 12.354 sec｜Game capacity 3.125KB｜

Script

Sure, here's an example of a simple maze game implemented as a single HTML file using JavaScript:

This implementation uses HTML5 canvas to draw the maze walls and the player on the screen. The player can be moved using the arrow keys on the keyboard. If the player collides with any of the maze walls, their position is reset back to the starting position. The game loop updates the screen continuously, ensuring smooth gameplay.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure, here's an example of a simple maze game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
</head>
<body>
  <canvas id="mazeCanvas" width="400" height="400"></canvas>

// Define the maze walls and player positions
    const walls = [
      { x: 0, y: 0, width: 400, height: 10 }, // Top wall
      { x: 0, y: 390, width: 400, height: 10 }, // Bottom wall
      { x: 0, y: 0, width: 10, height: 400 }, // Left wall
      { x: 390, y: 0, width: 10, height: 400 }, // Right wall
      { x: 100, y: 100, width: 200, height: 10 }, // Middle wall
    ];

let player = { x: 50, y: 50, width: 10, height: 10 }; // Player position

// Function to draw the maze walls on the canvas
    function drawWalls() {
      ctx.fillStyle = 'black';
      walls.forEach(wall => {
        ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
      });
    }

// Function to draw the player on the canvas
    function drawPlayer() {
      ctx.fillStyle = 'red';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

// Function to update the player position based on keyboard input
    function handleKeys(event) {
      const key = event.key;

if (key === 'ArrowUp' && player.y > 0) {
        player.y -= 5;
      }

if (key === 'ArrowDown' && player.y < canvas.height - player.height) {
        player.y += 5;
      }

if (key === 'ArrowLeft' && player.x > 0) {
        player.x -= 5;
      }

if (key === 'ArrowRight' && player.x < canvas.width - player.width) {
        player.x += 5;
      }
    }

// Function to check for collision between the player and maze walls
    function checkCollision() {
      walls.forEach(wall => {
        if (player.x < wall.x + wall.width &&
            player.x + player.width > wall.x &&
            player.y < wall.y + wall.height &&
            player.y + player.height > wall.y) {
          // Collision occurred, reset player position
          player.x = 50;
          player.y = 50;
        }
      });
    }

// Main game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the maze walls and player
      drawWalls();
      drawPlayer();

// Check for collision
      checkCollision();

// Request animation frame for the next loop iteration
      requestAnimationFrame(gameLoop);
    }

// Start the game loop
    requestAnimationFrame(gameLoop);

// Listen for keyboard events
    window.addEventListener('keydown', handleKeys);
  </script>
</body>
</html>

```