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

No:3364

734

←

Prev Next

→

Tuning Fork
Developer User3662｜Date and time 23/6/24 16:46:45
Build time 32.211 sec｜Game capacity 2.631KB｜

Script

音叉ゲーム

操作方法：スマホを傾けて音叉を動かす

※注意：音叉の位置が上部の壁に当たるとバグが起こるので、よけるようにプレイしてください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>音叉ゲーム</title>
	<style>
		body {
			background-color: #efefef;
			text-align: center;
		}
		canvas {
			border: 2px solid black;
			margin: 0 auto;
		}
		button {
			margin-top: 10px;
			padding: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>音叉ゲーム</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<button id="startButton">スタート</button>
	<p>操作方法：スマホを傾けて音叉を動かす</p>
	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");

// 音叉の初期位置と速度
		let x = canvas.width/2;
		let y = canvas.height-30;
		let dx = 2;
		let dy = -2;

// 移動させる関数
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.beginPath();
			ctx.arc(x, y, 10, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();

// 壁に当たったら跳ね返る処理
			if(x + dx > canvas.width-10 || x + dx < 10) {
				dx = -dx;
			}
			if(y + dy < 10) {
				dy = -dy;
			} else if(y + dy > canvas.height-20) {
				// 音叉の位置がバーと重なったら跳ね返る処理
				if(x > barX && x < barX+barWidth) {
					dy = -dy;
				} else {
					alert("ゲームオーバー");
					document.location.reload();
				}
			}

x += dx;
			y += dy;
		}

// スマホを傾けた時に音叉を移動させる処理
		window.ondevicemotion = function(event) {
			let ax = event.accelerationIncludingGravity.x * 2;
			x += ax;
			if(x < 10) {
				x = 10;
			}
			if(x > canvas.width-10) {
				x = canvas.width-10;
			}
		};

// バーの初期位置と大きさ
		let barWidth = 75;
		let barHeight = 10;
		let barX = (canvas.width-barWidth)/2;

// バーを描画する関数
		function drawBar() {
			ctx.beginPath();
			ctx.rect(barX, canvas.height-barHeight, barWidth, barHeight);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

// ゲーム開始時に呼ばれる関数
		function startGame() {
			let startButton = document.getElementById("startButton");
			startButton.style.display = "none";
			drawBar();
			setInterval(draw, 10);
		}

// スタートボタンが押された時にゲームを開始する処理
		document.getElementById("startButton").onclick = startGame;

</script>
</body>
</html>

※注意：音叉の位置が上部の壁に当たるとバグが起こるので、よけるようにプレイしてください。