簡単なゲームを作ってみた

# はじめに
今回、私はHTML,CSS,JavaScriptを使った簡単なゲームを作ろうと思います。
何を作ろうか考え、トランプゲームのブラックジャックにしようと思ったところ、とても難しいことに気づきました。
そこで、少し簡単になってしまいますが、自分なりにブラックジャックのルールをアレンジした**ひとりブラックジャック**というものを作っていきたいと思います。

# ブラックジャックとは
トランプを使います。
最初に2枚のカードが配られます。
プレイヤーはディーラーよりもカードの合計が21点に近づければ勝利です。21点を超えてしまうと、その時点で負けです。
2～9まではそのままの数字、10・J・Q・Kはすべて10点と数え、Aは「1点」もしくは「11点」のどちらに数えてもいいです。
（自分の作ったブラックジャックには、10・J・Q・K・Aのルールはあまり関係ありません）

# 完成形
まず完成形です。
![a1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634397/76e869ae-5945-5396-38b9-8cabce59a90c.png)
普通のブラックジャックと違う点は、相手の数を先に決めて、自分が数を追加していくというシンプルな仕組みです。
![a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634397/e8701d32-ad61-122c-f02a-b33310118601.png)
Stopを押せば結果が出ます。その前に21を超えてしまうとGameoverと表示されます。
どのボタンも1～11までの数がランダムに表示されます。×2・×3のボタンは1～11の数が×2・×3の状態で追加されます。今回は、一回目×3というボタンを押し7が21となって追加されています。

# HTML
```rb
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./main.css" rel="stylesheet">
</head>
<body>
    <h2>追加される数</h2>
    <h3 id="a">0</h3>
    <h2>現在の合計</h2>
    <h3 id="z">0</h3>
    <h2>コンピュータ</h2>
    <h3 id="k">0</h3>
    <button onclick="kadai4()">初級</button>
    <button onclick="kadai5()">中級</button>
    <button onclick="kadai6()">上級</button>
    <h1 id="s">結果待ち</h1>
    <button onclick="kadai1()">1回目</button>
    <button onclick="kadai8()">1回目×3</button>
    <button onclick="kadai2()">追加</button>
    <button onclick="kadai3()">追加×2</button>
    <button onclick="kadai7()">Stop</button>
    
    <script src="script.js"></script>
</body>
</html>
```
数字の順番がおかしくてすみません。

# CSS
<details><summary>CSS</summary>

```rb
@charset "utf-8";

body {
    text-align: center;
}

body h1 {
    color: #f33333;
}

button {
    height: 50px;
    width: 150px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background-color: #25f3e2;
    background: #14ebe0;
    border-radius: 100vh;
}
```

</details>
CSSは自分の好みで大丈夫です。

# JavaScript
```rb
let a = 0;
let z = 0;
let k = 0;

function kadai1() {
    let b = [1,2,3,4,5,6,7,8,9,10,11];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('a').innerHTML = b[c];
    document.getElementById('z').innerHTML = z += b[c];
}

function kadai2() {
    let b = [1,2,3,4,5,6,7,8,9,10,11];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('a').innerHTML = b[c];
    document.getElementById('z').innerHTML = z += b[c];
    if(z > 21) {
        document.getElementById('s').innerHTML = "Gameover";
    }
}

function kadai3() {
    let b = [1,2,3,4,5,6,7,8,9,10,11];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('a').innerHTML = b[c]*2;
    document.getElementById('z').innerHTML = z += b[c]*2;
    if(z > 21) {
        document.getElementById('s').innerHTML = "Gameover";
    }
}

function kadai4() {
    let b = [10,11,12,13,14];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('k').innerHTML = b[c];
    k += b[c];
}

function kadai5() {
    let b = [15,16,17,18];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('k').innerHTML = b[c];
    k += b[c];
}

function kadai6() {
    let b = [19,20];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('k').innerHTML = b[c];
    k += b[c];
}

function kadai7() {
    if(z > k) {
        document.getElementById('s').innerHTML = "win!!";
    } else if(z >= k) {
        document.getElementById('s').innerHTML = "draw";
    }
}

function kadai8() {
    let b = [1,2,3,4,5,6,7,8,9,10,11];
    let c = Math.floor(Math.random() * b.length);
    document.getElementById('a').innerHTML = b[c]*3;
    document.getElementById('z').innerHTML = z += b[c]*3;
    if(z > 21) {
        document.getElementById('s').innerHTML = "Gameover";
    }
}

```

# まとめ
JavaScriptを使っていい感じに完成させることができたと思います。簡単なゲームなので、あんまり面白いとは言えませんでした。もっと技術が身に着いたらちゃんとしたルールで相手もいるブラックジャックを作りたいです。
最後まで読んでくださり、ありがとうございました。