JavaScript 数字タッチゲームと神経衰弱

さて、JavaScriptで数字タッチゲームと神経衰弱を作りました!

 

ドットインストールのを参考にしつつ、いろいろ変えてみました。

ドットインストール最近めっちゃ使ってますね。ブログのリンクに追加しておこう。

 

さて、数字タッチゲームです。

gyazo.com

こんな感じので、start!を押すと、

gyazo.com

 

こんな感じで、タイマーがスタートし、小さい数字から全部タッチしていくと、下の写真のようにかかった時間が表示されます。

gyazo.com

 

さて、これを少し改造して、ユーザがプレイの時にいくつ数字を出現させるかを選択できるようにしました。

gyazo.com

こんな感じで、何マスのゲームを作るかどうかをユーザに選択させます。

ドMなあなたへ・・・20×20なんて選んでしまうとこうなります笑

gyazo.com

 

よっぽど数字タッチゲームが好きじゃないとこんなのできません・・・w

 

 

そしてもう1つ、神経衰弱ゲームです。

 

gyazo.com

 

シンプルな神経衰弱ゲームです。

手札をめくって、数字のペアを探します。

gyazo.com

 

全部揃うとスコアが出ます。

gyazo.com

 

さて・・・。2枚目の写真をみてください。数字をめくった瞬間、?が数字にかわるんですが、ブロックの大きさが変わってます・・・。すごい不細工。んでもって、二つしかない神経衰弱なんて・・・神経衰弱じゃない!ってことで、作り替えてみました。

 

gyazo.com

これが作り替えしたやつです。めくった回数と、既に正解した数、まだあってないペアの数、そして、数字タッチゲームと同様、何ペア作るかもユーザが選べるようにしました。

 

gyazo.com

 

こんなかんじです!数字をめくったときにパネルがずれてしまうのも修正しました。

また、元の使用だと、改行タグを平方根を使って挿入していたので、平方根が整数になるパネルの数しかだめでしたが、そこも切り捨てとか切り上げつかっていい感じに修正。

 

gyazo.com

 

クリアした後はこんな感じです!

JavaScript、動きがすぐ見れるからすごく面白いですね。

改造しつつ技術を高めていけたらいいなぁと思います。

 

 

にほんブログ村 大学生日記ブログ 理系大学生へ
にほんブログ村

 

© 2016 Yuki Sako.