プログラミング

プログラミングでスロットゲーム作成!CR春日でHTML,CSS,JavaScriptを学ぶ

ともたん

プログラミングを使ってゲームを作ってみました!
実際のコードも公開します!

CR春日というスロットゲームを作成したので共有します!

この記事は

  • プログラミングを学びたいと思っている人
  • プログラミングで何ができるのかを知りたい人
  • 副業の1つとしてプログラミングを検討している人
  • オードリーのファン

上記の人たちにおすすめです!

CR春日とは?作成時間は?

ともたんはオードリーの大ファンです。

オードリーの好きな漫才の1つに「CR春日」という漫才があります。

春日さんがパチンコ台「CR春日」をプロデュースするという設定の元、パチンコ台の機能を紹介していくという漫才です。

春日さんの様々なギャクが液晶画面で繰り広げられながらルーレットが回る様子を再現しながら、若林さんにツッコまれ笑いが生まれます。

この漫才を見ながら「プログラミングを使ってCR春日っていうゲーム作りたい!」と思い立ち、実際に作ってみたのでご紹介します!

まずは実際のゲームの様子を動画でご覧ください!

絵柄が揃わなかったときの演出からです。

次に絵柄が揃ったときの演出です。

CR春日ゲームの上部に設置されている「死んでもやめんじゃねぇぞ」はオードリーのオールナイトニッポンのコーナーの名称です。

また成功したときの演出として”あずき”で描かれた「祝」という文字を出力するようにしました。

これは実際の漫才の絵柄が揃った時に「あずき」が出てくるという設定を元に考えました。

あおたん

知らんかった〜

なおhtmlとcssとJavaScriptについてコードを読めば何をしているのか分かるけど実際のコードは書いたことがないという状態から始めて、5時間程で作成しました。

オードリー漫才ゲームCR春日の仕組み

html,css,JavaScriptで動いている

先程の動画でお見せしたCR春日ゲームはhtml,css,javascriptを用いて作成しました。

太郎くん
太郎くん
htmlって何?
ともたん

htmlはページに自分が表示したい要素を
追加する時に使われるよ。

例えば文字を表示させたい時は、
htmlを用いて「PCに文字を表示して」
という指令を出すよ。

その他にも画像なんかもhtmlで
指定してあげることで表示できるよ。

太郎くん
太郎くん
なるほどね。じゃあ、cssはどんな役割を果たしているの?
ともたん

cssは画面のデザインを
決める役割を果たしているよ!

htmlで書いた要素を横並びに並べるとか、
画像の大きさを指定するとか。

htmlと同じくcssは
webページに置いて必要不可欠な存在だよ。

太郎くん
太郎くん
なるほど!htmlとcssについては何となく分かったぞ。じゃあ最後のjavascirptって何?
ともたん

javascriptは動的に画面要素を変える時に使うよ。

今回で言うと絵柄が揃った時に、
「祝」の文字を表示させるとか。
音楽の再生なんかもjavascriptが担当しているね。

javascriptはなくても困らないけど、
使った方がよりカッコいいサイトに仕上がるよ。

プログラミングの学び方

以下ではCR春日で利用した実際のコードを用いながら簡単にプログラミングを解説します。

ですが、その前に簡単にプログラミングのおすすめ学習方法について解説します。

あおたん

プログラミングって
何から手をつければ良いのか
分からないよね

オンライン学習サービスで基本を学習

プログラミングの「プ」の字も分からないという方はまず、基礎を固めることをおすすめします。

基礎固めの方法として

  • 書籍
  • プログラミングスクール
  • オンライン学習サービス

など様々な手段が考えられます。

この中で僕が最もお勧めするのは「オンライン学習サービス」です。

書籍は無味乾燥すぎて学習が長続きしにくいです。

プログラミングスクールは学習サポートが充実しており、理想的な学習環境ですが、費用が高いです。(お金に余裕のある人はプログラミングスクールをおすすめします)

僕がおすすめするオンライン学習サービスは

  1. 費用が安い(1ヶ月数百円〜数千円)
  2. 効率的な学習が出来る

といったメリットがあります。

手軽にプログラミングを学べるので、興味がある人はまずオンライン学習サービスを利用してみてください。

具体的なサービスとしては以下の2つが挙げられます。

  1. Progate
  2. Udemy

Progate

