javascriptでゲーム開発初心者が作ってみた「スロットゲーム」javascript HTML5 CSSで初プログラミング

2017.06.01
本ブログにはプロモーションが含まれることがあります
「スロットゲーム」
ゲーム開発はまったくの初心者のぼくが作ってみました！
javascript,HTML5,CSSを駆使して初めて
「動くWebサイト」のプログラミングしましたよ。
見出し
1.javascriptゲーム開発初心者のぼくが、HTML5,CSSも駆使して初プログラミング！
2.javascriptゲーム開発プログラムのデバッグの経緯
3.助言をくださった皆様のご紹介
4.スロットゲームのソースコード公開
スポンサーリンク
ぼくはjavascriptでのゲーム開発初心者です。
javascript,HTML5,CSSを駆使して初めて「動くWebサイト」のプログラミングしました！

実は、ここまで行くのに3日かかったッ！w
なかなかjavascriptが動かなかったんですよ。
ゲーム開発初心者のぼくは、デバッグが長かったッ！w
この、プログラムのどこかに間違いがあるということッ！
1つでも間違っていたらコンピュータは動きませんからね。
デバッグといって、プログラムの間違いを探すのに丸2日ッ！
Google Chromeさんにお世話になりました。
・半角スペースがあっちゃいけないところにあったので削除
・{　で始まった箇所が閉じられていなかったので　}を追記
たったこれだけッ！w
初心者ならではのミスなのかなぁ。
どうかなぁ。
1新しいビットマップ イメージ.jpg

2.javascriptゲーム開発プログラムのデバッグの経緯

何故だッ？！
何故動かないッ？！
javascriptだけが、動かないッ！

これはHTML5の部分ッ！
単純にファイル名間違ってただけ！w
動かないッ！
スロットゲーム、動かないよぅ。。。

Google Chromeさんは優れたデバッグツール！

この直後、無事動いたのでした。
2新しいビットマップ イメージ.jpg

3.助言をくださった皆様のご紹介

初心者のぼくが、javascriptでゲーム開発。
プログラムが動いたのは、ぼくの力だけではありません。
様々な助言を頂いて解決することが出来ました。
ディ・モールト　グラッツェ！！

うかいさんは現役エンジニアの方です。
このアドバイス通りでしたよ！

かおりんさんには、中身まるごとお渡しして見てもらう予定でしたが、じぶんで解決が出来ました。
丸ごと見てくれるなんて提案、すごく嬉しかったですよッ！
忙しい中で。
また、Visual Studio Codeをツールとして勧めてくれました。
グラッツェ！

はいみさんには、精神的に励ましてもらえました。
特に、「動かないのも動いた時のスパイスみたいに捉えられると楽しいんですよね」という前向きな言葉ッ！
グラッツェ！

よっしーさんには、images⇒imgと訂正頂きました。
グラッツェ！

4.スロットゲームの遊び方とソースコード公開

スロットゲームの遊び方は下記です。
①「スロットゲームです！」をOKする
②3人寝ているので「すたーと」を押して起こす
③3人がそれぞれのスピードで表情が変わるのでタイミングよく「すとっぷ」を押す
④表情が3つ揃えば勝ち
やってみたけど、結構ムズイッ！w
ソースコードを公開しますね。
～

<!DOCTYPE html>

<html lang=”ja”>

<head>

     <meta charset=”utf-8″>

     <title>スロット</title>

<style type=”text/css”>

p{

          text-align:  center;

}

input{

     font-size:20px;

     margin:10px 0px 20px 0px;

     padding:0px 10px 0px 10px;

     border-radius:8px;

}

</style>

<script>

alert(“すろっとです！“)

var sp1;

var sp2;

var sp3;

function setImage(){

    var cg1=1;

    var cg2=0;

    var cg3=0;

    var img =[“pt1.png”,”pt2.png”,”pt3.png”,”pt4.png”,”pt5.png”];

    var loopup1=function(){

        document.getElementById(‘img1’).src = img[cg1++];

        if(cg1 > 4){

           cg1 = 0;

        }

    }

   sp1=setInterval(loopup1 ,200);

    var loopup2=function(){

        document.getElementById(‘img2’).src = img[cg2++];

        if(cg2 > 4){

           cg2 = 0;

        }

    }

   sp2=setInterval(loopup2 ,150);

    var loopup3=function(){

        document.getElementById(‘img3’).src = img[cg3++];

        if(cg3 > 4){

           cg3 = 0;

        }

    }

   sp3=setInterval(loopup3 ,100);

}      //これ！これが無かったからjavascriptうごかなかったんですよッ！
        //Chromeさんのデバッグの結果は「予期せぬところに</script>ありますよ。」でしたが
        //これが無かったために、scriptが閉じられなかったんだと思います。

function stop_slot1(){

    clearInterval(sp1);

}

function stop_slot2(){

    clearInterval(sp2);

}

function stop_slot3(){

    clearInterval(sp3);

}

</script>

</head>

<body>

<p>

    <input type=”button” value=”すたーと” onClick=”setImage( )”>

    <br><br>

    <img src=”pt0.png” id=”img1″>

    <img src=”pt0.png” id=”img2″>

    <img src=”pt0.png” id=”img3″>

    <br><br>

    <input type=”button” value=”すとっぷ１” onClick=”stop_slot1()”>

    <input type=”button” value=”すとっぷ２” onClick=”stop_slot2()”>

    <input type=”button” value=”すとっぷ３” onClick=”stop_slot3()”>

</p>

</body>

</html>

～
上記と同じフォルダに画像ファイルも、指定のファイル名で入れてください。
pt0.png
pt0.png
下記は、上からpt1.png、pt2.png、pt3.png、pt4.png、pt5.pngとファイル名付けてください。
pt1.png
pt3.png
pt4.png
pt2.png
pt5.png
以上です。
いやー本当に、javascript動いて感動しましたよッ！
またブログ書きます。
今後とも、何卒宜しくお願い申し上げます。
スポンサーリンク

コメント

タイトルとURLをコピーしました