Princess knight fleeing from a large number of goblins 🧟‍♀️ writhing on the canvas👸.'s game

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

No:6833

←

Prev Next

→

Princess knight fleeing from a large number of gob..ALL
Developer User3932｜Date and time 23/7/3 23:08:48
Build time 38.861 sec｜Game capacity 3.37KB｜

Script

了解しました。以下にゲームの実装例を示します。

この実装は、キーボードで操作することで姫騎士を移動させ、ゴブリンとの衝突を避けるゲームです。ゴブリンは画面内をランダムに移動します。ゴブリンに衝突するとゲームオーバーとなり、再度プレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ゴブリンから逃げるゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
            x: 200,
            y: 200,
            size: 20,
            speed: 5
        };

const goblins = [];
        const maxGoblins = 10;

function getRandomPosition() {
            return Math.floor(Math.random() * (canvas.width - player.size));
        }

function createGoblin() {
            if (goblins.length < maxGoblins) {
                const goblin = {
                    x: getRandomPosition(),
                    y: getRandomPosition(),
                    size: 20,
                    speed: Math.random() * 2 + 1
                };
                goblins.push(goblin);
            }
        }

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

ctx.fillStyle = "#ff0000"; // ゴブリンの色
            for (const goblin of goblins) {
                ctx.fillRect(goblin.x, goblin.y, goblin.size, goblin.size);
                goblin.x += goblin.speed;
                goblin.y += goblin.speed;

if (goblin.x < 0 || goblin.x > canvas.width - goblin.size || 
                    goblin.y < 0 || goblin.y > canvas.height - goblin.size) {
                    goblin.speed *= -1;
                }

if (isCollision(goblin)) {
                    gameOver();
                    return;
                }
            }

ctx.fillStyle = "#0000ff"; // 姫騎士の色
            ctx.fillRect(player.x, player.y, player.size, player.size);

requestAnimationFrame(update);
        }

function isCollision(goblin) {
            return player.x < goblin.x + goblin.size &&
                player.x + player.size > goblin.x &&
                player.y < goblin.y + goblin.size &&
                player.y + player.size > goblin.y;
        }

function gameOver() {
            alert("ゲームオーバー");
            location.reload();
        }

setInterval(createGoblin, 1000);
        update();
    </script>
</body>
</html>
```