AI game creator

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

No:24364

110

←

Prev Next

→

Cannonball
Developer User9721｜Date and time 23/11/8 2:42:02
Build time 70.868 sec｜Game capacity 3.354KB｜

Script

Here's an example of a simple game called "Cannonball" that you can play on a smartphone using pictograms and implemented as a single HTML file with JavaScript enclosed in script tags:

Score: 0

This game involves controlling a cannon at the bottom using the left and right arrow keys and shooting cannonballs by pressing the spacebar. The objective is to hit the targets (represented by red rectangles) to earn points. The score is displayed at the top. The game continues until all targets are hit.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Here's an example of a simple game called "Cannonball" that you can play on a smartphone using pictograms and implemented as a single HTML file with JavaScript enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cannonball Game</title>
  <style>
    body {
      background-color: #333;
    }

#canvas {
      border: 1px solid #fff;
    }

#score {
      color: #fff;
      font-size: 24px;
      text-align: center;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>
  <div id="score">Score: 0</div>

// Game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw cannon
      ctx.fillStyle = "#fff";
      ctx.fillRect(cannon.x - cannon.width / 2, cannon.y - cannon.height / 2, cannon.width, cannon.height);

// Draw cannonball
      ctx.beginPath();
      ctx.arc(cannonball.x, cannonball.y, cannonball.radius, 0, Math.PI * 2);
      ctx.fillStyle = "#ff0";
      ctx.fill();

// Move cannonball
      cannonball.y -= cannonball.speed;

// Check collision with targets
      for (var i = 0; i < targets.length; i++) {
        var target = targets[i];

if (cannonball.x > target.x && cannonball.x < target.x + target.width &&
            cannonball.y > target.y && cannonball.y < target.y + target.height) {
          targets.splice(i, 1);
          score += 10;
          scoreDisplay.innerText = "Score: " + score;
          break;
        }
      }

// Draw targets
      for (var i = 0; i < targets.length; i++) {
        var target = targets[i];
        ctx.fillStyle = "#f00";
        ctx.fillRect(target.x, target.y, target.width, target.height);
      }

// Request next frame
      requestAnimationFrame(gameLoop);
    }

// Event listeners
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 37 && cannon.x > cannon.width / 2) {
        cannon.x -= 10; // Move cannon to the left when left arrow key is pressed
      } else if (event.keyCode === 39 && cannon.x < canvas.width - cannon.width / 2) {
        cannon.x += 10; // Move cannon to the right when right arrow key is pressed
      } else if (event.keyCode === 32 && cannonball.y === cannon.y) {
        cannonball.x = cannon.x; // Shoot a cannonball when spacebar is pressed
        cannonball.y = cannon.y;
      }
    });

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