JavaScript 簡単宝探しゲーム

宝探しゲーム f:id:TomozQ:20201027132001j:plain

JavaScript備忘録

今回はJavaScriptの記事になっています。

HTMLファイルにCSS・JavaScriptを書き込む方法

以前２記事に渡ってHTMLについて書きましたが、その時にはHTMLファイルとCSSファイルを分けていました。

今回はHTMLファイル一つにCSSとJavaScriptを書き込む方法で書いていきます。

全然難しい話ではないですのでサクッと

まずはCSSを書き込む方法

<head>

</head>
<style>
  div{
    background-color: aliceblue;
  }
</style>
<body>

</body>

こんな感じでheadタグとbodyタグの間に書くのがスタンダードなんかな？

スタイルタグを使って中にCSSを書いていきます。

JavaScriptを書くときは・・・

<head>

</head>
<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aliceblue;
  }
</style>
<body>
  <div class='box'></div>

  <script>
    console.log('hoge');
  </script>
</body>

body要素内の要素を全て読み込んだ上でJavaScriptを実行したいので

こんな感じで、bodyの閉じタグの直前にscriptタグで囲んで中身を書いていきます。

全体のコード

ここはもう本当にこのくらいの記述量でできますよーってだけ

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Practice</title>
  </head>
  <style>
    body{
      display: flex;
      flex-wrap: wrap;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      cursor: pointer;
      transition: 0.8s;
      margin: 0 8px 8px 0;
      text-align: center;
      line-height: 100px;
    }
    .win{
      background-color: pink;
      border-radius: 50%;
      transform: rotate(360deg);
    }
    .lose{
      transform: scale(0.9);
    }
  </style>
  <body>
    
    <script>
      'use strict';

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

      for(let i =0; i<num; i++){
        const div = document.createElement('div');
        div.classList.add('box');

        div.addEventListener('click', () => {
          if (i === winner){
            div.textContent = 'Win!'
            div.classList.add('win')
          }else{
            div.textContent = 'Lose!'
            div.classList.add('lose')
          }
        });

        document.body.appendChild(div);
      }
    </script>
  </body>
</html>

こんだけで実装できちゃいます。すごいねーJavaScript

各部解説

まずは

cssの方からいきます

body{
  display: flex;
  flex-wrap: wrap;
}

まずbody要素全体に対して

display: flex;

body内の要素を横並び

flex-wrap: wrap;

bodyの幅に合わせてbody内の要素を折り返し表示

今回は5つだけなので折り返し表示にはなっていませんが、数が増えた際に折り返し表示されるために使用しています。

.box{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  cursor: pointer;
  transition: 0.8s;
  margin: 0 8px 8px 0;
  text-align: center;
  line-height: 100px;
}

boxクラス

上から順に

幅100px

高さ100px

背景色：スカイブルー

マウスが当たった時のカーソル：ポインター

0.8秒かけて変化

要素間：上0, 右8px, 下8px, 左0

表示させるテキストの左右位置：真ん中

表示させるテキストの縦幅100px

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

winクラス

背景色：ピンク

枠線の丸み50%（真ん丸）

360°回転するアニメーション

.lose{
  transform: scale(0.9);
}

loseクラス

比率0.9の大きさに変える

続いてJavaScript

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

numという定数に5を代入

winnerという変数を用意

右辺が少し複雑なのですが

まずMath.random()について

Math.random()は０から１未満の数字をランダムに生成します。

ここで重要なのは１未満であること。

１は含まれません。

0.45733749といったような乱数が生成されます。

次にこれにnumをかけています。numには5が代入されているので今回の場合Math.random() * 5となっています。

そうすることで０から５未満の乱数が生成されます。

最後にMath.floorを使用することにより、小数点以下を切り捨てます。

結果0から4までの「0・1・2・3・4」5つの整数がランダムで生成されます。

続いてfor文の中身を見ていきます

for(let i =0; i<num; i++){
  const div = document.createElement('div');
  div.classList.add('box');

  div.addEventListener('click', () => {
    if (i === winner){
      div.textContent = 'Win!'
      div.classList.add('win')
    }else{
      div.textContent = 'Lose!'
      div.classList.add('lose')
    }
  });

  document.body.appendChild(div);
}

まずは

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

この部分ですが

繰り返し処理の記述になっています。

let i で i という変数を定義

i < num iの幅をnum未満とします。（numには5が代入されています。）

i++とし、処理のたびiを１ずつ増やします

つまりiは0から1ずつ増えていきますが、5未満とされているのでiが４のときの、中身の処理を終了した時点でこの繰り返しは終わります。

続いて分割しながらfor文の中身を見ていきます。

const div = document.createElement('div');
div.classList.add('box');

まずは1行目

divという定数を用意し、document.createElement('div')を代入します。

document.createElement('div')でドキュメント内に('div')要素を作るという命令です。

ドキュメント内に生成するdiv要素をdivという定数に代入

って感じの処理です

・・・わかりづらいか？

2行目で

この代入されたdivという定数に対し、classList.add('box')

としています。

classList.add('box')は、cssで作ってあるboxクラスをこの定数divに付与する

といった処理になっています。

つまりここまでの2行で

for文はこの処理を5回繰り返すので

div要素を5つ生成し、それぞれにboxクラスを付与する

という処理になっています。

次

div.addEventListener('click', () => {
})

これです。これはホントよく使うと思います。

divは頭から定義されている定数

addEventListener()

これは何らかのイベントが発生した時に。というような記述です

この際のイベントとは、前述のクリックされた時、ダブルクリックされた時、マウスオーバーされた時などのイベントを差します。

したがって今回の場合はdiv要素がクリックされた時にこの処理をしてね、という命令になります。

では中身を見ていきましょう

if (i === winner){
  div.textContent = 'Win!'
  div.classList.add('win')
}else{
  div.textContent = 'Lose!'
  div.classList.add('lose')
}

if文ですね

if(条件){処理1}else{処理2}

です

if=もし

(条件)・・・何々なら

{処理1}・・・この処理してね

else・・・それ以外は

{処理2}・・・こうしてね

今回の場合は

もし

iがwinnerと同じなら（i番目の処理のiとランダムで生成されたwinnerという定数が一緒なら）

ん？ランダムで生成されたwinnerっていう定数とi番目に生成されたdiv要素のi番目が同じタイミングの場合には、、、かな？

伝わるかな？

div要素にwinクラスを付与して[Win!]と表示してね。

それ以外は

loseクラスを付与して[Lose!]と表示してね

といった処理になります。

もし、ランダムに生成された数字が0だったら、一番最初に生成された（iが0の時に生成された）div要素にwinクラスが付与されるといった感じでしょうか？

そしてクリックされた時にCSSで指定しているtransformをしながら[Win!]と表示されるといった感じでしょうか？

いった感じでしょうか？www

そして最後

document.body.appendChild(div);

ボディ要素に子要素として定数div（div）要素を追加する。

というような処理になっています。

全体の流れとしては

定数を用意する

for文でdiv要素を作る

appendChildで表示する

となっています！

今回はここまで

次回は・・・JSかなー？

それではまた次回！

男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript備忘録

目次

今回はJavaScriptの記事になっています。

HTMLファイルにCSS・JavaScriptを書き込む方法

全体のコード

各部解説