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

No:4276

2472

←

Prev Next

→

100-meter race (horse racing)
Developer User3727｜Date and time 23/6/27 18:44:44
Build time 20.439 sec｜Game capacity 1.884KB｜

Script

では、100メートル走ゲームを作成します。以下がHTMLとJavaScriptのコードです。

100メートル走

画面をタップして走る！

このコードは、画面をタップすると、走るアニメーションが始まり、画面の右端に到達すると「ゴール！」とアラートが表示される簡単なゲームです。キャンバス要素を使って、画像を描画し、setIntervalを使ってゲームループを実現しています。ランナーの画像は絵文字の中から自分で選んで変更してください。また、スマホで遊ぶことを前提として、canvas要素のサイズを375x667に設定しました。必要に応じて調整してください。

←

Prev　Next

→ 　

Back　

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

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

では、100メートル走ゲームを作成します。

以下がHTMLとJavaScriptのコードです。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>100メートル走</title>
  </head>
  <body>
    <h1>100メートル走</h1>
    <p>画面をタップして走る！</p>
    
    <canvas id="canvas" width="375" height="667"></canvas>

</script>
  </body>
</html>
```

このコードは、画面をタップすると、走るアニメーションが始まり、画面の右端に到達すると「ゴール！」とアラートが表示される簡単なゲームです。

キャンバス要素を使って、画像を描画し、setIntervalを使ってゲームループを実現しています。

ランナーの画像は絵文字の中から自分で選んで変更してください。また、スマホで遊ぶことを前提として、canvas要素のサイズを375x667に設定しました。必要に応じて調整してください。