Custom tank game where i can design it as i want 3 muzzle angle shield's game

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

No:43117

←

Prev Next

→

Custom tank game where i can design it as i want 3..ALL
Developer User19096｜Date and time 24/2/14 9:50:01
Build time 8.328 sec｜Game capacity 2.688KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tank Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script>
        // Retrieving the canvas element
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

var tank = {
            x: 50,            // initial x position of the tank
            y: 450,           // initial y position of the tank
            angle: 0,         // initial muzzle angle of the tank
            shield: false     // initial shield status of tank (false - no shield, true - shield activated)
        };

function drawTank() {
            // Clearing the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Drawing the tank body
            ctx.fillStyle = "#000";
            ctx.fillRect(tank.x - 20, tank.y - 20, 40, 40);

// Drawing the tank muzzle
            ctx.fillStyle = "#FF0000";
            ctx.beginPath();
            ctx.arc(tank.x, tank.y, 20, (Math.PI / 180) * (tank.angle - 5), (Math.PI / 180) * (tank.angle + 5));
            ctx.lineTo(tank.x, tank.y);
            ctx.closePath();
            ctx.fill();
            
            // Drawing the shield if activated
            if (tank.shield) {
                ctx.strokeStyle = "#0000FF";
                ctx.beginPath();
                ctx.arc(tank.x, tank.y, 30, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.stroke();
            }
        }

function rotateMuzzle(direction) {
            if (direction === "left") {
                tank.angle -= 5;  // rotate the muzzle to the left by 5 degrees
            } else if (direction === "right") {
                tank.angle += 5;  // rotate the muzzle to the right by 5 degrees
            }
        }

function toggleShield() {
            tank.shield = !tank.shield;  // toggle the shield status of the tank
        }

// Listening to keydown events to control the tank
        document.addEventListener("keydown", handleKeyDown);

// Starting the game
        setInterval(drawTank, 10);
    </script>
</body>
</html>