WebProg4

さて、本日の運試しをやってみましょう。


    

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

<!DOCTYPE html>   <!-- 運試し4 -->
<html>            <!-- Fortune-04 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();
    img0.src = "http://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit0.png"; //はずれ画像
    var img1 = new Image();
    img1.src = "http://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit1.png"; //当たり画像
    var img2 = new Image();
    img2.src = "http://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit2.png"; //大当たり画像
    var ctx;
    var chr;      //数字
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    var color = ['violet', 'blue', 'green'];
    var i = [-1, -1, -1];     // Count
    var x = [140, 250, 360];  // x-position
    var y = 90;               // y-position
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          NumericDisplay(0);
          NumericDisplay(1);
          NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      //alert("saveValue="+timerid);
      if(timerid){                      //確定処理
        var stepVal = document.getElementById(target).value;
        var img7 = img0;
        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
        //alert("stepVal="+stepVal+" j="+j);
        if((j1==77)||(j2==707)||(j3==770)){//当たり、ファンファーレを鳴らす
            chr = "ooata";                  //大当たり音声
            img7 = img2;
        }
        else{
          if((i[0]==stepVal)||(i[1]==stepVal)||(i[2]==stepVal)){
            chr = "atari";                 //当たり音声
            img7 = img1;
          }
          else{            //はずれ
            chr = "hazure";                //はずれ音声
          }
        }
        ctx.drawImage (img7 , 150, y+20);  //当たり、はずれ画像を描画
        ring(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+20, 415,y+211);//当たり、はずれ画像を消す,211=20+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までの乱数を発生させる
      chr = txt.charAt(i[n]);              //0-9
      ctx.clearRect(x[n], y-96, x[n]+96, y+10);//前描画文字を消す
      ctx.fillStyle = color[n];   //塗り潰し色を緑に
      ctx.fillText(chr, x[n], y); //テキストを塗り潰しで描画
    }
    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="stepper1" name="stepper1" min="0" max="9" value="7"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('stepper1')" value="Stop(確定) Start(再開)" />
  </body>
  <div><audio id="hazure" preload="auto">
    <source src="http://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
  <div><audio id="atari" preload="auto">
    <source src="http://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="ooata" preload="auto">
    <source src="http://aidesign.lolipop.jp/wp-content/uploads/2014/09/fanfare5.mp3"/> </audio>
  </div>
</html>
関連ページ

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

コメントを残す

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

CAPTCHA