ドットインストールさんの動画をいくつか視聴して、オリジナルで作ってみた「ラストババ抜き」

# はじめに
こんにちは。私は今夏休みなので、たくさん時間を確保できる状況にあります。
そこで、HTML、CSS、JavaScriptをしっかり勉強しようと考えました。
私が勉強する教材として利用したのが[ドットインストール](https://dotinstall.com)です。

そして今回、ある程度、理解することができ、オリジナルでゲームを作ることができたので、記事にしました。

久しぶりの投稿になりますが、よろしくお願いします。


# 視聴したレッスン
- 【旧版】はじめてのHTML
- 【旧版】はじめてのCSS
- 【旧版】JavaScript基礎文法徹底マスター
- 【旧版】JavaScriptでおみくじを作ろう
- 実践！ウェブサイトを作ろう
- 実践！スマートフォンサイトを作ろう
- 詳解HTML 基礎文法編
- 詳解CSS 基礎文法編
- はじめてのJavaScript
- 詳解JavaScript DOM編
- JavaScriptでスライドショーを作ろう
- JavaScriptでスロットマシンを作ろう
- JavaScriptでハイアンドローゲームを作ろう
- JavaScriptでカウントダウンタイマーを作ろう
- JavaScriptで5秒当てゲームを作ろう
- JavaScriptで作る誕生日診断
- JavaScriptで作る王様ゲーム

上記に書いてあるレッスンを視聴しました。
それぞれの文法については、2~3周ほどしました。
JavaScriptに関しては、私は他の言語も触っていましたので、スムーズに理解することができました。


# 環境
- Windows 10 home
- Google Chrome


# 「ラストババ抜き」の制作

このゲームはトランプの「ババ抜き」の最後の部分を少し改良して再現したゲームになります。相手のカード枚数が残り2枚で、そこから「JOKER」のカードではなく、「あたり」のカードを選ぶものです。

こちらから遊ぶことができます。→ [**ラストババ抜き**](https://michimichix521.github.io/LastOldMaid/)


## ソースコード

[Github](https://github.com/michimichix521/LastOldMaid)にもあげてありますが、こちらにもそれぞれ載せておきます。

```index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ラストババ抜き</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="container">
		<h1>dealer</h1>
		<div class="dealer">
			<ul>
				<li>?</li>
				<li>?</li>
			</ul>
		</div>

		<div id="resetButton">もう一度！</div>
		<div id="result"></div>

		<h1>player</h1>
		<div class="player">あたりを引け！</div>
	</div>

	<script src="main.js"></script>

</body>
</html>
```



```styles.css
body{
	background-color:#088A4B;
}

.container{
	width:500px;
	margin:100px auto;
	font-weight:bold;
	font-size: 24px;
	text-align:center;
}

h1{
	border:5px solid #fff;
	margin:0 0 30px;
}

ul{
	display:flex;
	justify-content:space-between;
	list-style:none;
	padding:0;
	margin:0;
}

li,.player{
	background-color:skyblue;
	width:100px;
	height:160px;
	border:5px solid #fff;
	border-radius:5px;
	line-height:160px;
	user-select:none;
}

li:hover{
	opacity:0.8;
	cursor:pointer;
	user-select:none;
}

.player{
	margin:0 auto;
	font-size: 12px;
}

#result{
	margin:50px 0;
	height:70px;
	font-size: 48px;
	line-height:70px;
}

#resetButton{
	width:100px;
	height:100px;
	line-height:100px;
	font-size:18px;
	border-radius:50%;
	background-color:purple;
	border:3px solid #fff;
	float:right;
	position:relative;
	top:30px;
	right:60px;
}

#resetButton:hover{
	opacity:0.8;
	cursor:pointer;
	user-select:none;
}

.hidden{
	display:none;
}
```
```main.js
"use strict";

{
	const d_li=document.querySelectorAll(".dealer li");
	const resetButton=document.getElementById("resetButton");
	const result=document.getElementById("result");

	window.onload=function(){
		init();
	}

	for(let i=0;i<d_li.length;i++){
		d_li[i].addEventListener("click",()=>{
			if(!resetButton.classList.contains("hidden")){
				return;
			}

			let rdNum=Math.floor(Math.random()*d_li.length)
			if(i === rdNum){
				gameClear(i);//あたり
			}else{
				gameOver(i);//はずれ
			}

			resetButton.classList.remove("hidden");
		});
	}

	resetButton.addEventListener("click",()=>{
		init();
	});

	function init(){ //初期化
		for(let i=0;i<d_li.length;i++){
			d_li[i].textContent="?";
		}
		resetButton.classList.add("hidden");
		result.textContent="";
	}

	function gameClear(i){ //ゲームクリア
		d_li[i%2].textContent="あたり";
		d_li[(i+1)%2].textContent="JOKER";
		result.textContent="あたり！"
	}

	function gameOver(i){ //ゲームオーバ―
		d_li[i%2].textContent="JOKER";
		d_li[(i+1)%2].textContent="あたり";
		result.textContent="ざんねん！"
	}

}
```
以上がソースコードになります。
もしなにかあればコメントをください。できる限り対応します。


# 終わりに
以上で「ラストババ抜き」の制作は終了です。
時間はかかりましたが、やっとオリジナルで作れたので、嬉しいです。


知識を入れていく際なのですが、ドットインストールでは手を動かしながらできるので、効率よく勉強できると思います。
個人的に、CSSの学習は大変でした。次々に新しいことが出てくるので驚きの連続です。

今後も、HTML、CSS、JavaScriptを使ってオリジナルのものを作っていく予定なので、よろしくお願いします。

ここまで読んでいただき、ありがとうございました。