クリックして出る目は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 ="０１２３４５６７８９";
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"/> <input type="button" onClick="saveValue('stepper1')" value="確定" />
</body>
<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="hazure" preload="auto">
<source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
</div>
</html>
関連ページ
➊Webプログラミング書法
➋あみだくじ作成法