Sisters exclusive game. The player is a black dot, by moving up and down, he has a dragon as a pet, this dragon is represented by a red dot, this dragon can also move up and down, left and right, both points rely on the player control, trapped in a room, the door is locked, the key is a yellow dot, get and open the door to pass, you can choose to exit, you can also choose to start again.'s game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Sisters exclusive game. The player is a black dot, by moving up and down, he has a dragon as a pet, this dragon is represented by a red dot, this dragon can also move up and down, left and right, both points rely on the player control, trapped in a room, the door is locked, the key is a yellow dot, get and open the door to pass, you can choose to exit, you can also choose to start again.'s game | AI game creator

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

No:7333

830

←

Prev Next

→

Sisters exclusive game. The player is a black dot,..ALL
Developer User3988｜Date and time 23/7/6 22:40:20
Build time 44.322 sec｜Game capacity 6.314KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.player {
      position: absolute;
      top: 180px;
      left: 180px;
      width: 20px;
      height: 20px;
      background-color: black;
      border-radius: 50%;
    }

.pet {
      position: absolute;
      top: 180px;
      left: 180px;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
    }

.key {
      position: absolute;
      top: 100px;
      left: 300px;
      width: 10px;
      height: 10px;
      background-color: yellow;
      border-radius: 50%;
    }

.door {
      position: absolute;
      top: 160px;
      left: 380px;
      width: 20px;
      height: 80px;
      background-color: brown;
    }
  </style>
</head>
<body>
  <button id="start-button" onclick="startGame()">开始游戏</button>
  <button id="restart-button" onclick="restartGame()" style="display: none;">重新开始</button>
  <button id="quit-button" onclick="quitGame()" style="display: none;">退出游戏</button>
  <div id="game-container">
    <div id="player" class="player"></div>
    <div id="pet" class="pet"></div>
    <div id="key" class="key"></div>
    <div id="door" class="door"></div>
  </div>

document.addEventListener("keydown", movePlayer);
    const gameContainer = document.getElementById("game-container");
    const playerElement = document.getElementById("player");
    const petElement = document.getElementById("pet");
    const keyElement = document.getElementById("key");
    const doorElement = document.getElementById("door");
    const startButton = document.getElementById("start-button");
    const restartButton = document.getElementById("restart-button");
    const quitButton = document.getElementById("quit-button");

function startGame() {
      gameContainer.style.display = "block";
      startButton.style.display = "none";
      restartButton.style.display = "none";
      quitButton.style.display = "none";

playerElement.style.top = playerPosition.y + "px";
      playerElement.style.left = playerPosition.x + "px";
      petElement.style.top = petPosition.y + "px";
      petElement.style.left = petPosition.x + "px";
      keyElement.style.top = keyPosition.y + "px";
      keyElement.style.left = keyPosition.x + "px";

document.addEventListener("keydown", movePlayer);
    }

function restartGame() {
      playerPosition = { x: 180, y: 180 };
      petPosition = { x: 180, y: 180 };
      keyPosition = { x: 300, y: 100 };
      doorLocked = true;

gameContainer.style.display = "block";
      restartButton.style.display = "none";
      quitButton.style.display = "none";

document.addEventListener("keydown", movePlayer);
    }

function quitGame() {
      playerPosition = { x: 180, y: 180 };
      petPosition = { x: 180, y: 180 };
      keyPosition = { x: 300, y: 100 };
      doorLocked = true;

gameContainer.style.display = "none";
      restartButton.style.display = "none";
      quitButton.style.display = "none";
      startButton.style.display = "block";
    }

function movePlayer(event) {
      const keyCode = event.keyCode;

if (keyCode === 37) {
        // Left arrow key
        if (playerPosition.x > 0) {
          playerPosition.x -= 10;
          playerElement.style.left = playerPosition.x + "px";
        }
      } else if (keyCode === 38) {
        // Up arrow key
        if (playerPosition.y > 0) {
          playerPosition.y -= 10;
          playerElement.style.top = playerPosition.y + "px";
        }
      } else if (keyCode === 39) {
        // Right arrow key
        if (playerPosition.x < gameContainer.offsetWidth - playerElement.offsetWidth) {
          playerPosition.x += 10;
          playerElement.style.left = playerPosition.x + "px";
        }
      } else if (keyCode === 40) {
        // Down arrow key
        if (playerPosition.y < gameContainer.offsetHeight - playerElement.offsetHeight) {
          playerPosition.y += 10;
          playerElement.style.top = playerPosition.y + "px";
        }
      }

checkCollision();
    }

function checkCollision() {
      const playerRect = playerElement.getBoundingClientRect();
      const petRect = petElement.getBoundingClientRect();
      const keyRect = keyElement.getBoundingClientRect();
      const doorRect = doorElement.getBoundingClientRect();

if (intersects(playerRect, keyRect)) {
        keyElement.style.display = "none";
        doorLocked = false;
      }

if (intersects(playerRect, doorRect) && !doorLocked) {
        gameOver(true);
      }

if (intersects(playerRect, petRect)) {
        gameOver(false);
      }
    }

function intersects(rect1, rect2) {
      return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
      );
    }

function gameOver(win) {
      if (win) {
        doorElement.style.backgroundColor = "green";
        restartButton.style.display = "block";
        quitButton.style.display = "block";
      } else {
        restartButton.style.display = "block";
        quitButton.style.display = "block";
      }

document.removeEventListener("keydown", movePlayer);
    }
  </script>
</body>
</html>