Dino emoji click to move dodging pizzas while collecting money's game

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

No:13388

←

Prev Next

→

Dino emoji click to move dodging pizzas while coll..ALL
Developer User5868｜Date and time 23/8/28 4:09:59
Build time 15.139 sec｜Game capacity 3.674KB｜

Script

Sure! Here's an example of a simple game where you can control a dino emoji using clicks on a smartphone screen. The goal is to dodge pizzas while collecting money symbols. This game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. To play the game, simply copy the code below and save it as an HTML file:

🦖 🍕 🍕 💰

In this game, you control the dino emoji by clicking on the game area. The dino will move towards the clicked position, trying to dodge pizzas (represented by 🍕) and collect money symbols (represented by 💰). Each time the dino collects a money symbol, your score increases. But if the dino collides with a pizza, the game is over and your score is shown in an alert dialog. You can restart the game by simply refreshing the page.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Dino Game</title>
  <style>
    #game-area {
      position: relative;
      height: 400px;
      border: 1px solid black;
      overflow: hidden;
    }
    .emoji {
      position: absolute;
      font-size: 40px;
    }
    #dino {
      top: 50%;
      left: 50px;
    }
    .pizza, .money {
      top: 50%;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <span id="dino" class="emoji">🦖</span>
    <span id="pizza1" class="emoji pizza">🍕</span>
    <span id="pizza2" class="emoji pizza">🍕</span>
    <span id="money" class="emoji money">💰</span>
  </div>
  
  <script>
    // Initial position of the dino
    let dinoX = 50;
    let dinoY = 50;
    let score = 0;
    
    // Handle dino movement on click
    document.getElementById("game-area").addEventListener("click", function(event) {
      const deltaX = event.pageX - dinoX;
      const deltaY = event.pageY - dinoY;
      const angle = Math.atan2(deltaY, deltaX);
      const speed = 5;
      const newX = dinoX + Math.cos(angle) * speed;
      const newY = dinoY + Math.sin(angle) * speed;
      
      // Restrict movement within game area
      if (newX >= 0 && newX <= 350 && newY >= 0 && newY <= 350) {
        dinoX = newX;
        dinoY = newY;
        document.getElementById("dino").style.left = dinoX + "px";
        document.getElementById("dino").style.top = dinoY + "px";
      }
    });
    
    // Check collision with pizzas and money
    setInterval(function() {
      const dino = document.getElementById("dino");
      const pizzas = document.querySelectorAll(".pizza");
      const money = document.getElementById("money");
      
      // Check collision with pizzas
      pizzas.forEach(function(pizza) {
        if (isColliding(dino, pizza)) {
          gameOver();
        }
      });
      
      // Check collision with money
      if (isColliding(dino, money)) {
        score++;
        document.getElementById("score").innerText = "Score: " + score;
        money.style.display = "none";
        money.style.left = Math.floor(Math.random() * 350) + "px";
        money.style.top = Math.floor(Math.random() * 350) + "px";
        money.style.display = "block";
      }
      
    }, 100);
    
    // Function to check collision between two elements
    function isColliding(element1, element2) {
      const rect1 = element1.getBoundingClientRect();
      const rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.right < rect2.left ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right
      );
    }
    
    // Game over function
    function gameOver() {
      alert("Game over! Your score is " + score);
      score = 0;
      document.getElementById("score").innerText = "Score: " + score;
    }
  </script>
</body>
</html>
```