福岡県筑後市のホームページ制作会社

株式会社はねオンライン

はじめてのJavaScript~ジャンケンゲームを作ってみた!~

はじめてのJavaScript~ジャンケンゲームを作ってみた!~

2018年3月8日

アプリ開発プロジェクトに向けて、JavaScriptを基礎から勉強中の佐藤です!

ドットインストールのJS無料講習を受講し終えた記念に、ジャンケンゲームを作ってみました。幼少時よくやった懐かしのアーケードゲーム『ジャンケンマン』(今でもあるところにはあるらしい)を意識してます。

ジャンケンに勝ってコインを5枚集めよう!
WIN:コイン+1 LOSE:コイン-1

START
One More!
GAME OVER
GAME CLEAR

拙いですが以下ソースコードです。本当に基礎知識のみで構成されているので、同じように初心者の方々の参考にはなる、かも…!?

(来年の今頃には「なんて未熟なコードなんだ!」と嘆いていることでしょう…)

HTML

<div class="janken-box">
        <div class="coin-area">
            <table class="t-coin">
                <tr>
                    <td>
                        <img id="coin1" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin2" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin3" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin4" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin5" src="image/coin.png">
                    </td>
                </tr>
            </table>
        </div>
        <div class="com-area">
            <img id="comHand" src="image/gu.png"></img>

            <div id="start">START</div>
            <div id="result"></div>
            <div id="oneMore">One More!</div>

        </div>

        <div class="myHand">
            <table class="t-myHand">
                <tr>
                    <td>
                        <div id="gu">
                            <img src="image/gu.png">
                        </div>
                    </td>
                    <td>
                        <div id="choki">
                            <img src="image/choki.png">
                        </div>
                    </td>
                    <td>
                        <div id="pa">
                            <img src="image/pa.png">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="gameOver">GAME OVER</div>
        <div id="clear">GAME CLEAR</div>
    </div>

CSS

<style>

.janken-box{
    position: relative;  
    margin:0 auto;
    width:80%;
    text-align:center;
    }

.janken-box  *{
    text-align:center;
    box-sizing: border-box;
    margin:0 auto;    
}

.janken-box table{
    table-layout: fixed;
    text-align:center;
    border:none;
}

.janken-box td{
    border:none;
}

.coin-area{
    background:#ddd;
    height:110px;
    border-radius: 30px;
}

.t-coin{ 
    width:100%;
}
.com-area{
    margin:20px auto;
    border:1px solid #ddd;
    box-sizing:border-box;
    position:relative;  
    width:80%;
    border-radius: 30px;  
}

.com-area img{
    width:100%;
}


.t-myHand{
     margin-top:20px;    
}

.t-myHand td{
    vertical-align:top;
    text-align:center;
}

.no-push{
    border-radius:100%;  
    background: pink;
    box-shadow: 0px 10px 2px rgba(0,0,0,0.1);
    width:80%;
}

.no-push img{
    width:100%;
}

.pushed{
    border-radius:100%;
    margin-top:10px;
    background: rgb(255, 149, 167);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    width:80%;
}
.pushed img{
    width:100%;
}

#start{
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height:200px;
    width:200px;
    background:green;
    line-height:200px;
    border-radius: 200px;
    font-weight: bold;
    font-size:20px;
    opacity: 0.8;
    color:#fff;
}

#result{ 
    position: absolute; 
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:100%;
    background:#fff;
    height:100px;
    background:#000;
     opacity:0.6;
    line-height:100px;
    color:#fff;
    font-weight: bold;
    font-size: 25px;
}

#oneMore{
    position:absolute;
    top:350px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height:150px;
    width:150px;
    background:orange;
    line-height:150px;
    border-radius: 150px;
    font-weight: bold;
    font-size:20px;
    color:#fff;
    opacity:0.8;
}

#oneMore:hover{
    opacity:0.4;
}

.active{
    display:block;
}

.hidden{
    display:none;
}

#gameOver,
#clear{
    position:absolute;
    width:80%;
    height:100px;
    top:10px;
    z-index:10;
    font-size:30px;
    color:#fff;
    line-height: 100px;
    font-weight:bold;
    opacity:0.8;
    border-radius: 20px;
    margin:auto;
    left:0;
    right:0; 
}

#clear{
    background:rgb(0, 59, 252);
}

#gameOver{
     background:rgb(252, 0, 0);
}
</style>

JavaScript

