WebProg5

負荷の軽減を実感するを実行します。コードサイズがWebProg4と較べて95行から80行に縮小されていることをご確認ください。


    

サンプルプログラムコード5

<!DOCTYPE html>   <!-- 運試し5 -->
<html>            <!-- Fortune-05 -->
  <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();
    img3.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/08/SlotMCN.png";//回転ドラム画像、0~9
    var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
    var ctx;
    var timerid = setInterval('draw()', 50);
    var i = [-1, -1, -1];     //Count
    var x = [122, 232, 342];  //x-position
    var y = 106;              //y-position
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにArial,96pxを指定
          NumericDisplay(0);
          NumericDisplay(1);
          NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      if(timerid){                      //確定処理
        var stepVal = document.getElementById(target).value;
        var chr = 0;                    //はずれ音声
        var j1 = i[1]*10+i[2];          //x77
        var j2 = i[0]*100+i[2];         //7x7
        var j3 = i[0]*100+i[1]*10;      //77x
        if((j1==77)||(j2==707)||(j3==770)){//当たり、ファンファーレを鳴らす
            chr = 2;                    //大当たり音声
        }
        else{
          if((i[0]==stepVal)||(i[1]==stepVal)||(i[2]==stepVal)){
            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.4   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()', 50);
      }
    }
    function NumericDisplay(n){            //n:0~2
      i[n] = Math.floor(Math.random()*10); //0~9までの乱数を発生させる
      ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
      var k = Math.floor(i[n] / 5);        //0~1
      var j = i[n] % 5;                    //0,1,2,3,4
      ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
    }
    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="0" max="9" value="7"/>
    &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プログラミング書法
➋あみだくじ作成法

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください