グラフィックゲーム's game

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

No:37761

←

Prev Next

→

グラフィックゲーム
Developer User17126｜Date and time 24/1/21 15:42:46
Build time 9.301 sec｜Game capacity 2.69KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>グラフィックゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="400"></canvas>

// ゲームオブジェクト
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            width: 20,
            height: 20
        };

const enemy = {
            x: Math.random() * (canvas.width - 30) + 15,
            y: 0,
            width: 15,
            height: 15,
            dy: 2
        };

let score = 0;

// キーボードイベントリスナー
        document.addEventListener("keydown", movePlayer);

function movePlayer(event) {
            if (event.key === "ArrowLeft" && player.x > player.width / 2) {
                player.x -= 10;
            }

if (event.key === "ArrowRight" && player.x < canvas.width - player.width / 2) {
                player.x += 10;
            }
        }

// ゲームループ
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
            ctx.fillStyle = "blue";
            ctx.fillRect(player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);

// 敵を描画
            ctx.fillStyle = "red";
            ctx.fillRect(enemy.x - enemy.width / 2, enemy.y - enemy.height / 2, enemy.width, enemy.height);

// 当たり判定
            if (collisionDetection(player, enemy)) {
                score++;
                enemy.x = Math.random() * (canvas.width - 30) + 15;
                enemy.y = 0;
            }

// スコアを表示
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);

// 敵の移動
            enemy.y += enemy.dy;

requestAnimationFrame(draw);
        }

// 当たり判定
        function collisionDetection(player, enemy) {
            if (player.x - player.width / 2 < enemy.x + enemy.width / 2 &&
                player.x + player.width / 2 > enemy.x - enemy.width / 2 &&
                player.y - player.height / 2 < enemy.y + enemy.height / 2 &&
                player.y + player.height / 2 > enemy.y - enemy.height / 2) {
                return true;
            }
            return false;
        }

draw();
    </script>
</body>
</html>