初心者向け。React.jsで作る超簡単な数字当てゲーム
206 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回解説するのはReact.jsで作る数字当てゲームです。
今からReact.jsを勉強する人に向いています。
仕様とデモ
最初が↓です。
1、2、3のボタンがありますがそれをクリックしてランダムで選ばれた1〜3の数字と同じなら「あなたのポイント」と書かれた所にポイントが加算されて違うならポイント分だけ減っていきます。
これを10回繰り返して最終的なポイントが「あなたのポイント」と書いてある所に表示されてリセットボタンが表示されるとまた最初の状態に戻ります。
デモはここから見ることができます。
簡単にやりたいのでnpm インストールはせずバベルでやります。
まずは↓をコピペしてください。
それでは解説しますまずは↓を表示します。
最初の表示
コードを↓にします。
次は↓の赤枠を表示しますがuseStateを使って変化させることができるようにします。
数の変化
コードを↓にします。
数字の「1」、「2」、「3」が書いてあるボタンがありますがボタンをクリックすると数字の値を入力することができるようにするのとランダムの数字を選ぶことができるようにします。
そして自分の選んだ数字とランダムで選んだ数字が同じだったら自分のポイントにランダムで選んだポイントを加えてそうでない場合は自分のポイントからランダムで選んだポイントを引きます。
ランダムの数字を選ぶのは配列を使います。
コードを↓にします。
今のままだとボタンを押す回数は変化しないので変化するようにするのと「？」にランダムで選んだ数字が表示されるようにします。
コードを↓にします。
このままではボタンをずーっと押し続けることができてボタンを押す回数が0回になったらリセットして最初に戻ることができるようにします。
現在リセットボタンは非表示ですがボタンを押す回数が0になったら表示されるようにします。
リセットボタンの表示
ボタンを押す回数が0かそうでないかで表示の切り分けをしますが三項演算子を使います。
また子コンポーネントを作ります、その際に親コンポーネントから子コンポーネントにprops({button,number})を送ります。
リセットボタンを押した時に最初に表示された状態に戻します。
コードを↓にします。
これで完成です。
最後に全てのコードを載せます。