(function () {
    'use strict';
    var comHand = document.getElementById('comHand');
    var start = document.getElementById('start');
    var gu = document.getElementById('gu');
    var choki = document.getElementById('choki');
    var pa = document.getElementById('pa');
    var result = document.getElementById('result');
    var oneMore = document.getElementById('oneMore');
    var pa = document.getElementById('pa');
    var gameOver = document.getElementById('gameOver');
    var clear = document.getElementById('clear');

    var coin1 = document.getElementById('coin1');
    var coin2 = document.getElementById('coin2');
    var coin3 = document.getElementById('coin3');
    var coin4 = document.getElementById('coin4');
    var coin5 = document.getElementById('coin5');

    var coinNum;
    var comNum;
    var isStarted;

    //起動時コインは3枚表示
    coin4.className = 'hidden';
    coin5.className = 'hidden';
    coinNum = 3;
    //スタートボタンが押されているか否か
    isStarted = false;
    
    start.addEventListener('click', startSlot);
    oneMore.addEventListener('click', startSlot);
    oneMore.addEventListener('click', reset);
    gu.addEventListener('click', guFunc);
    gu.addEventListener('click', btnFunc);
    choki.addEventListener('click', chokiFunc);
    choki.addEventListener('click', btnFunc);
    pa.addEventListener('click', paFunc);
    pa.addEventListener('click', btnFunc);

    reset();

    //コインの枚数管理
    function coinState() {
        if (coinNum <= 0) {
            coinNum = 0;
            gameOver.className = 'active';
            oneMore.textContent = 'REPLAY';
            oneMore.addEventListener('click', function () {
                //ページリロード
                location.reload();
            })

        } else if (coinNum >= 5) {
            clear.className = 'active';
            oneMore.textContent = 'REPLAY';
            oneMore.addEventListener('click', function () {
                location.reload();
            })
        }
        switch (coinNum) {
            case 0:
                coin1.className = 'hidden';
                coin2.className = 'hidden';
                coin3.className = 'hidden';
                coin4.className = 'hidden';
                coin5.className = 'hidden';
                break;
            case 1:
                coin1.className = 'active';
                coin2.className = 'hidden';
                coin3.className = 'hidden';
                coin4.className = 'hidden';
                coin5.className = 'hidden';
                break;
            case 2:
                coin1.className = 'active';
                coin2.className = 'active';
                coin3.className = 'hidden';
                coin4.className = 'hidden';
                coin5.className = 'hidden';
                break;
            case 3:
                coin1.className = 'active';
                coin2.className = 'active';
                coin3.className = 'active';
                coin4.className = 'hidden';
                coin5.className = 'hidden';
                break;
            case 4:
                coin1.className = 'active';
                coin2.className = 'active';
                coin3.className = 'active';
                coin4.className = 'active';
                coin5.className = 'hidden';
                break;
            case 5:
                coin1.className = 'active';
                coin2.className = 'active';
                coin3.className = 'active';
                coin4.className = 'active';
                coin5.className = 'active';
                break;
        }
    }

    //スタート時とリセット(ワンモアを押した)時
    function reset() {
        result.className = 'hidden';
        oneMore.className = 'hidden';
        gu.className = 'no-push';
        choki.className = 'no-push';
        pa.className = 'no-push';
        gameOver.className = 'hidden';
        clear.className = 'hidden';
    }

    //gu-choki-paボタン共通処理
    function btnFunc() {
        if (isStarted === false) {
            return;
        }
        this.className = 'pushed';
        oneMore.className = 'active';
        isStarted = false;
        setTimeout(coinState, 500);
    }

    //スロット処理
    function startSlot() {
        isStarted = true;
        start.className = 'hidden';
        var id = setTimeout(startSlot, 50);
        //じゃんけんボタンを押したときの処理
        function stopSlot() {
            clearTimeout(id);
        }

        comNum = Math.floor(Math.random() * 3);
        console.log(comNum);
        switch (comNum) {
            case 0:
                comHand.src = "image/gu.png";
                break;
            case 1:
                comHand.src = "image/choki.png";
                break;
            case 2:
                comHand.src = "image/pa.png";
                break;
        }
        id;

        gu.addEventListener('click', stopSlot);
        choki.addEventListener('click', stopSlot);
        pa.addEventListener('click', stopSlot);
    }


    function guFunc() {
        if (isStarted === false) {
            return;
        }
        if (comNum === 0) {
            drawFunc();
        }
        else if (comNum === 1) {
            winFunc();
        } else {
            loseFunc();
        }
    }

    function chokiFunc() {
        if (isStarted === false) {
            return;
        }
        if (comNum === 0) {
            loseFunc();
        }
        else if (comNum === 1) {
            drawFunc();
        } else {
            winFunc();
        }
    }

    function paFunc() {
        if (isStarted === false) {
            return;
        }
        if (comNum === 0) {
            winFunc();
        }
        else if (comNum === 1) {
            loseFunc();
        } else {
            drawFunc();
        }
        btnFunc();
    }

    // 勝ち
    function winFunc() {
        result.className = 'active';
        result.textContent = 'WIN';
        coinNum++;

    }
    // 負け
    function loseFunc() {
        result.className = 'active';
        result.textContent = 'LOSE';
        coinNum--;

    }
    // あいこ
    function drawFunc() {
        result.className = 'active';
        result.textContent = 'DRAW';
    }

})();

コメントを残す