Make a playable cat player that moves around a city trying to find gold bars there will be 5 when you find all 5 a text on your screen will “you win” but you can move around the city by going off screen to take you to other parts of the city's game

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

No:21406

←

Prev Next

→

Make a playable cat player that moves around a cit..ALL
Developer User9808｜Date and time 23/10/15 8:15:57
Build time 106.348 sec｜Game capacity 3.529KB｜

Script

Sure! Here's an example of a playable game implemented as a single HTML file using JavaScript. The game features a cat player that moves around a city trying to find gold bars. When the player finds all five gold bars, a message saying "You win!" will be displayed on the screen. To simulate smartphone operation, the game uses arrow buttons for movement. I've used pictograms to represent the cat player and gold bars.

🐱

💰

You win!

You can save the above code in a file with an HTML extension (e.g., `game.html`) and open it in a web browser to play the game. The game will start automatically, and you can move the cat player around the city by using the arrow buttons on your keyboard. When you find all five gold bars, the message "You win!" will be displayed on the screen. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>City Adventure Game</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    #player {
      position: absolute;
      top: 180px;
      left: 180px;
      font-size: 50px;
    }
    .bar {
      position: absolute;
      font-size: 50px;
      visibility: visible;
    }
    #bar1 {
      top: 100px;
      left: 50px;
    }
    #bar2 {
      top: 200px;
      left: 300px;
    }
    #bar3 {
      top: 300px;
      left: 100px;
    }
    #bar4 {
      top: 50px;
      left: 250px;
    }
    #bar5 {
      top: 350px;
      left: 350px;
    }
    #message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      visibility: hidden;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player">🐱</div>
    <div id="bar1" class="bar">💰</div>
    <div id="bar2" class="bar">💰</div>
    <div id="bar3" class="bar">💰</div>
    <div id="bar4" class="bar">💰</div>
    <div id="bar5" class="bar">💰</div>
    <div id="message">You win!</div>
  </div>
  <script>
    var player = document.getElementById("player");
    var bars = document.getElementsByClassName("bar");
    var message = document.getElementById("message");
    var numBars = bars.length;
    var foundBars = 0;

document.addEventListener("keydown", function(event) {
      var key = event.key;
      var top = parseInt(player.style.top) || 0;
      var left = parseInt(player.style.left) || 0;
      var step = 20;

if (key === "ArrowUp") {
        player.style.top = Math.max(top - step, 0) + "px";
      } else if (key === "ArrowDown") {
        player.style.top = Math.min(top + step, 380) + "px";
      } else if (key === "ArrowLeft") {
        player.style.left = Math.max(left - step, 0) + "px";
      } else if (key === "ArrowRight") {
        player.style.left = Math.min(left + step, 380) + "px";
      }

// Check if player found a gold bar
      for (var i = 0; i < numBars; i++) {
        if (isOverlap(player, bars[i])) {
          bars[i].style.visibility = "hidden";
          foundBars++;
          if (foundBars === numBars) {
            message.style.visibility = "visible";
          }
        }
      }
    });

function isOverlap(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();

return (
        rect1.x + rect1.width > rect2.x &&
        rect1.x < rect2.x + rect2.width &&
        rect1.y + rect1.height > rect2.y &&
        rect1.y < rect2.y + rect2.height
      );
    }
  </script>
</body>
</html>
```