WebProg2

chusenkai

クリックして出る目は10種類あり選択した目が出る確率は10%です。10回に1回の大当たりは実際のところ、もっと低い確率に感じられます。


  

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

<!DOCTYPE html>   <!-- 運試し2 -->
<html>            <!-- Fortune-02 -->
  <head>
    <script type="text/javascript">
    var ctx;
    var chr;
    var i = -1;   // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          ++i;
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            chr = txt.charAt(i);
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
        }
    }
    function saveValue(target){         //確定、timeridが1以上で有効
      var stepVal = document.getElementById(target).value;
      ctx.fillStyle = 'red';            //塗り潰し色を緑に
      var pre = "当たり";
      if(stepVal == i){//当たり、ファンファーレを鳴らす
        chr = "atari";
      }
      else{            //はずれ
        chr = "hazure";
        pre = "はずれ";
      }
      ctx.fillText(pre, x, 250);        //前描画文字を消す
      ring(chr);
      //document.write("Value="+stepVal+" i="+i);
      clearInterval(timerid);
    }
    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;<input type="button" onClick="saveValue('stepper1')" value="確定" />
  </body>
  <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="hazure" preload="auto">
    <source src="http://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
</html>
関連ページ

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

コメントを残す

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

CAPTCHA