Space travel with CANVAS. Sometimes aliens and stars appear.'s game

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

No:6486

751

←

Prev Next

→

Space travel with CANVAS. Sometimes aliens and sta..ALL
Developer User3891｜Date and time 23/7/2 14:49:02
Build time 30.503 sec｜Game capacity 3.459KB｜

Script

了解しました。以下に、canvasを使用して宇宙旅行するゲームの実装例を示します。

この実装では、宇宙船を操作してcanvas上を移動することができます。方向キーを押すことで宇宙船が動き、canvasの上部に向かって移動すると宇宙人や星がランダムに出現します。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下に、canvasを使用して宇宙旅行するゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>宇宙旅行ゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>

// 宇宙船の初期位置
        var spaceshipX = canvas.width / 2;
        var spaceshipY = canvas.height - 50;

// キーイベントのリスナーを追加
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

// キーの状態を格納するオブジェクト
        var keys = {
            left: false,
            right: false,
            up: false,
            down: false
        };

// キーイベントのハンドラ
        function keyDownHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "Left") {
                keys.left = true;
            }
            else if (event.key === "ArrowRight" || event.key === "Right") {
                keys.right = true;
            }
            else if (event.key === "ArrowUp" || event.key === "Up") {
                keys.up = true;
            }
            else if (event.key === "ArrowDown" || event.key === "Down") {
                keys.down = true;
            }
        }

// 宇宙船を描画する関数
        function drawSpaceship() {
            ctx.beginPath();
            ctx.rect(spaceshipX, spaceshipY, 50, 50);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

// 宇宙船の移動処理
        function moveSpaceship() {
            if (keys.left && spaceshipX > 0) {
                spaceshipX -= 5;
            }
            if (keys.right && spaceshipX < canvas.width - 50) {
                spaceshipX += 5;
            }
            if (keys.up && spaceshipY > 0) {
                spaceshipY -= 5;
            }
            if (keys.down && spaceshipY < canvas.height - 50) {
                spaceshipY += 5;
            }
        }

// 描画処理を実行する関数
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawSpaceship();
        }

// ゲームループをスタート
        setInterval(function() {
            moveSpaceship();
            draw();
        }, 10);
    </script>
</body>
</html>
```