サンプルプログラムコード2でも、システムが持つ再読み込み機能を指定すれば、再開処理を実行できましたが、確定・再開ボタンを設けることによって処理をスピードアップすることができます。
ボタンは当初、確定を待つ状態にありクリックされると再開を待つ状態に切り替わります。クリックされるたびに状態が反転します。
サンプルプログラムコード3
<!DOCTYPE html> <!-- 運試し3 -->
<html> <!-- Fortune-03 -->
<head>
<script type="text/javascript">
var img0 = new Image();
img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit0.png"; //はずれ画像
var img1 = new Image();
img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit1.png"; //当たり画像
var ctx;
var chr; //数字
var i = -1; // Count
var x = 250; // 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; //繰り返し条件
chr = txt.charAt(i);
ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
ctx.fillStyle = 'violet'; //塗り潰し色を緑に
ctx.fillText(chr, x, y); //テキストを塗り潰しで描画
}
}
function StopStart(target){ //timeridが1以上で確定処理
//alert("saveValue="+timerid);
if(timerid){ //確定処理
var stepVal = document.getElementById(target).value;
var img7 = img0;
//alert("stepVal="+stepVal+" i="+i);
if(stepVal == i){//当たり、ファンファーレを鳴らす
ctx.fillStyle = 'red'; //塗り潰し色を赤に
chr = "atari"; //当たり音声
img7 = img1;
}
else{ //はずれ
ctx.fillStyle = 'green'; //塗り潰し色を緑に
chr = "hazure"; //はずれ音声
}
ctx.drawImage (img7 , 150, 120); //当たり、はずれ画像を描画
ring(chr);
clearInterval(timerid);
timerid = 0;
}
else{ //再開処理
ctx.clearRect(150,120, 415,311); //当たり、はずれ画像を消す,211=20+191
i = 0; // Count
timerid = setInterval('draw()', 50);
}
}
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="StopStart('stepper1')" value="Stop(確定) Start(再開)" />
</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プログラミング書法
➋あみだくじ作成法