はじめに

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

ブラックジャックとは

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

完成形

まず完成形です。

普通のブラックジャックと違う点は、相手の数を先に決めて、自分が数を追加していくというシンプルな仕組みです。

Stopを押せば結果が出ます。その前に21を超えてしまうとGameoverと表示されます。
どのボタンも1～11までの数がランダムに表示されます。×2・×3のボタンは1～11の数が×2・×3の状態で追加されます。今回は、一回目×3というボタンを押し7が21となって追加されています。

HTML

<!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

@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;
}

CSSは自分の好みで大丈夫です。

JavaScript

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

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

はじめに

ブラックジャックとは

完成形

HTML

CSS

JavaScript

まとめ