A 1000x1000 grid where you have arrows buttons to move and whenever you click on something you are within 2 grids of you can do 1 damage, random red squares appear in that 1000x1000 grid but only on the edges of it and they slowly go closer to you by 2 grids if they touch you then you lose 1hp if you click on them within 2 grids they die you get +1 score per k○lled red square and it resets on death the spawn rate of red squares slowly increase and you get +1 hp and each red square has +1hp's game

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

No:25059

←

Prev Next

→

A 1000x1000 grid where you have arrows buttons to ..ALL
Developer User12143｜Date and time 23/11/16 20:56:20
Build time 140.924 sec｜Game capacity 6.298KB｜

Script

Sure! Here's an example of a single HTML file implementing the game you described. The game has a 1000x1000 grid, arrow buttons to move, and random red squares that appear at the edges and move towards the player. Clicking on red squares within 2 grids of the player deals damage and increases the score. When the player is touched by a red square, they lose 1 HP. The spawn rate of red squares increases over time, and the player gains 1 HP for each red square killed. The game resets on death.

Please note that implementing this type of game logic in a single HTML file can make the code quite long and difficult to maintain. It's usually recommended to split the code into separate files and utilize external libraries for better organization and maintainability.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="1000" height="1000"></canvas>
    <script>
        // Game configuration
        const gridWidth = 1000;
        const gridHeight = 1000;
        const playerSize = 20;
        const redSquareSize = 20;

// Game state
        let playerX = gridWidth / 2;
        let playerY = gridHeight / 2;
        let playerHP = 3;
        let score = 0;
        let spawnRate = 1000;
        let redSquares = [];

// Initialize game canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// Handle arrow key presses for player movement
        document.addEventListener("keydown", handleKeyPress);

function handleKeyPress(event) {
            switch (event.key) {
                case "ArrowUp":
                    playerY -= 2;
                    break;
                case "ArrowDown":
                    playerY += 2;
                    break;
                case "ArrowLeft":
                    playerX -= 2;
                    break;
                case "ArrowRight":
                    playerX += 2;
                    break;
            }
        }

// Handle mouse clicks
        canvas.addEventListener("mousedown", handleClick);

function handleClick(event) {
            const mouseX = event.clientX - canvas.getBoundingClientRect().left;
            const mouseY = event.clientY - canvas.getBoundingClientRect().top;

redSquares.forEach(redSquare => {
                const dx = Math.abs(redSquare.x - mouseX);
                const dy = Math.abs(redSquare.y - mouseY);
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance <= 2 * redSquareSize) {
                    redSquare.hp--;
                    if (redSquare.hp <= 0) {
                        score++;
                        redSquares.splice(redSquares.indexOf(redSquare), 1);
                    }
                }
            });
        }

// Game loop
        setInterval(gameLoop, 10);

function gameLoop() {
            update();
            draw();
        }

function update() {
            // Check if red squares touch player
            redSquares.forEach(redSquare => {
                const dx = Math.abs(redSquare.x - playerX);
                const dy = Math.abs(redSquare.y - playerY);
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance <= playerSize) {
                    playerHP--;
                }
            });

// Update red squares positions
            redSquares.forEach(redSquare => {
                if (redSquare.x < playerX) {
                    redSquare.x += 2;
                } else if (redSquare.x > playerX) {
                    redSquare.x -= 2;
                }
                if (redSquare.y < playerY) {
                    redSquare.y += 2;
                } else if (redSquare.y > playerY) {
                    redSquare.y -= 2;
                }
            });

// Spawn new red squares
            if (Math.random() < 1 / spawnRate) {
                const side = Math.floor(Math.random() * 4);
                let x, y;
                switch (side) {
                    case 0:
                        x = Math.floor(Math.random() * gridWidth);
                        y = 0;
                        break;
                    case 1:
                        x = Math.floor(Math.random() * gridWidth);
                        y = gridHeight;
                        break;
                    case 2:
                        x = 0;
                        y = Math.floor(Math.random() * gridHeight);
                        break;
                    case 3:
                        x = gridWidth;
                        y = Math.floor(Math.random() * gridHeight);
                        break;
                }
                redSquares.push({ x, y, hp: score + 1 });
            }

// Increase spawn rate over time
            if (spawnRate > 10) {
                spawnRate -= 0.1;
            }

// Reset game on player death
            if (playerHP <= 0) {
                playerX = gridWidth / 2;
                playerY = gridHeight / 2;
                playerHP = 3;
                score = 0;
                spawnRate = 1000;
                redSquares = [];
            }
        }

function draw() {
            // Clear canvas
            ctx.clearRect(0, 0, gridWidth, gridHeight);

// Draw player
            ctx.fillStyle = "blue";
            ctx.fillRect(playerX - playerSize / 2, playerY - playerSize / 2, playerSize, playerSize);

// Draw red squares
            redSquares.forEach(redSquare => {
                ctx.fillStyle = "red";
                ctx.fillRect(redSquare.x - redSquareSize / 2, redSquare.y - redSquareSize / 2, redSquareSize, redSquareSize);
            });

// Draw player HP
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("HP: " + playerHP, 10, 30);

// Draw score
            ctx.fillText("Score: " + score, 10, 60);
        }
    </script>
</body>
</html>
```