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

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

No:7333

532

←

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>