1つ目のお勧めは「Progate」です。

Progateは月額1,078円(2021年5月7日現在)でお好きなコースを学習することができます。

ローコストでプログラミングの基礎が学べます。

ただ正直、実際に開発するとなるとProgateの知識だけでは不十分です。

よってProgateで基礎を固めた上でUdemyの動画講義で発展的な内容を習得することをおすすめします。

Udemy

続いておすすめなのが「Udemy」です。

Udemyは様々な講師がそれぞれの強みとする分野について動画で解説しているサービスです。

Web制作に関するコースも豊富にあります。

またProgateよりも発展的な内容のコースが沢山あります

Progateでの学習の復習と応用的な内容の理解をUdemyで行いましょう。

Udemyは定期的に割引セールをしています。70%OFFなどかなり割引されることが多々ありますので、セール期に動画を購入した方がお得です。

実際に何か作ってみる

ProgateやUdemyでの学習を終えた後は、そこで学んだ知識を用いて実際に何か作ってみましょう!

オンライン学習サービスで学んだことであっても、忘れていてコードが書けないみたいな事態に陥ることもあると思います。

そういった状況でも焦らず、もう一度調べ直せば良いです。

何回も調べている内に覚えます。

またどうやって実装すればいいのか分からない部分にも出くわすこともあります。

そんな時も、焦らず分からない部分をググリましょう!

html,css,javascriptなどの有名な言語であれば、ネット上にたくさんのノウハウが落ちています。

そのため自分が悩んでいる部分も既に他の人が解決策を提示してくれていることがほとんどです。

エラーが解決されず、禿げそうになることもあるかと思いますが、辛抱強く調べてみてください。

ともたん

プログラミングで出会う問題は
粘り強く取り組めば大抵、解決できます!

CR春日のコードからプログラミングを学ぼう!

ともたん

ここからはProgateのhtml,css,JQuery
のコースを学習し終えた人向け
です!

Progateがまだの人は読み飛ばしてください!

せっかくなのでCR春日のコードを真似しながらhtml,css,JavaScriptに対する理解を深めていきましょう!

実際のコードを全て公開します。

Progateを学習し終えた人は、コードを読みながら全体像を掴んでみてください。

なお無理に完全に理解しようとしなくていいです。

「スロットゲームが動いている仕組みを何となく理解できた」くらいの状態になれればOKと考えてください。

プログラミングは最初から完璧を目指したが故に挫折してしまう人が多いからです。

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>CR春日</title>
        <link rel="stylesheet" href="css/styless.css">
    </head>
    <body>
        <div class="logo">
            <img src="img/sinnyame.png" alt="" class="logo__img">
        </div>
        <audio src="audio/tooth.mp3" id="tooth"></audio>
        <main></main>
        <div id="spin">SPIN</div>
        <div id="azuki">
            <img src="img/azuki.png" class="azuki_logo">
        </div>
        <script src="js/main.js"></script>
    </body>
</html>

css

body {
    background: #bdc3c7;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

main {
    position: relative;
    width: 900px;
    background:#ecf0f1;
    padding:20px;
    border: 4px solid #fff;
    border-radius: 12px;
    margin: 16px auto;
    display: flex;
    justify-content: space-between;
}

.panel img{
    width: 280px;
    height: 280px;
    margin-bottom: 4px;
}

.stop {
    cursor: pointer;
    width: 280px;
    height: 45px;
    background: #ef454a;
    box-shadow: 0 4px 0 #d1283e;
    border-radius: 16px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    user-select: none;
    margin-top: 15px;
}
#spin {
    cursor: pointer;
    width: 450px;
    height: 50px;
    background: #3498db;
    box-shadow: 0 4px 0 #2880b9;
    border-radius: 18px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    user-select: none;
    margin: 50px auto;
}

.logo {
    text-align: center;
    margin: 20px auto;
    width: 100%;
}

.logo__img {
    width: 800px;
}

.unmatched {
    opacity: 0.5;
}

.inactive {
    opacity: 0.5;
}

#azuki {
    display: none;
    width: 100%;
    background-color: rgba(189, 195, 199, 0.75);
    position: absolute;
    text-align: center;
    top: 600px;
}

.azuki_logo {
    width: 60%;
}

JavaScript

'use strict';

