簡単なクリックゲームを作ります。
以下がHTMLファイルのコードです。
😺
これをスマホで開くと、猫の絵文字が表示されます。猫をタップ(クリック)すると、猫の絵文字の横にカウントが表示されます。何度も押して、カウントを増やして遊んでください。
CSSで、猫の絵文字のサイズを大きくし、カーソルの形を指にするようにしました。
JavaScriptで、猫の要素を取得し、クリックイベントを登録しています。クリックすると、カウントが1増え、猫のテキストが`
😺 x ${count}`に変更されます。`${count}`は、変数`count`の値を埋め込んだ文字列です。
シンプルなゲームですが、スマホで遊べるように、絵文字を多めに使いました。猫が1匹で何匹になるか、表現しやすいということもあります。また、レスポンシブなレイアウトを考えていないため、スマホで開いたときに画面が小さい場合は、猫の絵文字がはみ出してしまう可能性があります。