親しみのある動物の絵柄をモチーフにした絵そろえゲームです。同じ絵が２つないし３つ現れたらファンファーレが鳴ります。くじらは幸運を呼びます。ゲームの作り方はWebプログラミング書法を参照してください。
切り換えスピード
サンプルコード6
<!DOCTYPE html> <!-- 運試し6 -->
<html> <!-- Fortune-06 -->
<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/animal10.png";
var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
var ctx;
var ch = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var color = ['red', 'green'];
var timeInterval = 60;
var timerid = setInterval('draw()', timeInterval);//!!!!!
var a = b = c = -1; //Count
var x = [122, 232, 342]; //x-position
var y = 106; //y-position
var m = 0; //dispaly a char;
var xd=12;
var yd=0;
var xx=160;
var yy=y+50;
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.font = "14px Arial"; //フォントにArial,14pxを指定
var mm = m % 10; //0-9
var t = m % 60; //t;minute
var k = Math.floor(m / 60); //60 time
ctx.fillStyle = 'white'; //塗り潰し色を白に
ctx.fillText(ch[mm], xx, yy); //テキストを塗り潰しで描画, ０～９
ctx.fillStyle = color[k % 2]; //塗り潰し色を設定
ctx.fillText(ch[mm], xx, yy); //テキストを塗り潰しで描画, ０～９
if(t==0) {xd=12;yd=0;}
if(t==18){xd=0;yd=12;}
if(t==30){xd=-12;yd=0;}
if(t==48){xd=0;yd=-12;}
xx += xd;
yy += yd;
++m;
a = NumericDisplay(0);
b = NumericDisplay(1);
c = NumericDisplay(2);
}
}
function StopStart(target){ //timeridが1以上で確定処理
var timeInterval = document.getElementById(target).value;
if(timerid){ //確定処理
var chr = 0; //はずれ音声およびcount=0;
if(a==b) ++chr;
if(b==c) ++chr;
if(c==a) ++chr;
if(chr>=2){/*alert("CHR="+chr+" A="+a+" B="+b+" C="+c);*/chr=2;}
if(chr==1){ //当たりのとき
//alert("chr="+chr+" a="+a+" b="+b+" c="+c);
if(a==7) ++chr; //ラッキーセブンの処理
if(b==7) ++chr;
if(c==7) ++chr;
if(chr >= 3) chr = 2; //おまけで大当たりに格上げ
else 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.6 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()', timeInterval);//!!!!!
m = 0; //dispaly a char;
xd=12;
yd=0;
xx=160;
yy=y+50;
}
}
function NumericDisplay(n){ //n:0~2
r = Math.floor(Math.random()*10); //0~9までの乱数を発生させる
ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
var k = Math.floor(r / 5); //0~1 2行5列
var j = r % 5; //0,1,2,3,4
ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
return r;
}
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="50" max="5000" value="60"/>
<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プログラミング書法
➋あみだくじ作成法