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

No:28222

Powerpuff girls racing: three powerpuff girls raci..ALL
Developer User13970｜Date and time 23/12/11 8:52:31
Build time 25.881 sec｜Game capacity 3.932KB｜

Script

Sure! Here's a simple implementation of the Powerpuff Girls Racing game using JavaScript and pictograms, all within a single HTML file:

Powerpuff Girls Racing

This code creates a simple game where the powerpuff girls race their bicycles while avoiding obstacles. The game uses device orientation to move the powerpuff girls across the screen, and the obstacles are randomly positioned on the horizontal axis. If any powerpuff girl collides with an obstacle, the game ends. To run the game, save the code in a `.html` file, along with two image files named `emozi_all/game.png` and `emozi_all/girl.png` in the same directory. Then, open the HTML file in a smartphone's web browser and click the "Start Game" button to begin playing.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Powerpuff Girls Racing game using JavaScript and pictograms, all within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Powerpuff Girls Racing</title>
  <style>
    /* Add some styles to make it visually appealing */
    body {
      text-align: center;
      background-color: #f0f0f0;
    }
    .game-container {
      margin-top: 100px;
    }
    .obstacle {
      width: 150px;
      height: 150px;
      display: inline-block;
      margin: 20px;
      background-image: url('obstacle.png');
      background-size: contain;
    }
    .powerpuff-girl {
      width: 150px;
      height: 150px;
      display: inline-block;
      margin: 20px;
      background-image: url('powerpuff-girl.png');
      background-size: contain;
    }
    #start-game {
      margin-top: 20px;
      background-color: #f44336;
      color: white;
      font-size: 20px;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Powerpuff Girls Racing</h1>
  <div class="game-container">
    <div class="obstacle"></div>
    <div class="powerpuff-girl"></div>
    <div class="obstacle"></div>
    <div class="powerpuff-girl"></div>
    <div class="obstacle"></div>
    <div class="powerpuff-girl"></div>
  </div>
  <button id="start-game">Start Game</button>

// Move obstacles randomly every second
      function moveObstacles() {
        for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].style.marginLeft = Math.floor(Math.random() * 500) + 'px';
        }
      }

// Move powerpuff girls along with device orientation
      function handleOrientation(event) {
        var x = event.beta;  // Range: -180 to 180
        var maxX = window.innerWidth - 150;  // Container width - Powerpuff girl width

for (var i = 0; i < powerpuffGirls.length; i++) {
          var xPos = (x / 180) * maxX;
          powerpuffGirls[i].style.marginLeft = xPos + 'px';
        }
      }

// Start the game
      document.getElementById('start-game').style.display = 'none';
      interval = setInterval(moveObstacles, 1000);
      window.addEventListener("deviceorientation", handleOrientation, true);

// Stop the game if powerpuff girls hit any obstacle
      function stopGame() {
        clearInterval(interval);
        window.removeEventListener("deviceorientation", handleOrientation, true);
        alert("Game Over!");
      }

// Check collision with obstacles
      setInterval(function() {
        for (var i = 0; i < obstacles.length; i++) {
          var obstacleRect = obstacles[i].getBoundingClientRect();
          var powerpuffGirlRect = powerpuffGirls[i].getBoundingClientRect();

if (
            powerpuffGirlRect.left < obstacleRect.right &&
            powerpuffGirlRect.right > obstacleRect.left &&
            powerpuffGirlRect.top < obstacleRect.bottom &&
            powerpuffGirlRect.bottom > obstacleRect.top
          ) {
            stopGame();
          } 
        }
      }, 100);
    }
  </script>
</body>
</html>
```

To run the game, save the code in a `.html` file, along with two image files named `obstacle.png` and `powerpuff-girl.png` in the same directory. Then, open the HTML file in a smartphone's web browser and click the "Start Game" button to begin playing.