ブラウザ上で動くミニアプリです。
スタートをクリックしてランダムに表示された数字のボタンをタッチしていくゲームです。
老化防止とかによさそうです(笑)
START
body内には以下のタグのみ記述します。
<div id="game"> <ul id="bod"></ul> <div id="btn">START</div> </div>
CSSの記述
CSSは文字の大きさや配置、種類に加え、ボードやボタンの書式設定の物です。
ボタンの配置にはflex-boxを使っています。
JavaScriptの記述
末尾の「new Game(3)」にすることで、3×3の0~8の9つのボタンが表示されます。
それを0から順番に押し込んでいくことでゲームをクリアします。
この末尾の「new Game(3)」の数字を4にすれば、4×4の0~15の16個のボタンが表示されるゲームになります。
検討事項
もっとシンプルにプログラミングすることも可能だと思います。
単純に0~8の数字を配列に入れて、それをランダムに表示するだけにしてもありです。
クリアしたときに「finished!」とかって表示できたり、「START」ボタンを押した後「RESET」にtextContentを差し替えるようにしてもいいと思います。
今後の課題ですね。
ちなみにcontainerをidに設定すると、ブログで掲載しようとすると表示全体に影響が出ますね。
この辺りも理解して対応していく必要がありますね。
普通にミニアプリを作る分には、なんでもいいんでしょうね。
コメント