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

No:31747

maze with person that you control enemy with close..ALL
Developer User15107｜Date and time 23/12/28 8:30:35
Build time 27.281 sec｜Game capacity 3.412KB｜

Script

Sure! Here's a simple maze game implemented as a single HTML file using JavaScript.

Maze Game

In this game, you control a person (represented by a green block) using the arrow keys on your smartphone. The goal is to reach the blue closet without being caught by the enemy (represented by a red block). If you collide with the enemy, the game is over and a popup message appears. If you reach the closet, a congratulatory message is shown, and the game resets for another round. The maze's size is set to 400px x 400px, but you can adjust it as per your preference.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple maze game implemented as a single HTML file using JavaScript.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    #maze {
      display: inline-block;
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .person, .enemy, .closet {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: black;
    }
    .person {
      background-color: green;
    }
    .enemy {
      background-color: red;
    }
    .closet {
      background-color: blue;
    }
  </style>
</head>
<body>
<h1>Maze Game</h1>
<div id="maze">
  <div class="person"></div>
  <div class="enemy"></div>
  <div class="closet"></div>
</div>

var person = document.querySelector('.person');
  var enemy = document.querySelector('.enemy');
  var closet = document.querySelector('.closet');

var mazeWidth = document.getElementById('maze').offsetWidth;
  var mazeHeight = document.getElementById('maze').offsetHeight;

var personX = Math.floor(Math.random() * (mazeWidth - 20));
  var personY = Math.floor(Math.random() * (mazeHeight - 20));

var enemyX = Math.floor(Math.random() * (mazeWidth - 20));
  var enemyY = Math.floor(Math.random() * (mazeHeight - 20));

var closetX = Math.floor(Math.random() * (mazeWidth - 20));
  var closetY = Math.floor(Math.random() * (mazeHeight - 20));

person.style.left = personX + 'px';
  person.style.top = personY + 'px';

enemy.style.left = enemyX + 'px';
  enemy.style.top = enemyY + 'px';

closet.style.left = closetX + 'px';
  closet.style.top = closetY + 'px';

function movePerson(e) {
    var step = 20;

switch (e.key) {
      case 'ArrowUp':
        if (personY - step >= 0) {
          personY -= step;
        }
        break;
      case 'ArrowDown':
        if (personY + step <= mazeHeight - 20) {
          personY += step;
        }
        break;
      case 'ArrowLeft':
        if (personX - step >= 0) {
          personX -= step;
        }
        break;
      case 'ArrowRight':
        if (personX + step <= mazeWidth - 20) {
          personX += step;
        }
        break;
    }

person.style.left = personX + 'px';
    person.style.top = personY + 'px';

// Check collision with enemy and closet
    checkCollision();
  }

function checkCollision() {
    if (personX === enemyX && personY === enemyY) {
      alert('Game Over! You were caught by the enemy!');
      resetGame();
    }

if (personX === closetX && personY === closetY) {
      alert('Congratulations! You found the closet!');
      resetGame();
    }
  }

function resetGame() {
    personX = Math.floor(Math.random() * (mazeWidth - 20));
    personY = Math.floor(Math.random() * (mazeHeight - 20));

person.style.left = personX + 'px';
    person.style.top = personY + 'px';
  }
</script>
</body>
</html>
```