では、簡単なマウスクリックで操作できる『クリックゲーム』を作成しましょう。
HTMLファイルには以下のようなコードを記述します。
クリックして点数を稼ごう!
0
( ´・‿・`)
このコードを実行すると、タイトルと「クリックして点数を稼ごう!」というメッセージが表示され、クリックすると点数が加算される仕組みになっています。
以下のような特徴があります。
・背景色はピンク色に設定されています。
・メッセージはh1タグで大きな文字で表示されています。
・点数は初期値が0で、クリックするたびに加算されます。表示部分はdivタグで指定されています。
・クリックするときに表示されるアイコンは「( ´・‿・`)」という顔文字になっています。これは大きなdivタグに記述されています。
・クリックに応じて、点数が更新されるJavaScriptのコードは、onclick属性の中に記述されています。
このゲームでは、マウスクリックをするだけで簡単に遊べるので、スマホでもプレイすることができます。また、背景色やアイコンなどを変更することで、独自の設定が可能です。