負荷の軽減を実感するを実行します。コードサイズがWebProg4と較べて95行から80行に縮小されていることをご確認ください。
サンプルプログラムコード5
<!DOCTYPE html> <!-- 運試し5 -->
<html> <!-- Fortune-05 -->
<head>
<script type="text/javascript">
var img0 = new Image(); //はずれ画像、当たり画像、大当たり画像
img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit012.png";
var img3 = new Image();
img3.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/08/SlotMCN.png";//回転ドラム画像、０～９
var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
var ctx;
var timerid = setInterval('draw()', 50);
var i = [-1, -1, -1]; //Count
var x = [122, 232, 342]; //x-position
var y = 106; //y-position
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.font = "96px Arial"; //フォントにArial,96pxを指定
NumericDisplay(0);
NumericDisplay(1);
NumericDisplay(2);
}
}
function StopStart(target){ //timeridが1以上で確定処理
if(timerid){ //確定処理
var stepVal = document.getElementById(target).value;
var chr = 0; //はずれ音声
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
if((j1==77)||(j2==707)||(j3==770)){//当たり、ファンファーレを鳴らす
chr = 2; //大当たり音声
}
else{
if((i[0]==stepVal)||(i[1]==stepVal)||(i[2]==stepVal)){
chr = 1; //当たり音声
}
}
ctx.drawImage(img0, 265*chr,0, 265,191, 150,y+10, 265,191); //当たり、はずれ画像を描画
ring(onsei[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+10, 415,y+201);//当たり、はずれ画像を消す,201=10+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までの乱数を発生させる
ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
var k = Math.floor(i[n] / 5); //0~1
var j = i[n] % 5; //0,1,2,3,4
ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
}
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="step1" name="step1" min="0" max="9" value="7"/>
<input type="button" onClick="StopStart('step1')" 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プログラミング書法
➋あみだくじ作成法