Shoot the target with solving math's game

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

No:19175

←

Prev Next

→

Shoot the target with solving math
Developer User8438｜Date and time 23/10/1 23:21:19
Build time 12.835 sec｜Game capacity 2.962KB｜

Script

Sure, here's an example of a simple math shooting game implemented as a single HTML file with JavaScript:

In this game, your goal is to shoot the target by clicking on the canvas. The target will have a random math problem inside. If you hit the target with the correct answer, you earn points. The score is displayed on the top left corner of the canvas. The game will continue until you close the browser tab. Note: This is a basic example and can be further enhanced with more features and graphics.

←

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 math shooting game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>
  
  <script>
    // Game logic
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var score = 0;

var target = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      radius: 20,
      hit: false,
      value: 0
    };

var bullet = {
      x: canvas.width / 2,
      y: canvas.height - 10,
      radius: 5,
      speed: 8,
      fired: false
    };

function updateScore() {
      context.font = "16px Arial";
      context.fillStyle = "black";
      context.fillText("Score: " + score, 8, 20);
    }

function updateTarget() {
      if (!target.hit) {
        context.beginPath();
        context.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
        context.fillStyle = "red";
        context.fill();
        context.closePath();
        context.fillStyle = "white";
        context.font = "18px Arial";
        context.fillText(target.value, target.x - 8, target.y + 6);
      }
    }

function updateBullet() {
      if (bullet.fired) {
        context.beginPath();
        context.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
        context.fillStyle = "blue";
        context.fill();
        context.closePath();
        bullet.y -= bullet.speed;

// Check collision
        var dx = bullet.x - target.x;
        var dy = bullet.y - target.y;
        var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < target.radius + bullet.radius && !target.hit) {
          target.hit = true;
          score += target.value;
          bullet.fired = false;
        }

if (bullet.y < 0) {
          bullet.fired = false;
        }
      }
    }

function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      updateScore();
      updateTarget();
      updateBullet();
      requestAnimationFrame(updateGame);
    }

function shootBullet() {
      if (!bullet.fired) {
        bullet.x = canvas.width / 2;
        bullet.y = canvas.height - 10;
        bullet.fired = true;
      }
    }

// Event listeners for shooting with different math problems
    canvas.addEventListener("click", shootBullet);

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

Note: This is a basic example and can be further enhanced with more features and graphics.