【JavaScript】クリックした後の結果を切り替えたい|datasetを使う

JavaScript

前回のコードを利用して、以下の仕様のゲームを作成していきます。

ゲームの仕様
  • 5つの無地divが並んでいる。
  • clickすると1/5の確率で当たり、4/5の確率で外れが出る。
  • 結果は回によって変わる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>

</body>

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

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
  cursor: pointer;
  transition: 0.8s;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
}

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

'use strict';

const num = 5;　// 0-4の数字が入ることを示唆
const winner = Math.floor(Math.random() * num); //0-4　★

for(let i = 0 ; i < num ; i ++){
const div = document.createElement('div');
if(i === winner){
  div.dataset.result = 'win'　★
}else{
  div.dataset.result = 'lose'　★
}
div.classList.add('box');
div.addEventListener('click', function(){
  if (div.dataset.result === 'win') {
    div.textContent = 'WIN!';
  }else{
    div.textContent = 'LOSE';
  }
  div.classList.toggle('circle');
});

document.body.appendChild(div);
};

これで以下のようなゲームが完成。

f:id:nekorokkekun:20190711094037p:plain
↓
f:id:nekorokkekun:20190711094059p:plain

Math.floor(Math.random() * num);　について

Math.floorとは、引数の数字の小数点以下を切り下げて整数で返してくれるもの。
Math.floor() - JavaScript | MDN

Math.random()とは、0以上1未満の不動小数点を返してくれるもの。

この場合には、numに入る数字に0-0.9999....の数字を掛けてくれている。
Math.random() - JavaScript | MDN

div.dataset.result = 'win' について

この場合の挙動としては、

<div data-result='win'></div>

という結果になる。

data属性を指定した要素に与えるためのメソッドである。

HTMLElement.dataset - Web API | MDN

function(){
  if (div.dataset.result === 'win') {
    div.textContent = 'WIN!';
  }else{
    div.textContent = 'LOSE';
  }
  div.classList.toggle('circle');
});

上記の部分で、もしdatasetがwinだった場合には、textContentでwinという文字列を、datasetがloseだった場合、loseという文字列を付け加えるという形になっている。