日別アーカイブ: 2015-09-23

WebProg6

親しみのある動物の絵柄をモチーフにした絵そろえゲームです。同じ絵が2つないし3つ現れたらファンファーレが鳴ります。くじらは幸運を呼びます。ゲームの作り方はWebプログラミング書法を参照してください。


切り換えスピード     

サンプルコード6
<!DOCTYPE html>   <!-- 運試し6 -->
<html>            <!-- Fortune-06 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();   //はずれ画像、当たり画像、大当たり画像
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit012.png";
    var img3 = new Image();   //動物画像、0~9
    img3.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png";
    var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
    var ctx;
    var ch = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    var color = ['red', 'green'];
    var timeInterval = 60;
    var timerid = setInterval('draw()', timeInterval);//!!!!!
    var a = b = c = -1;       //Count
    var x = [122, 232, 342];  //x-position
    var y = 106;              //y-position
    var m = 0;                //dispaly a char;
    var xd=12;
    var yd=0;
    var xx=160;
    var yy=y+50;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "14px Arial";       //フォントにArial,14pxを指定
          var mm = m % 10;  //0-9
          var t = m % 60;                //t;minute
          var k = Math.floor(m / 60);    //60 time
          ctx.fillStyle = 'white';       //塗り潰し色を白に
          ctx.fillText(ch[mm], xx, yy);  //テキストを塗り潰しで描画, 0~9
          ctx.fillStyle = color[k % 2];  //塗り潰し色を設定
          ctx.fillText(ch[mm], xx, yy);  //テキストを塗り潰しで描画, 0~9
          if(t==0) {xd=12;yd=0;}
          if(t==18){xd=0;yd=12;}
          if(t==30){xd=-12;yd=0;}
          if(t==48){xd=0;yd=-12;}
          xx += xd;
          yy += yd;
          ++m;
          a = NumericDisplay(0);
          b = NumericDisplay(1);
          c = NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      var timeInterval = document.getElementById(target).value;
      if(timerid){                      //確定処理
        var chr = 0;                    //はずれ音声およびcount=0;
        if(a==b) ++chr;
        if(b==c) ++chr;
        if(c==a) ++chr;
        if(chr>=2){/*alert("CHR="+chr+" A="+a+" B="+b+" C="+c);*/chr=2;}
        if(chr==1){                     //当たりのとき
            //alert("chr="+chr+" a="+a+" b="+b+" c="+c);
            if(a==7) ++chr;             //ラッキーセブンの処理
            if(b==7) ++chr;
            if(c==7) ++chr;
            if(chr >= 3) chr = 2;       //おまけで大当たりに格上げ
            else         chr = 1;       //当たり
        }
        ctx.drawImage(img0, 265*chr,0, 265,191, 150,y+10, 265,191);  //当たり、はずれ画像を描画
        ring(onsei[chr]);                  //音声を鳴らす
        ctx.fillStyle = 'deeppink';        //Copyright
        ctx.font = "16px Arial";           //フォントに16pxを指定
        ctx.fillText("version 1.0.0.6   copyright Aidesign, 2015", 10, 324); //Version, (c)
        clearInterval(timerid);
        timerid = 0;
      }
      else{                                //再開処理
        ctx.clearRect(150,y+10, 415,y+201);//当たり、はずれ画像を消す,201=10+191
        ctx.clearRect(10, 308, 380, 324);  //Version Numberを消す
        timerid = setInterval('draw()', timeInterval);//!!!!!
        m = 0;                //dispaly a char;
        xd=12;
        yd=0;
        xx=160;
        yy=y+50;
      }
    }
    function NumericDisplay(n){            //n:0~2
      r = Math.floor(Math.random()*10);    //0~9までの乱数を発生させる
      ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
      var k = Math.floor(r / 5);           //0~1       2行5列
      var j = r % 5;                       //0,1,2,3,4
      ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
      return r;
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas><BR>切り換えスピード
    <input type="number" id="step1" name="step1" min="50" max="5000" value="60"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('step1')" value="Stop(確定) Start(再開)"/>
  </body>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>  </div>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>  </div>
  <div><audio id="ooata" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2014/09/fanfare5.mp3"/> </audio>  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法