Shooting game but the blocks have armor's game

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

No:18761

←

Prev Next

→

Shooting game but the blocks have armor
Developer User8295｜Date and time 23/9/30 15:56:07
Build time 23.118 sec｜Game capacity 7.513KB｜

Script

Sure! Here's an example of a shooting game where the blocks have armor. The game is designed for smartphone operation and uses pictograms to represent the gameplay elements.

You can copy the code above and save it in a single HTML file, then open the file in a web browser on your smartphone to play the game. The game consists of a paddle at the bottom of the screen that you can move left or right using the arrow keys or touch gestures. The goal is to destroy the blocks by bouncing a ball off the paddle and hitting the blocks. The blocks have armor points, indicated by different colors, and it takes multiple hits to destroy them. You need to destroy all the blocks to win the game, while avoiding missing the ball with the paddle to prevent losing lives. The score and remaining lives are displayed on the screen as you play.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a shooting game where the blocks have armor. The game is designed for smartphone operation and uses pictograms to represent the gameplay elements.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Armor Blocks Shooter</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

var ballRadius = 10;
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 4;
        var dy = -4;

var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;

var score = 0;
        var lives = 3;

function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

function drawLives() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            drawBlocks();
            drawScore();
            drawLives();
            collisionDetection();

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx; // Reverse the horizontal direction when hitting the side walls
            }
            if (y + dy < ballRadius) {
                dy = -dy; // Reverse the vertical direction when hitting the top wall
            } else if (y + dy > canvas.height - ballRadius) {
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy; // Reverse the vertical direction when hitting the paddle
                } else {
                    lives--; // Lose a life if the ball misses the paddle
                    if (!lives) {
                        alert("Game Over!");
                        document.location.reload();
                    } else {
                        x = canvas.width / 2;
                        y = canvas.height - 30;
                        dx = 4;
                        dy = -4;
                        paddleX = (canvas.width - paddleWidth) / 2;
                    }
                }
            }

if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7; // Move the paddle to the right
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7; // Move the paddle to the left
            }

x += dx; // Update the ball's position
            y += dy; // Update the ball's position

requestAnimationFrame(draw);
        }

function keyDownHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = true;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = true;
            }
        }

function keyUpHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = false;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = false;
            }
        }

document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

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