さて、本日の運試しをやってみましょう。
サンプルプログラムコード4
<!DOCTYPE html> <!-- 運試し4 -->
<html> <!-- Fortune-04 -->
<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 img2 = new Image();
img2.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit2.png"; //大当たり画像
var ctx;
var chr; //数字
var txt ="０１２３４５６７８９";
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"/>
<input type="button" onClick="StopStart('stepper1')" 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プログラミング書法
➋あみだくじ作成法