{
    class Panel {
        constructor(){
            const section = document.createElement('section');
            section.classList.add('panel');

            this.img = document.createElement('img');
            this.img.src = this.getRandomImage();

            this.timeoutId = undefined

            this.stop = document.createElement('div');
            this.stop.textContent = 'STOP';
            this.stop.classList.add('stop', 'inactive');
            this.stop.addEventListener('click', () => {
                if (this.stop.classList.contains('inactive')){
                    return
                }

                this.stop.classList.add('inactive');
                clearTimeout(this.timeoutId);

                // 春日の場合はトゥースを流す
                this.checkKasuga();

                panelsLeft--;

                if (panelsLeft === 0){
                    panelsLeft = 3;
                    checkResult();
                    setTimeout(() => {
                        playResultMusic();
                    }, 800);
                    const result = showResult();
                    if (result === 0){
                        return
                    } else {
                        console.log(result)
                        setTimeout(() => {
                            spin.classList.remove('inactive');
                        }, 6000);
                    }

                }
            });

            section.appendChild(this.img);
            section.appendChild(this.stop);

            const main = document.querySelector('main');
            main.appendChild(section);
        }

        getRandomImage() {
            const images = [
                'img/kasuga.png',
                'img/cherry.png',
                'img/bell.png',
            ];

            return images[Math.floor(Math.random() * images.length)];
        }

        spin() {
            this.img.src = this.getRandomImage();
            this.timeoutId = setTimeout(() => {
                this.spin();
            }, 50);
        }

        isUnmatched(p1, p2) {
            return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
        }

        unmatch() {
            this.img.classList.add('unmatched');
        }

        activate() {
            this.img.classList.remove('unmatched');
            this.stop.classList.remove('inactive');
        }

        isKasuga() {
            return this.img.src === "http://kasugamasami.html.xdomain.jp/img/kasuga.png"
        }

        checkKasuga(){
            if (this.isKasuga()) {
                const bgmKasuga = new Audio("audio/tooth.mp3");
                bgmKasuga.play();
            }
        }
    }

    function checkResult(){
        if (panels[0].isUnmatched(panels[1], panels[2])) {
            panels[0].unmatch();
        }
        if (panels[1].isUnmatched(panels[0], panels[2])) {
            panels[1].unmatch();
        }
        if (panels[2].isUnmatched(panels[0], panels[1])) {
            panels[2].unmatch();
        }
    }

    function playResultMusic() {
        if (panels[0].img.src === panels[1].img.src && panels[0].img.src === panels[2].img.src){
            document.getElementById("azuki").style.display ="block"
            const bgmSuccessful = new Audio("audio/success.mp3");
            bgmSuccessful.play();
            this.spin.classList.add('inactive');
        } else {
            const bgmFailure = new Audio("audio/failure.mp3");
            bgmFailure.play();
        }
    }

    function showResult() {
        if (panels[0].img.src === panels[1].img.src && panels[0].img.src === panels[2].img.src){
            return 0
        } else {
            return 1
        }
    }

    const panels = [
        new Panel(),
        new Panel(),
        new Panel(),
    ];

    let panelsLeft = 3;

    this.spin = document.getElementById('spin');
    this.spin.addEventListener('click', () => {
        if (this.spin.classList.contains('inactive')){
            return;
        }
        const bgmStart = new Audio("audio/start.mp3");
        bgmStart.play();

        this.spin.classList.add('inactive');
        panels.forEach(panel => {
            setTimeout(() => {
                panel.activate();
                panel.spin();
            }, 2500);
        });
    });
}

CR春日の技術って副業に活かせるの?

今回CR春日で利用した技術はhtml,css,JavaScriptでした。

これらの言語はweb制作において必須の技術となります。

そして副業案件として多いのはweb制作です。

副業としてプログラミングで稼ぎたい時に、html,css,JavaScriptを学ぶのは非常におすすめです。

僕自身もこれらの技術を使ってweb制作の案件を個人で請け負い、収入を得たことがあります。

まとめ

プログラミングを用いてCR春日ゲームを作った話を紹介しました。

プログラミングは学習への心理的ハードルは高いものの、学習してみると意外と難しくありません。

特にhtml,css,javascriptを用いたweb制作は学習時間をきちんと確保できれば、マスターできます。

学習のコツは自分の作りたい物を決めて、手を動かしてみることです。

楽しみながら知識を深めていきましょう!