はじめに

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

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

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

視聴したレッスン

【旧版】はじめての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」のカードではなく、「あたり」のカードを選ぶものです。

こちらから遊ぶことができます。→ ラストババ抜き

ソースコード

Githubにもあげてありますが、こちらにもそれぞれ載せておきます。

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を使ってオリジナルのものを作っていく予定なので、よろしくお願いします。

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

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

はじめに

視聴したレッスン

環境

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

ソースコード

終わりに