Shooting box with control and level 1-10's game

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

No:18728

←

Prev Next

→

Shooting box with control and level 1-10
Developer User8249｜Date and time 23/9/30 14:44:08
Build time 17.886 sec｜Game capacity 5.492KB｜

Script

Sure! Below is a simple implementation of a shooting game with controls and 10 levels using JavaScript, HTML, and pictograms. Just save the code in a single HTML file and open it in a web browser to play.

This code creates a shooting game where you control a player box using touch or mouse click to shoot bullets and destroy green enemy boxes. The game has 10 levels, and the goal is to score as many points as possible without colliding with the enemy boxes. The score and level are displayed on the screen.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Box Game</title>
  <script>
    // Game Variables
    var canvas, ctx, player, bullets, targets, score, level;

// Create the player object
    function createPlayer() {
      return {
        x: 50,
        y: 200,
        width: 50,
        height: 50,
        color: "blue",
        draw: function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
        },
        shoot: function() {
          bullets.push(new Bullet(this.x + this.width, this.y + this.height / 2));
        }
      };
    }

// Create the bullet object
    function Bullet(x, y) {
      this.x = x;
      this.y = y;
      this.width = 10;
      this.height = 5;
      this.speed = 5;
      this.color = "red";
      this.move = function() {
        this.x += this.speed;
      };
      this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };
    }

// Create the target object
    function Target(x, y, speed) {
      this.x = x;
      this.y = y;
      this.width = 30;
      this.height = 30;
      this.speed = speed;
      this.color = "green";
      this.move = function() {
        this.x -= this.speed;
      };
      this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };
    }

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

player = createPlayer();
      bullets = [];
      targets = [];
      score = 0;
      level = 1;

// Create initial targets
      for (var i = 0; i < level + 2; i++) {
        var targetY = Math.floor(Math.random() * canvas.height);
        var targetSpeed = Math.floor(Math.random() * (level + 1)) + 1;
        targets.push(new Target(canvas.width, targetY, targetSpeed));
      }

// Add control event listeners
      canvas.addEventListener("click", function() {
        player.shoot();
      });

canvas.addEventListener("touchstart", function() {
        event.preventDefault();
        player.shoot();
      });

document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) {
          event.preventDefault();
          player.shoot();
        }
      });

// Start the game loop
      gameLoop();
    }

// Game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move and draw the player
      player.draw();

// Move and draw the bullets
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].move();
        bullets[i].draw();

// Check bullet collision with targets
        for (var j = 0; j < targets.length; j++) {
          if (
            bullets[i].x < targets[j].x + targets[j].width &&
            bullets[i].x + bullets[i].width > targets[j].x &&
            bullets[i].y < targets[j].y + targets[j].height &&
            bullets[i].y + bullets[i].height > targets[j].y
          ) {
            targets.splice(j, 1); // Remove the target
            bullets.splice(i, 1); // Remove the bullet
            score++; // Increase the score
            if (score % 5 === 0) levelUp(); // Level up every 5 points
            break;
          }
        }
      }

// Move and draw the targets
      for (var i = 0; i < targets.length; i++) {
        targets[i].move();
        targets[i].draw();

// Check target collision with player
        if (
          player.x < targets[i].x + targets[i].width &&
          player.x + player.width > targets[i].x &&
          player.y < targets[i].y + targets[i].height &&
          player.y + player.height > targets[i].y
        ) {
          gameOver();
          return;
        }
      }

// Display the score and level
      ctx.font = "18px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 20);
      ctx.fillText("Level: " + level, 10, 40);

// Request the next frame
      requestAnimationFrame(gameLoop);
    }

// Function to level up the game
    function levelUp() {
      level++;
      for (var i = 0; i < level + 2; i++) {
        var targetY = Math.floor(Math.random() * canvas.height);
        var targetSpeed = Math.floor(Math.random() * (level + 1)) + 1;
        targets.push(new Target(canvas.width, targetY, targetSpeed));
      }
    }

// Function to end the game
    function gameOver() {
      ctx.font = "40px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, canvas.width / 2 - 50, canvas.height / 2 + 30);
    }
  </script>
</head>
<body onload="startGame()">
  <canvas id="gameCanvas" width="500" height="400"></canvas>
</body>
</html>
```