Make a paintball shooting game's game

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

No:12722

133

←

Prev Next

→

Make a paintball shooting game
Developer User4587｜Date and time 23/8/22 11:29:18
Build time 23.894 sec｜Game capacity 4.247KB｜

Script

Sure! Here is a simple paintball shooting game implemented in a single HTML file:

To play the game, open a web browser and save the above code into a file with a `.html` extension. Then, open the saved HTML file in the browser. You will see a canvas where you can control a blue player rectangle using the left and right arrow keys on your smartphone's keyboard. Press the spacebar to shoot red paintballs and try to hit the green target rectangles moving downwards. Each successful hit will increase your score. The game ends when the target rectangles pass the bottom of the canvas. Note: This implementation assumes that the smartphone's browser supports HTML5 Canvas and JavaScript.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here is a simple paintball shooting game implemented in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Paintball Shooting Game</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Player position
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 50;
        let playerSize = 20;

// Paintball position
        let paintballX = playerX;
        let paintballY = playerY;
        let paintballRadius = 5;
        let paintballSpeed = 5;

// Target position
        let targetX = Math.random() * (canvas.width - 50) + 25;
        let targetY = 30;
        let targetSize = 20;

// Game state
        let score = 0;
        let gameOver = false;

function drawPlayer() {
            ctx.beginPath();
            ctx.rect(playerX - playerSize/2, playerY - playerSize/2, playerSize, playerSize);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

function drawPaintball() {
            ctx.beginPath();
            ctx.arc(paintballX, paintballY, paintballRadius, 0, Math.PI*2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }

function drawTarget() {
            ctx.beginPath();
            ctx.rect(targetX - targetSize/2, targetY - targetSize/2, targetSize, targetSize);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.closePath();
        }

function drawScore() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 10, 30);
        }

function collisionDetection() {
            let distance = Math.sqrt(Math.pow(paintballX - targetX, 2) + Math.pow(paintballY - targetY, 2));
            if (distance < paintballRadius + targetSize/2) {
                score++;
                targetX = Math.random() * (canvas.width - 50) + 25;
                targetY = 30;
            }
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver) {
                drawPlayer();
                drawPaintball();
                drawTarget();
                drawScore();
                collisionDetection();

// Update paintball position
                paintballY -= paintballSpeed;
                if (paintballY < 0) {
                    paintballX = playerX;
                    paintballY = playerY;
                }

// Move target downwards
                targetY += Math.random() * 3;

requestAnimationFrame(draw);
            } else {
                ctx.font = "30px Arial";
                ctx.fillStyle = "black";
                ctx.fillText("Game Over", canvas.width/2 - 80, canvas.height/2);
            }
        }

draw();
    </script>
</body>
</html>
```

Note: This implementation assumes that the smartphone's browser supports HTML5 Canvas and JavaScript.