JavaScriptでトランプのブラックジャック

はじめに

僕はプログラミングの初心者である。これまでHTML, CSS, wordpressで騙し騙しやってきたが、思うところあって、プログラミングの勉強を始めた。そして、これはそんな僕がJavaScriptを使って初めて書いたプログラム。だいたい勉強を始めて一ケ月ぐらい。もっと綺麗に書けるのだろうが、初めてならこんなものだろうと思い、ひとまず公開することにする。

仕様

• 21点を超えずに、21点により近い方が勝ち。同じ点数はドロー。
• 絵札（表示はマーク + 数字）は全て10点。Aは本来であれば、11点にも1点にもなれるが、本プログラムではAを引いた時点で11点を足しても21点を超えない場合は11点に、超える場合は1となる。それ以降で点数を変えることはできない（*改善したい）。
• ブラックジャック（Aと10点のカードの2枚で21点を作れば、他の組み合わせの21点よりも強い）はない。5枚以上で21点を作れば最強というようなものもない。純粋に21点に近いかどうかで勝敗を決める（*改善したい）。

コード

index.html

<h1>Black Jack</h1>
		<div class="container">
			<P>Computer: <span id="com_sum"></span></P>
			<table>
				<tr id="com_card">
				</tr>
			</table>
		</div>
		<div>
			<p>Result: <span id="result">----</span></p>
		</div>
		<div class="container">
			<P>You:  <span id="your_sum"></span></P>
			<table>
				<tr id="your_card">
				</tr>
			</table>
		</div>
		<div class="btn" id="reset"><p>Reset</p></div>
		<div class="btn" id="hit"><p>Hit</p></div>
		<div class="btn inactive" id="stand"><p>Stand</p></div>
		<p>Hit - 手札を一枚引く<br />
			Stand - 勝負する</p>

main.css

	body{
			text-align: center;
			background: #D3D3D3;
			font-family: "Verdana", "メイリオ", "Meirio", "sans-serif";
		}

		.container {
			height: 170px;
			width: 300px;
			padding: 5px;
			margin: 0 auto;
			background: #fff;
			border-radius: 10px;
		}

		.btn {
			display: inline-block;
			margin: 3px auto;
			width: 100px;
			padding: 0.5px;
			border-radius: 5px;
			background: #DC143C;
			box-shadow: 0 4px 0 #660000;
			cursor: pointer;
		}
		.btn.inactive {
			opacity: 0.8;
		}
		.btn:hover {
			opacity: 0.8;
		}
		.btn p {
			font-weight: bold;
			color: #fff;
		}
		td {
			border: 1px #000000 solid;
			border-collapse: separate;
			border-spacing: 2px;
			height: 50px;
			width: 32px;
		}
		#your_sum, #com_sum {
			font-weight: bold;
		}

main.js

"use strict";
		function Card (mark, num){ //トランプのクラス
			this.mark = mark;
			this.num = num;
		};

		var cards = [];
		function init(){ //トランプのカードを作成
			var x = 0;
			for (var i = 1; i <= 13; i++){
				cards[x] = new Card("♠", i);
				x++;
				cards[x] = new Card("☘", i);
				x++;
				cards[x] = new Card("❤", i);
				x++;
				cards[x] = new Card("♦", i);
				x++;
			};
		};init();

		var hit = document.getElementById('hit');
		var reset = document.getElementById('reset'); 
		var stand = document.getElementById('stand');
		var your_card = document.getElementById('your_card'); //手札
		var com_card =  document.getElementById('com_card');
		var your_sum = document.getElementById('your_sum'); //手札の合計
		var com_sum = document.getElementById('com_sum');
		var your_sum_process = 0;
		var com_sum_process = 0;
		var result = document.getElementById('result'); //結果を表示
		var record = []; //既出のカードを記録


		hit.addEventListener("click", function(){
			if (your_sum_process > 21) {return;}; //ボタンを押せなくする
			if (com_sum_process > 0) {return;}; //ボタンを押せなくする
			var draw = Math.floor(Math.random()*52); //カードを一枚ランダムに引く
			while (record.indexOf(draw) >= 0){ //重複の場合は引き直し
				draw = Math.floor(Math.random()*52);
			}; 
			var your_box = document.createElement("td"); //手札の表示
			var your_hand = document.createTextNode(cards[draw].mark + cards[draw].num);
			your_card.appendChild(your_box);
			your_box.appendChild(your_hand);
			record.push(draw); //既出カードの記録

			switch(cards[draw].num) { 
				case 11:
				case 12:
				case 13:
				your_sum_process += 10;
				break;
				case 1: //1はカードを引いた時点のみ判断可能 （*改善したい）
				if ((your_sum_process + 11) <= 21){
					your_sum_process += 11;
				} else {
					your_sum_process += 1;
				};
				break;
				default:
				your_sum_process += cards[draw].num;
				break;
			};
			your_sum.innerHTML = your_sum_process; //引いたカードを手札の合計へ
			if (your_sum_process > 21) { //disabledの修飾
				hit.className = "btn inactive";
			};
			if (your_sum_process > 0) { //disabledの修飾
				stand.className = "btn";
			};
		}); 
		
		reset.addEventListener("click", function(){ 
			location.reload();
		});

		stand.addEventListener("click", function(){ //コンピューターを起動
			if (your_sum_process === 0) {return;}; //disabled
			while (com_sum_process <= 16){ //コンピューターのhitする基準
				var draw = Math.floor(Math.random()*52); //カードを一枚ランダムに引く
				while (record.indexOf(draw) >= 0){ //既出の場合は引き直し 
					draw = Math.floor(Math.random()*52); 
				}; 
				var com_box = document.createElement("td"); 
				var com_hand = document.createTextNode(cards[draw].mark + cards[draw].num);
				com_card.appendChild(com_box);
				com_box.appendChild(com_hand);
				record.push(draw);

				switch(cards[draw].num){
					case 11:
					case 12:
					case 13:
					com_sum_process += 10;
					break;
					case 1:
					if ((com_sum_process + 11) <= 21){
						com_sum_process += 11;
					} else {
						com_sum_process += 1;
					};
					break;
					default:
					com_sum_process += cards[draw].num;
					break;
				};
				com_sum.innerHTML = com_sum_process;

				//勝敗を決める
				if (your_sum_process < 22 && your_sum_process > com_sum_process){
					result.innerHTML = "Won!";
				} else if (your_sum_process < 22 && com_sum_process > 21){
					result.innerHTML = "Won!";
				}else if (your_sum_process < 22 && your_sum_process === com_sum_process){
					result.innerHTML = "Draw!";
				} else if (your_sum_process > 21 && com_sum_process > 21){
					result.innerHTML = "Draw!";
				} else {
					result.innerHTML = "Lost!";
				};
			};
			if (com_sum_process > 0) {
				stand.className = "btn inactive";
				hit.className = "btn inactive";
			};
		});

もっとたくさん書いて上達していきたい。練習用のお題がなくて困っているところがある。誰かいい練習問題が乗っているサイトか本があれば教えてくれると嬉しい。また、何か書いたらアップする。