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

No:5927

1083

←

Prev Next

→

hurdle race
Developer User3848｜Date and time 23/7/1 2:28:23
Build time 24.84 sec｜Game capacity 3.112KB｜

Script

了解しました。以下にハードル競走のゲームを作成します。

ハードル競走

このHTMLファイルをテキストエディタで新規作成し、拡張子を`.html`として保存してください。その後、ブラウザで開くとハードル競走のゲームが遊べます。プレイヤーの位置を上下に移動させ、障害物のハードルを避けながらスコアを競います。障害物にぶつかるとゲームオーバーになり、スコアが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にハードル競走のゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ハードル競走</title>
</head>
<body>
    <h1>ハードル競走</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");

var player = {
                x: 50,
                y: 350,
                width: 50,
                height: 50,
                jumping: false,
                dy: 0
            };

var hurdle = {
                x: 400,
                y: 350,
                width: 50,
                height: 50,
                speed: 5
            };

var score = 0;

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

ctx.fillStyle = "#FF0000";
                ctx.fillRect(player.x, player.y, player.width, player.height);

ctx.fillStyle = "#0000FF";
                ctx.fillRect(hurdle.x, hurdle.y, hurdle.width, hurdle.height);

ctx.font = "20px Arial";
                ctx.fillText("Score: " + score, 10, 20);
            }

function update() {
                if (player.y + player.height >= canvas.height) {
                    player.jumping = false;
                    player.dy = 0;
                    player.y = canvas.height - player.height;
                } else {
                    player.dy += 0.5;
                    player.y += player.dy;
                }

hurdle.x -= hurdle.speed;
                if (hurdle.x + hurdle.width < 0) {
                    hurdle.x = canvas.width;
                    hurdle.y = 350;
                    score++;
                }

if (hurdle.x < player.x + player.width &&
                    hurdle.x + hurdle.width > player.x &&
                    hurdle.y < player.y + player.height &&
                    hurdle.y + hurdle.height > player.y) {
                    alert("ゲームオーバー！\nスコア: " + score);
                    location.reload();
                }

draw();

requestAnimationFrame(update);
            }

document.addEventListener("keydown", function(e) {
                if (e.code === "Space" && !player.jumping) {
                    player.jumping = true;
                    player.dy = -12;
                }
            });

update();
        });
    </script>
</body>
</html>
```