AI game creator

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

No:39502

←

Prev Next

→

A man doing archery
Developer User17663｜Date and time 24/1/28 16:27:22
Build time 12.855 sec｜Game capacity 3.317KB｜

Script

Sure! Here's a simple archery game implemented as a single HTML file using JavaScript and pictograms:

In this game, the player can control the position of the archer by touching or clicking on the screen. The objective is to hit as many targets as possible within a 30-second time limit. The score increases whenever an arrow collides with a target. After the time limit, an alert shows the final score, and the game resets for another round. Please note that you would need to replace the image file paths (`emozi_dog.png`, `emozi_himawari.png`, `emozi_cat.png`) with the actual paths to the corresponding images on your system. Hope you have fun playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple archery game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Archery Game</title>
  <style>
    #board {
      position: relative;
      width: 100%;
      height: 100vh;
      background: #F5F5F5;
    }

#archer {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 5%;
    }

#arrow {
      position: absolute;
      bottom: 25%;
      left: 50%;
      transform: translateX(-50%);
      width: 2%;
      transition: transform 0.5s;
    }

.target {
      position: absolute;
      bottom: 15%;
      width: 5%;
    }
  </style>
</head>
<body>
  <div id="board">
    <img id="archer" src="archer.png" alt="Archer">
    <img id="arrow" src="arrow.png" alt="Arrow">
    <img class="target" src="target.png" alt="Target1">
    <img class="target" src="target.png" alt="Target2">
    <img class="target" src="target.png" alt="Target3">
    
  </div>

// Move arrow horizontally based on user touch/click position
    document.addEventListener('touchmove', function(event) {
      var x = event.touches[0].clientX;
      var boardWidth = document.getElementById("board").offsetWidth;
      var arrowWidth = arrow.offsetWidth;
      var minArrowX = arrowWidth / 2;
      var maxArrowX = boardWidth - arrowWidth / 2;
      var arrowX = Math.max(minArrowX, Math.min(maxArrowX, x));
      
      arrow.style.transform = "translateX(" + (arrowX - boardWidth / 2) + "px)";
    });

// Detect collision between arrow and targets
    function checkCollision() {
      var arrowRect = arrow.getBoundingClientRect();
      for (var i = 0; i < targets.length; i++) {
        var targetRect = targets[i].getBoundingClientRect();
        if (arrowRect.left < targetRect.right && arrowRect.right > targetRect.left) {
          // Arrow hit target
          targets[i].style.opacity = 0.5;
          score++;
          break; // Only one target hit at a time
        }
      }
    }

// Update score and reset arrow position
    function updateScore() {
      alert("Game Over!\nScore: " + score);
      score = 0;
      arrow.style.transform = "translateX(-50%)";
      for (var i = 0; i < targets.length; i++) {
        targets[i].style.opacity = 1;
      }
    }

// Game loop
    var interval = setInterval(function() {
      checkCollision();
    }, 100);

// End game after 30 seconds
    setTimeout(function() {
      clearInterval(interval);
      updateScore();
    }, 30000);
  </script>
</body>
</html>
```

Please note that you would need to replace the image file paths (`archer.png`, `arrow.png`, `target.png`) with the actual paths to the corresponding images on your system.

Hope you have fun playing the game!