俺の50m走！

っていったいなんだ。って話かもしれないんですけど、自己紹介にもちょこっと載せてるミニゲームみたいなものです。
かなり前に作ったものなので、自分も思い出しながら、これの作り方とコードを解説していきたいと思います！
サンプルは一応こちら
　https://oreno50m.pages.dev/

早速コードを見ていこう

まずは、HTMLだ
結構シンプル

<html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
        <div id="page2" onclick="sbtn()">
            <h1>俺の50M走</h1>
            <p>画面をタッチ/クリックしてスタート</p>
            <div id="page3">
            <p>タイムが何秒か予想してみよう</p>
            <input id="text2" type="number"><br><button id="btn2" onclick="sbtn2()">いざスタート</button>
            </div>
            <small style="position:absolute;bottom:40;">Ver.1.1.0</small>
        </div>
        <div id="board">
        <h1>SCORE</h1>
        <div id="sboard"></div>もう一度見る場合は右下のボタンを押してね！
        <button id="btn" onclick="restart()">リスタート</button>
        </div>
        <div id="board2">
        <h1>俺の50M走</h1>
        <img src="player01.gif" id="player" height="60" width="60">
        <div id="stagec">
        <div id="stage1">START</div>
        <div id="stage3">10M</div>
        <div id="stage4">20M</div>
        <div id="stage5">30M</div>
        <div id="stage6">40M</div>
        <div id="stage2">GOAL</div>
        </div>
        </div>
    </body>
    </html>

もはや説明不要かもしれないけど

viewportの設定方法

<meta name="viewport" content="width=device-width,initial-scale=1">

は、スマホで見たときに画面を合わせてくれる記述で、このviewportは最低限というかド定番しか入れてないけど、たまにある、スマホの二本指で拡大できないサイトかあるけどあれはここをいじったら一瞬で実装できます。
(あとCSSを完全に理解したことによっても実装可能です。)

ちょっと飛ばしていよいよ内容

ここで、bodyの中にある、まずこれ。
一応、スタート画面というか、トップ画面みたいな感じの部分。

        <div id="page2" onclick="sbtn()">
            <h1>俺の50M走</h1>
            <p>画面をタッチ/クリックしてスタート</p>
            <div id="page3">
            <p>タイムが何秒か予想してみよう</p>
            <input id="text2" type="number"><br><button id="btn2" onclick="sbtn2()">いざスタート</button>
            </div>
            <small style="position:absolute;bottom:40;">Ver.1.1.0</small>
        </div>

この

のどこを押してもsbtn() っていう関数を呼び出すってことね。
Can you understand?

おし、これでゲームとしての要素を一つクリアした。

さあ次に肝心なゲーム画面

まずはコードを見てみよう

    <div id="board">
        <h1>SCORE</h1>
        <div id="sboard"></div>もう一度見る場合は右下のボタンを押してね！
        <button id="btn" onclick="restart()">リスタート</button>
    </div>
    <div id="board2">
        <h1>俺の50M走</h1>
        <img src="player01.gif" id="player" height="60" width="60">
        <div id="stagec">
          <div id="stage1">START</div>
          <div id="stage3">10M</div>
          <div id="stage4">20M</div>
          <div id="stage5">30M</div>
          <div id="stage6">40M</div>
          <div id="stage2">GOAL</div>
        </div>
    </div>

次のコードはさっきのコードの中をさらに細かく見ていくよ

 <div id="board">
        <h1>SCORE</h1>
        <div id="sboard"></div>もう一度見る場合は右下のボタンを押してね！
        <button id="btn" onclick="restart()">リスタート</button>
 </div>

これは、boardっていうidのdiv要素なんだけど、結果発表の画面になるね。

<div id="sboard"></div>

が、結果を表示する要素になるね。

じゃあ、次

   <div id="board2">
        <h1>俺の50M走</h1>
        <img src="player01.gif" id="player" height="60" width="60">
        <div id="stagec">
          <div id="stage1">START</div>
          <div id="stage3">10M</div>
          <div id="stage4">20M</div>
          <div id="stage5">30M</div>
          <div id="stage6">40M</div>
          <div id="stage2">GOAL</div>
        </div>
    </div>

だけど、これが実際にキャラが動く画面になるね。
<img src="player01.gif" id="player" height="60" width="60">要素こいつがキャラで、

は

この芝生みたいなみどりの場所を作ってて、

          <div id="stage3">10M</div>
          <div id="stage4">20M</div>
          <div id="stage5">30M</div>
          <div id="stage6">40M</div>
          <div id="stage2">GOAL</div>

こいつらは文字通りのピンク色とかがついてる距離の要素たちね。

さあ、主要なHTMLはここまで。

Javascriptとcssどっちを見たい？

→ CSS編(第二回)へ、

https://qiita.com/sharu2920/items/a27be76a47ca311f9cc1

→Javascript編(第三回完結)へ、

【俺の50m走】初心にもどって解説するぜ

俺の50m走！

早速コードを見ていこう

viewportの設定方法

ちょっと飛ばしていよいよ内容

さあ次に肝心なゲーム画面