JavaSript 簡単なゲーム作成

Java Script 簡単なゲーム作成(if文の使い方)

編集

//JavaScriptの言語宣言

<script type="text/javascript">

//コードの間違い確認のため
      'use strict';

//クラスの作成

//boxクラス　表示する箱について設定

box.{

    width:100px;
    height:100px;
    background:skyblue;
    cursor:pointer;
    transition:0.8s;
    margin:0 8px 8px 0;
    text-align:center;
    line-height: 100px;
    //text-align テキストの表示位置の設定
    //width,height,line-heightを同じ大きさにすることで中心を意味する
    }

//winのクラス

win.{

    background:pink;
    border-radius: 50%;
    transform: rotate(360deg);
   }

//loseのクラス
  .lose{
    transform: scale(0.9);
   }

//難易度設定のため

const num =5;

//Math.floorで囲むことによって少数点以下を切り捨てる

//Math.random×numで現在は０以上5未満の数字を生成する

//結果として、整数の0－4を生成することになる。

const winner =Math.floor(Math.random()* num);

for (let i = 0; i < num; i++){

//空のdiv要素作成

const div =document.createElment(''div);

//boxを作るため、divにboxをaddする

div.classList.add('box')

//分岐を使うif文　i=winnerと同じ場合、win,その他の場合、loseとする

if(i == winner){

 div.dataset.result='win';

}else{

 div.dataset.result='lose';

}

//イベントリスナーをつける

div.addEventListener('click', function(){

//winの場合、win!とtextContentで表示させる

if(div.dataset.result=='win'){

div.textContent='win!'

//イベントを追加するため、divにwinを格納

div.classList.add('win');

}else{

//そのほかの場合、lose!とtextContentで表示させる

div.textContent='lose!'

//イベントを追加するため、divにwinを格納

div.classList.add('lose');

});
  //↓ブラウザーに表示させるために書いている
  //divの最後の要素として認識されるため、ブラウザーに表示させる
      document.body.appendChild(div);
    }

    </script>

確かな力が身につくJavaScript「超」入門【電子書籍】[ 狩野 祐東 ]

アプリを作ろう！HTML5入門HTML5+CSS3+JavaScriptで学ぶAndroid/iPhoneアプリ作成【電子書籍】[ 山田祥寛 ]

ゲームで学ぶ「JavaScript入門」 HTML5＆CSSも身につく！ [ 田中賢一郎 ]

入門JavaScriptプログラミング [ JD Isaacks ]