プログラミング

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、動きがすぐ見れるからすごく面白いですね。

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

公式LINEに登録してビジネスを学ぼう
無料LINEマガジンへの登録で、5つの豪華特典をプレゼント!
  1. 日本一わかりやすい「経済的自立を果たす人生攻略の10ステップ」(33分23秒)
  2. 見るだけで売上3倍は確実。「時給10円から年商10億」に至るまでの全ての道のり(39分15秒)
  3. 有料講演会の内容を公開。最短最速で0→1を立ち上げる起業術(1時間08分35秒)
  4. 起業初心者へ向けた即金で10万円を稼ぐ具体マニュアル(PDF24ページ)
  5. 資本主義社会においてお金持ちになる5つのルール(17分36秒)
その他、有益なコラムを完全無料で閲覧し放題!
\豪華特典を今すぐゲット/