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

株式会社はねオンライン

web制作

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

2018年3月8日

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

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

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

START
One More!
GAME OVER
GAME 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 = "/wp-content/uploads/2018/03/gu.png"; break; case 1: comHand.src = "/wp-content/uploads/2018/03/choki.png"; break; case 2: comHand.src = "/wp-content/uploads/2018/03/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'; }

})();

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

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

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"> Continue reading 
続きを読む...