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

No:12938

156

←

Prev Next

→

A Cube Tower Defense
Developer User5637｜Date and time 23/8/25 6:50:18
Build time 21.685 sec｜Game capacity 2.922KB｜

Script

Cube Tower Defense

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <title>Cube Tower Defense</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

canvas {
            border: 1px solid black;
        }

#score {
            font-size: 24px;
        }

button {
            padding: 10px;
            font-size: 18px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>Cube Tower Defense</h1>
    <h3 id="score">Score: 0</h3>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <br>
    <button onclick="startGame()">Start Game</button>

// Cube Class
        class Cube {
            constructor(x, y, size) {
                this.x = x;
                this.y = y;
                this.size = size;
            }

draw() {
                context.fillStyle = "blue";
                context.fillRect(this.x, this.y, this.size, this.size);
            }
        }

// Initialize Game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            cubes = [];
            score = 0;

// Add event listener for mouse clicks
            canvas.addEventListener("click", onMouseClick);

// Create initial cubes
            for (let i = 0; i < 5; i++) {
                let size = Math.floor(Math.random() * 40) + 30;
                let x = Math.random() * (canvas.width - size);
                let y = Math.random() * (canvas.height - size);
                cubes.push(new Cube(x, y, size));
            }

// Start game loop
            setInterval(updateGame, 20);
        }

// Update Game (Game Loop)
        function updateGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw cubes
            for (let i = 0; i < cubes.length; i++) {
                cubes[i].draw();
            }

// Update score
            document.getElementById("score").textContent = "Score: " + score;
        }

// Mouse click event handler
        function onMouseClick(event) {
            let rect = canvas.getBoundingClientRect();
            let mouseX = event.clientX - rect.left;
            let mouseY = event.clientY - rect.top;

// Check if clicked on any cube
            for (let i = 0; i < cubes.length; i++) {
                let cube = cubes[i];
                if (mouseX >= cube.x && mouseX <= cube.x + cube.size && mouseY >= cube.y && mouseY <= cube.y + cube.size) {
                    // Remove cube and increase score
                    cubes.splice(i, 1);
                    score += 10;
                    break;
                }
            }
        }
    </script>
</body>

</html>