A game where you are an archer and you have to shoot the zombies that are trying to k○ll toy's game

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

No:11141

←

Prev Next

→

A game where you are an archer and you have to sho..ALL
Developer User4828｜Date and time 23/8/8 2:39:50
Build time 41.094 sec｜Game capacity 4.855KB｜

Script

Sure, here's an example of a simple archery game in HTML using JavaScript. The game will be played on a smartphone and use pictograms for the graphics. The player's goal is to shoot the zombies before they reach the toy. You can copy the code below into a single HTML file and run it on your smartphone's browser.

Score: 0

To customize it for your game, you'll need to replace the image URLs for the archer and zombie pictograms (`emozi_all/game.png` and `emozi_all/pictogram.png`) with your own images. You can also modify the game's logic and styling as needed.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Archer Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
    }

#archer {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 80px;
      background: url('archer_pictogram.png') no-repeat center;
      background-size: contain;
    }

.zombie {
      position: absolute;
      width: 40px;
      height: 80px;
      background: url('zombie_pictogram.png') no-repeat center;
      background-size: contain;
    }

.score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      font-family: Arial, sans-serif;
      color: #333;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="archer"></div>
    <div class="score">Score: 0</div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var gameContainer = document.getElementById('game-container');
      var archer = document.getElementById('archer');
      var scoreDisplay = document.querySelector('.score');

var score = 0;
      var arrows = [];

function createArrow() {
        var arrow = document.createElement('div');
        arrow.className = 'arrow';
        arrow.style.bottom = '90px';
        arrow.style.left = (archer.offsetLeft + 20) + 'px';
        gameContainer.appendChild(arrow);
        arrows.push(arrow);
      }

function moveArrow() {
        arrows.forEach(function(arrow, index) {
          var top = parseInt(arrow.style.bottom);
          arrow.style.bottom = (top + 5) + 'px';

var arrowRect = arrow.getBoundingClientRect();

document.querySelectorAll('.zombie').forEach(function(zombie) {
            var zombieRect = zombie.getBoundingClientRect();
            if (isCollision(arrowRect, zombieRect)) {
              score += 10;
              scoreDisplay.textContent = 'Score: ' + score;
              gameContainer.removeChild(zombie);
              gameContainer.removeChild(arrow);
              arrows.splice(index, 1);
            }
          });

if (top > window.innerHeight) {
            gameContainer.removeChild(arrow);
            arrows.splice(index, 1);
          }
        });

requestAnimationFrame(moveArrow);
      }

function isCollision(rect1, rect2) {
        return rect1.left < rect2.right &&
               rect1.right > rect2.left &&
               rect1.top < rect2.bottom &&
               rect1.bottom > rect2.top;
      }

function createZombie() {
        var zombie = document.createElement('div');
        zombie.className = 'zombie';
        zombie.style.left = (Math.random() * (gameContainer.offsetWidth - 40)) + 'px';
        gameContainer.appendChild(zombie);
      }

function moveZombie() {
        document.querySelectorAll('.zombie').forEach(function(zombie) {
          var top = parseInt(zombie.style.bottom);
          zombie.style.bottom = (top + 3) + 'px';

var zombieRect = zombie.getBoundingClientRect();
          var archerRect = archer.getBoundingClientRect();

if (isCollision(zombieRect, archerRect)) {
            gameOver();
          }

if (top > window.innerHeight) {
            gameContainer.removeChild(zombie);
          }
        });

requestAnimationFrame(moveZombie);
      }

function gameOver() {
        alert('Game Over!');
      }

function handleTouchStart(e) {
        e.preventDefault();
        createArrow();
      }

function handleTouchMove(e) {
        e.preventDefault();
        archer.style.left = (e.touches[0].clientX - (archer.offsetWidth / 2)) + 'px';
      }

function handleTouchEnd(e) {
        e.preventDefault();
      }

gameContainer.addEventListener('touchstart', handleTouchStart, false);
      gameContainer.addEventListener('touchmove', handleTouchMove, false);
      gameContainer.addEventListener('touchend', handleTouchEnd, false);

setInterval(createZombie, 2000);
      requestAnimationFrame(moveArrow);
      requestAnimationFrame(moveZombie);
    });
  </script>
</body>
</html>
```

To customize it for your game, you'll need to replace the image URLs for the archer and zombie pictograms (`archer_pictogram.png` and `zombie_pictogram.png`) with your own images. You can also modify the game's logic and styling as needed.