日別アーカイブ: 2019-08-27

くじ引きで楽しむ

ものづくり筆耕ブログ

運試し

ポイントカードで買い物したり、福引きセールでガラガラを回すときはちょっぴり胸がときめきます。市民生活における小さな息抜きは楽しいものです。

ダーツ、吹き矢、射的などで的めがけて矢を射るゲームは古今東西、多く見かけます。

ここでは、HTML、JavaScriptで小さなゲームを作って夏休みの宿題を盛り上げましょう。

▶ボタンを押下して運試しスタートです。ラッキーセブンを引き当てたらファンファーレが鳴り響きます。

7を出すコツの難易度はそこそこです。サンプルコードを末尾に挙げました。参考にしてください。






©2019 TacM,Ver0.01

🎯


▶

🌸





サンプルコード

<!DOCTYPE html>
<html>
<body>
<Div id="top" style="width:600px; height:600px; border:1px solid blue; font-size:64px; color:mediumvioletred; background-color:lightyellow;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/kujibiki2.png" width="285" height="150" style="margin-left:150px;">
<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span>
<img id="disc" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="width:360px; height:360px; margin-left:110px; margin-top:15px; transform:rotate(90deg);">
<div style="margin-left:470px; margin-top:-205px; font-size:32px;">&#x1F3AF;</div>						<!-- &#x21e6; -->
<a href="javascript:void(0)" onclick="startStop();return false;" style="text-decoration:none;">
<div id="playstop" style="margin-left:10px; margin-top:130px; font-size:64px;">&#x25b6;</div>
</a>
<div id="luckyNo" style="margin-left:460px; margin-top:-140px; font-size:96px; color:blueviolet;">&#x1F338;</div>
</Div>
<audio id="atari" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<script type="text/javascript" charset="utf-8">
var interval=40;														//回転スピード, 74 ～ 10
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("playstop").innerHTML = "\u23f9\u25b6".substr(k, 1);
	if(k==0){setTimeout('revolution()', interval);document.getElementById("top").style.backgroundColor="lightyellow";}		//停止中から開始
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%36*10+90;											//0 5 10 15 20 ～ 355,   90 ～ 440
	var e=Math.floor((d-72)/36) % 10;									//0 ～ 9
	document.getElementById("luckyNo").innerHTML = e;					//console.log("Degree=", degree, d,e);
	document.getElementById("disc").style.transform="rotate("+d+"deg)";	//回転を制御
	if((clickCount % 2)==0)	setTimeout('revolution()', interval);		//引き続き回転を制御する
	else{																//停止指令を受けた
		if(e==7){document.getElementById("atari").play();document.getElementById("top").style.backgroundColor="hotpink";}	//大当たり
	}
}
</script>
</body>
</html>