A game that spins like a windmill, with numbers on its wings and division by those numbers.'s game

Click here for free DL of the app version that can save data.

No:1633

340

←

Prev Next

→

A game that spins like a windmill, with numbers on..ALL
Developer User3376｜Date and time 23/6/18 20:24:00
Build time 43.118 sec｜Game capacity 3.574KB｜

Script

以下は、風車ゲームの例です。

このゲームは、風が吹いている風車の羽が回転している様子を表現し、その羽に書かれた数字で割り算をするゲームです。ゲームを始めるには、画面をタップしてください。風車の羽が回転し始め、画面を再度タップすると回転数の絶対値に応じた得点が加算されます。風の強さはランダムで変化し、得点は999点まで記録できます。風車の羽が回転している様子と、得点を表す数字は絵文字で表現されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

以下は、風車ゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>風車ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#message {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 4em;
			color: white;
			background-color: rgba(0, 0, 0, 0.5);
			text-shadow: 2px 2px 3px black;
			z-index: 1;
			opacity: 0;
			transition: opacity 0.5s;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="message"></div>
	<script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var message = document.getElementById('message');
		var isPlaying = false;
		var score = 0;
		var wind = 0.1;
		var fanSpeed = 0.0;

function resizeCanvas() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			drawFan();
		}

function drawFan() {
			var size = Math.min(canvas.width, canvas.height) / 2;
			var cx = canvas.width / 2;
			var cy = canvas.height / 2;
			var radius = size * 0.8;
			var angle = fanSpeed * 10 * Math.PI / 180;
			var fanSize = size * 0.1;
			var fanAngle = angle + Math.PI;
			var fanCx = cx + radius * Math.cos(angle);
			var fanCy = cy + radius * Math.sin(angle);
			
			ctx.beginPath();
			ctx.strokeStyle = 'white';
			ctx.lineWidth = size * 0.05;
			ctx.arc(cx, cy, radius, 0, Math.PI * 2);
			ctx.stroke();
			
			ctx.beginPath();
			ctx.fillStyle = 'white';
			ctx.moveTo(cx + fanSize * Math.cos(fanAngle), cy + fanSize * Math.sin(fanAngle));
			ctx.lineTo(cx + fanSize * Math.cos(fanAngle + 0.9 * Math.PI), cy + fanSize * Math.sin(fanAngle + 0.9 * Math.PI));
			ctx.lineTo(cx + fanSize * Math.cos(fanAngle + 1.1 * Math.PI), cy + fanSize * Math.sin(fanAngle + 1.1 * Math.PI));
			ctx.closePath();
			ctx.fill();
		}

function drawScore() {
			ctx.font = Math.min(canvas.width, canvas.height) / 10 + 'px sans-serif';
			ctx.fillStyle = 'white';
			ctx.fillText(score, 20, 60);
		}

function update() {
			if (!isPlaying) return;

fanSpeed += wind;
			if (fanSpeed >= 360) fanSpeed -= 360;

drawFan();
			drawScore();

setTimeout(update, 20);
		}

function startGame() {
			isPlaying = true;
			score = 0;
			wind = 0.1;
			fanSpeed = Math.random() * 360;
			message.style.opacity = 0;
			setTimeout(update, 20);
		}

function endGame() {
			isPlaying = false;
			message.innerHTML = 'Score: ' + score + '<br>Tap to Play Again';
			message.style.opacity = 1;
		}

window.addEventListener('resize', resizeCanvas);
		canvas.addEventListener('click', handleClick);
		resizeCanvas();
		endGame();
	</script>
</body>
</html>