Steel crossing. Falling quickly in strong winds between skyscrapers.'s game

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

No:4440

1906

←

Prev Next

→

Steel crossing. Falling quickly in strong winds be..ALL
Developer User1006｜Date and time 23/6/28 0:59:30
Build time 24.354 sec｜Game capacity 2.011KB｜

Script

鉄骨渡りというゲームを作成しました。プレイヤーはスマホの画面をタップして鉄骨を移動させ、高層ビルの間を強風にさらされながら前進し、ゴールを目指します。画面をタップする時間で鉄骨が移動する速度が変化するため、正確なタイミングが求められます。また、鉄骨が端まで行くと反転するため、画面端まで移動しないように注意が必要です。スコアはゴールまで進んだ距離によって計算され、ゲームオーバー時に表示されます。JavaScriptは以下のようなコードでした。

このコードでは、canvas要素を作成して、プレイヤーを表示し、競技場の上下の端で反転するようにしています。これを更に拡張し、鉄骨を表示、プレイヤーとの当たり判定、風のエフェクトを追加することでゲームとして遊べるようになります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鉄骨渡り</title>
  <style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    const canvas = document.querySelector('canvas');
    const context = canvas.getContext('2d');
    const width = canvas.width = window.innerWidth;
    const height = canvas.height = window.innerHeight;

const player = {
        x: width / 2,
        y: height / 2,
        speed: 2
    };

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

// draw player
        context.fillStyle = '#000000';
        context.fillRect(player.x - 10, player.y - 10, 20, 20);

// move player
        if (player.y > height || player.y < 0) {
            player.speed = -player.speed;
        }
        player.y += player.speed;

requestAnimationFrame(update);
    }

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