AI game creator

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

No:37143

←

Prev Next

→

phone that works
Developer User17003｜Date and time 24/1/20 13:44:08
Build time 11.312 sec｜Game capacity 4.032KB｜

Script

Sure, I can help you create a simple game that can be played on a smartphone using only a single HTML file with JavaScript enclosed in script tags. Below is an example of a game where the goal is to catch falling objects using a basket:

Score: 0

This code will create a simple object-catching game on a smartphone. The player controls a basket at the bottom of the screen and tries to catch falling objects. The score increments whenever an object is caught by the basket. The game uses pictograms as background images for both the basket and the falling objects. You can replace `emozi_all/game.png` and `emozi_chicken.png` with your own pictograms named accordingly. Note: Ensure you have the pictograms (`emozi_all/basket.png` and `emozi_dog.png`) in the same directory as the HTML file for them to display correctly.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Object Catching Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    #basket {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      background-image: url('basket.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .object {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      background-image: url('object.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    #score {
      width: 100%;
      position: fixed;
      top: 10px;
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="basket"></div>
    <div id="score">Score: <span id="score-value">0</span></div>
  </div>

// Variables
    let score = 0;

// Event listeners
    document.addEventListener("DOMContentLoaded", startGame);

// Functions
    function startGame() {
      setInterval(spawnObject, objectSpawnInterval);
      document.addEventListener("mousemove", moveBasket);
    }

function spawnObject() {
      const object = document.createElement("div");
      object.className = "object";
      const leftPosition = getRandomInt(0, window.innerWidth - 50);
      object.style.left = leftPosition + "px";

const gameContainer = document.getElementById("game-container");
      gameContainer.appendChild(object);

animateObject(object);
    }

function animateObject(object) {
      let topPosition = 0;
      const gameContainer = document.getElementById("game-container");

const animationInterval = setInterval(() => {
        topPosition += fallSpeed;
        object.style.top = topPosition + "px";

if (topPosition >= window.innerHeight - 60) {
          if (isBasketCatch(object)) {
            score++;
            document.getElementById("score-value").textContent = score;
          }

object.remove();
          clearInterval(animationInterval);
        }
      }, 10);
    }

function isBasketCatch(object) {
      const basket = document.getElementById("basket");
      const objectRect = object.getBoundingClientRect();
      const basketRect = basket.getBoundingClientRect();

return (
        objectRect.left >= basketRect.left &&
        objectRect.right <= basketRect.right &&
        objectRect.bottom <= basketRect.bottom
      );
    }

function moveBasket(e) {
      const basket = document.getElementById("basket");
      const xPosition = e.clientX;
      const gameContainer = document.getElementById("game-container");

if (xPosition >= 25 && xPosition <= gameContainer.offsetWidth - 25) {
        basket.style.left = xPosition + "px";
      }
    }

function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>
</body>
</html>
```

The game uses pictograms as background images for both the basket and the falling objects. You can replace `basket.png` and `object.png` with your own pictograms named accordingly.

Note: Ensure you have the pictograms (`basket.png` and `object.png`) in the same directory as the HTML file for them to display correctly.