AI game creator

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

No:43024

←

Prev Next

→

Gun shooting game
Developer User19059｜Date and time 24/2/13 23:58:18
Build time 13.628 sec｜Game capacity 3.077KB｜

Script

Sure! Here's an example of a simple gun shooting game implemented as a single HTML file:

Before running the code, make sure to replace "emozi_rabbit.png" and "emozi_apple.png" with the actual paths to the gun and bullet pictogram images you want to use. Once you open the HTML file in a browser on your smartphone, you'll be able to control the gun's position by touching and dragging on the screen. Tap the screen to shoot a bullet. The goal of the game is to hit the falling target with the bullet. If a collision occurs, the target will reset its position, and you can continue playing.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple gun shooting game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Gun Shooting Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="200"></canvas>

var gunX = canvas.width / 2 - gunImg.width / 2;
    var gunY = canvas.height - gunImg.height;
    var bulletX = gunX + gunImg.width / 2 - bulletImg.width / 2;
    var bulletY = gunY;
    var bulletSpeed = 5;
    var bulletVisible = false;
    var targetX = Math.random() * (canvas.width - bulletImg.width);
    var targetY = 0;

// Check for collision between bullet and target
    function checkCollision() {
      if (
        bulletX < targetX + bulletImg.width &&
        bulletX + bulletImg.width > targetX &&
        bulletY < targetY + bulletImg.height &&
        bulletY + bulletImg.height > targetY
      ) {
        // Collision occurred, reset target position
        targetX = Math.random() * (canvas.width - bulletImg.width);
        targetY = 0;
        bulletVisible = false;
      }
    }

// Update game positions
    function update() {
      checkCollision();

if (bulletVisible) {
        bulletY -= bulletSpeed;
      }

// Move the target downwards
      targetY += bulletSpeed;

// Render game objects
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(gunImg, gunX, gunY);
      ctx.drawImage(bulletImg, bulletX, bulletY);
      ctx.fillRect(targetX, targetY, bulletImg.width, bulletImg.height);

requestAnimationFrame(update);
    }

// Handle touch events
    canvas.addEventListener("touchmove", function (e) {
      var touchX = e.touches[0].clientX - canvas.offsetLeft;
      var touchY = e.touches[0].clientY - canvas.offsetTop;

gunX = touchX - gunImg.width / 2;
      bulletX = gunX + gunImg.width / 2 - bulletImg.width / 2;

e.preventDefault();
    });

canvas.addEventListener("touchstart", function (e) {
      if (!bulletVisible) {
        bulletVisible = true;
        bulletX = gunX + gunImg.width / 2 - bulletImg.width / 2;
        bulletY = gunY;
      }

e.preventDefault();
    });

// Start the game
    update();
  </script>
</body>
</html>
```

Before running the code, make sure to replace "gun.png" and "bullet.png" with the actual paths to the gun and bullet pictogram images you want to use.

Once you open the HTML file in a browser on your smartphone, you'll be able to control the gun's position by touching and dragging on the screen. Tap the screen to shoot a bullet. The goal of the game is to hit the falling target with the bullet. If a collision occurs, the target will reset its position, and you can continue playing.