AI game creator

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

No:36788

←

Prev Next

→

Cannon fodder
Developer User16865｜Date and time 24/1/18 11:05:27
Build time 17.136 sec｜Game capacity 4.305KB｜

Script

Sure! Here's a simple game implementation using JavaScript and enclosed within script tags in a single HTML file. The game is called "Cannon Fodder" and can be played on a smartphone:

The game displays a cannon at the bottom of the canvas, and targets randomly positioned at the top. The player can move the cannon left or right by touching the screen, and when they touch the top part of the screen, a bullet is fired from the cannon towards the targets. If a bullet hits a target, the target is marked as destroyed and the player's score increases. The score is displayed at the top left corner of the canvas. The game runs in an infinite loop, clearing the canvas and updating the game state every 20 milliseconds. Note: The game graphics are simple rectangles drawn on a canvas, as pictograms are not readily available. Feel free to customize the game further to meet your specific requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game implementation using JavaScript and enclosed within script tags in a single HTML file. The game is called "Cannon Fodder" and can be played on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cannon Fodder</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

// Initialize cannon
      cannon = {
        x: canvas.width / 2 - 20,
        y: canvas.height - 50,
        width: 40,
        height: 40
      };

// Initialize targets
      targets = [];
      for (let i = 0; i < 5; i++) {
        targets.push({
          x: Math.random() * (canvas.width - 40),
          y: Math.random() * 200 + 50,
          width: 40,
          height: 40,
          destroyed: false
        });
      }

// Initialize bullets
      bullets = [];
      
      // Initialize score
      score = 0;

// Add event listeners for touch events
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchend", handleTouchEnd, false);

// Start game loop
      setInterval(update, 20);
    }

// Update game state
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw cannon
      ctx.beginPath();
      ctx.rect(cannon.x, cannon.y, cannon.width, cannon.height);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();

// Draw targets
      targets.forEach(target => {
        if (!target.destroyed) {
          ctx.beginPath();
          ctx.rect(target.x, target.y, target.width, target.height);
          ctx.fillStyle = "red";
          ctx.fill();
          ctx.closePath();
        }
      });

// Draw bullets
      bullets.forEach(bullet => {
        ctx.beginPath();
        ctx.rect(bullet.x, bullet.y, bullet.width, bullet.height);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      });

// Move and check collision
      bullets.forEach(bullet => {
        bullet.y -= 3;
        targets.forEach(target => {
          if (!target.destroyed) {
            if (
              bullet.x > target.x &&
              bullet.x < target.x + target.width &&
              bullet.y > target.y &&
              bullet.y < target.y + target.height
            ) {
              target.destroyed = true;
              bullet.y = -10; // Move bullet off-screen
              score++;
            }
          }
        });
      });

// Draw score
      ctx.font = "24px Arial";
      ctx.fillStyle = "white";
      ctx.fillText("Score: " + score, 10, 30);
    }

// Handle touch events
    function handleTouchStart(e) {
      e.preventDefault();
      let touchX = e.touches[0].clientX;

if (touchX >= canvas.width / 2) {
        // Move cannon right
        cannon.x += 10;
      } else {
        // Move cannon left
        cannon.x -= 10;
      }
    }

function handleTouchEnd(e) {
      e.preventDefault();
      let touchX = e.changedTouches[0].clientX;
      let touchY = e.changedTouches[0].clientY;

if (touchY <= 150) {
        // Shoot bullet
        bullets.push({
          x: cannon.x + cannon.width / 2 - 2,
          y: cannon.y,
          width: 4,
          height: 10
        });
      }
    }

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

Note: The game graphics are simple rectangles drawn on a canvas, as pictograms are not readily available. Feel free to customize the game further to meet your specific requirements.