JavaScriptジャバスクリプトで つくる！
キーボードで かけっこ！ 🏃‍♂️

<!-- かけっこをするスタジアム --> <div id="stadium"> <!-- 走はしるキャラクター --> <div id="runner">🏃‍♂️</div> <!-- ゴールの旗はた --> <div id="goal-flag">🚩</div> </div> <p>右みぎ矢印やじるしキー (👉) を 連打れんだしよう！</p>

body { text-align: center; /* 文字もじをまんなかに寄よせる */ font-family: sans-serif; /* 文字もじの形かたちをきれいに */ } #stadium { width: 500px; /* スタジアムのよこはば */ height: 100px; /* スタジアムのたかさ */ background-color: #eee; /* 背景はいけいを灰色はいいろにする */ margin: 50px auto; /* 画面がめんのまんなかに置おく */ position: relative; /* キャラを動うごかすときの「基準きじゅん」にする */ border-bottom: 5px solid #555; /* 地面じめんに線せんをひく */ } #runner { font-size: 50px; /* キャラの大おおきさ */ position: absolute; /* 👈 座標ざひょうで場所ばしょを決きめられるモード */ left: 0px; /* 最初さいしょは左ひだりはし(0px) */ bottom: 0px; /* 下したにぴったりくっつける */ /* --- 👇 キャラを右みぎ向むきにひっくり返かえす「まほう」 --- */ transform: scaleX(-1); /* 左右さゆうをはんてんさせる */ } #goal-flag { font-size: 40px; position: absolute; right: 10px; /* 右みぎはしから10pxの場所ばしょ */ bottom: 0px; }

// ① キャラの横よこの場所ばしょ(x)をいれる箱はこ。最初さいしょは 0 let x = 0; // ② 動うごかしたいキャラ(HTMLのrunner)をつかまえる const player = document.getElementById("runner"); // ③ キーボードが おされたときに 動うごくプログラムを登録とうろく document.addEventListener("keydown", function(e) { // もし(if) おされたキーが "ArrowRight" (右みぎ矢印やじるし) だったら... if (e.key == "ArrowRight") { // いまの座標ざひょう x に 10px をたす x = x + 10; // --- 💡 ゴールを通とおり過すぎないようにチェック！ --- // もし 座標ざひょう x が 440px よりも 大おおきくなったら... if (x >= 440) { x = 440; // 強制的きょうせいてきにゴールの場所ばしょで止とめる(リミッター) // 画面がめんを書かきかえたあと、お祝いわいのメッセージを出だす player.style.left = x + "px"; alert("ゴール！ おめでとう！"); x = 0; // もういちど遊あそべるようにスタートに戻もどす } // キャラの style.left を書かきかえて、画面がめん上じょうで動うごかす player.style.left = x + "px"; } });