Web プログラミング

【もりけん塾82記事】JavaScriptですごろくゲーム

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

10/19までにJavaScriptですごろくゲームを提出して

 

というものが友人からの宿題。

 

なので今回、JavaScriptですごろくゲームを作成しました。

JavaScriptですごろくゲームを作る

ソースコードを打つ前にすごろくゲームのルールを日本語で作成していきます。

 

すごろくのルール

  • スタートが0、ゴールが30
  • 0~30のマスがある
  • 3の倍数のマスは1回休憩
  • 4の倍数のマスはサイコロが1から6のみで1進み、2~5のマスのは4の倍数に残る
  • 30でゲーム終了
  • サイコロを振ると出た目を表示

 

上記のルールで作成していきます。

 

JavaScriptで使うもの

JavaScriptで使うものは

  • while文でサイコロを振る
  • break

ゴール以外ではすごろくを振り続けるということにし、ゴールではすごろくが終了にしたいので上記のものが適切かと思い、作成していきました。

 

while文とfor文

while文は繰り返し処理するための制御文。

 

for文もwhile文と同様繰り返しの制御文ですがちがいがあります。

  • while文:繰り返し回数が決まっていない場合に用いる
  • for文:あらかじめ回数が決まっている場合に用いる

回数が決まっているか決まっていないかで制御文を選択する必要があるようです。

 

while文のように回数が決まっていないものは、今回作成しようとしているすごろくゲームなどが当てはまるかと思っています。

無限ループで抜け出す方法

無限に繰り返されると困る場合は、

  • continue:指定しているものだけスキップ
  • break:指定したもの以降を切る

を用いるようです。

 

例えば、1〜10の数字の中に7だけをスキップしたい場合はcontinueを用い、7以降を断ち切りたい場合はbreakを用います。

 

その他の制御構文

そのほかの制御構文をまとめました。

作りたいものによって、使い分けることが大切だと感じたのでポイントを抑えて使っていきたいと思います。

JavaScriptですごろくゲーム|ソースコード

JavaScriptのソースコードは以下のとおりですが、未完成状態です。

 

 JavaScript
// すごろくのルール
// スタートが0、ゴールが30
// 0~30のマスがある
// 3の倍数のマスは1回休憩
// 4の倍数のマスはサイコロが1から6のみで1進み、2~5のマスのは4の倍数に残る
// 30でゲーム終了
// サイコロを振ると出た目を表示
//スタートが0
'use strict';
var start = 0;
function dice (){
return (Math,floor(Math.random()*100)%6)++;
}
console.log('start,dice');
while(start < 30 ){
console.log('区切り');
console.log('今' + start +'にいます\n');
switch(start){
case 0:
case 1:
case 2:
start += 1;
break;
case 3:
var i = dice();
console.log(' -- '+i+'が出ました');
var (cleared =[1,6].some(function(n){ {return n == i;});
if (cleared) start += 1;
break;
default:
console.log('error.');
break;
console.log('今、' +start+'にいます\n');
}
console.log('goal');

参考:JavaScript 教室の練習問題。スゴロクをつくってみようのコーナー

 

このコードはほとんど上記URLのものを写経しているものです。

 

自分用にアレンジして作成している途中のもの。

 

今日はJavaScriptはここまでにして明日、続きをやっていきます。

おわりに

昨日と一昨日、JavaScriptとjavaをいじったことがある方に会ってきました。

 

その子もバックエンドエンジニアになった友人と同じことを言っていましたが、違った言い方で説明してくれました。

 

  • コードは覚えなくて良いから作りたいものを紙に書く
  • 作りたいものができたら調べる
  • 調べて当てはまるコードがなければ自分で作る

 

これで良いと難しい考えをしていたのでシンプル化してくれました。

 

シンプルに考えつつ目の前のことをやっていくことが大切だから、遠回りする考えは無くしなさいと助言も貰えました!

 

コードを書くこととググること

 

これだけ。

 

好奇心旺盛すぎて、あれもこれもってなっていたので、シンプルな道筋を何度も聞くと、軸を見失わなくて良いです。

 

これを1人で軌道修正できるようにコントロールしていきたい…!

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada