Reactで数当てゲーム(NumerOn)を作ってみた

こんにちは、ぐぐりら(@guglilac)です。


春休みにReactを始めて、チュートリアルもいくつか終えました。

一番最初のHello Worldをやってみるとこだけ記事にしたと思います。

CodePenでReactのお勉強〜Hello World編〜

チュートリアルは本家の3目並べと、どっかの記事にあったToDoアプリの作成をやってみました。

そろそろ写経じゃなくて実際に自分で考えて書いてみよーかなー、ということで、練習によく使う「数当てゲーム」を作ってみました。

NumerOn(ヌメロン)とか呼ばれたりもします。
テレビかなんかで昔取り上げた番組があった気がします。

NumerOnのルール

一人で行う、数当てゲームです。
ランダムに作られる3桁の数字を当てるゲームです。

各桁の3つの数字は全て異なるように作られます。

プレイヤーは毎回3桁の数字を入力します。

入力した3桁の数字が並び順も含めて全て正解の3桁の数字と一致していればゲーム終了です。

正解していない場合、「入力した数字がどのくらい一致していたか」という情報が返されます。

この情報は、「1H 2B」というように「?H ?B」という形式で返ってきます。


Hの前の数字は、「入力した数字のうち位置まで正解と合致している数字の個数」を表し、

Bの前の数字は、「入力した数字のうち、位置はあっていないけれど正解に含まれてはいる数字の個数」を表しています。

たとえば、

正解が「3 6 7」だった時、

プレイヤーが入力した数字が「3 7 6」だった場合、

位置があっているのは3のみ => 1H
6と7は位置は違うけれど正解に含まれてはいる => 2B

となります。
この情報を手がかりに、正解の数字を当てる、というのがこのNumerOnというゲームです。

(一人で行うゲームと書きましたが、どちらが先に当てられるかを競うという形で2人対戦も出来ます。)

おわりに

どこに状態を保存するのがベストなのかとかがまだよくわからず、とりあえず動けばいいやーって感じで書いてしまっています。

時間があればコードの解説とかも書こうかな。


追記


一人で遊ぶだけではさみしいので、CPUと戦えるようにしました!

CPUの戦略はまた後日書こうかと思いますが、割と強いと思います。
遊んでみてください。

アプリの構成も書いてもいいかな〜。まあ時間があれば。

追記の追記

CPUの戦略についてやアプリの構成についても記事を書きました! よろしければこちらもどうぞ! 人生で初めて公開したWebアプリNumeron appの紹介

コメント