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

No:4489

6843

←

Prev Next

→

(gymnastic) rings
Developer User3694｜Date and time 23/6/28 2:11:53
Build time 35.604 sec｜Game capacity 2.796KB｜

Script

吊り輪というゲームを作ります。

吊り輪ゲーム

画面をタップすると、人形が振り子型に揺れていきます。

振り子が一定以上に揺れたら、再びタップして人形を飛ばし、リングに通すことができれば成功です。

リングに通すことができたら、次のレベルに挑戦してください。

←

Prev　Next

→ 　

Back　

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

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

吊り輪というゲームを作ります。

<!DOCTYPE html>
<html>
<head>
	<title>吊り輪ゲーム</title>
</head>
<body>
	<h1>吊り輪ゲーム</h1>
	<p>画面をタップすると、人形が振り子型に揺れていきます。</p>
	<p>振り子が一定以上に揺れたら、再びタップして人形を飛ばし、リングに通すことができれば成功です。</p>
	<p>リングに通すことができたら、次のレベルに挑戦してください。</p>
	
	<canvas id="canvas" style="border:1px solid black;"></canvas>
	
	<script>
		//変数定義
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var level = 1;
		var score = 0;
		var radius = 40;
		var swing = 0;
		var x = canvas.width / 2;
		var y = 50;
		var dx = 2;
		var dy = 0;
		var ringRadius = 60;
		var ringX = canvas.width / 2;
		var ringY = canvas.height - 100;
		var ringSpeed = 5;
		var ringDirection = 1;
		
		//マウスクリックイベント処理
		canvas.addEventListener("click", function(){
			if (swing >= 5) {
				//リングに挿入可能
				if (Math.abs(x - ringX) < ringRadius + radius && Math.abs(y - ringY) < ringRadius + radius) {
					//リングに挿入成功
					score += 1;
					if (score % 5 == 0) {
						//レベルアップ
						level += 1;
						ringSpeed += 2;
					}
					//リセット
					swing = 0;
					x = canvas.width / 2;
					y = 50;
					dx = 2;
					dy = 0;
					ringX = canvas.width / 2;
					ringDirection *= -1;
				} else {
					//リングに挿入失敗
					swing = 0;
					x = canvas.width / 2;
					y = 50;
					dx = 2;
					dy = 0;
				}
			} else {
				//飛ばす
				dx *= -1;
				dy = 8;
			}
		});
		
		//描画関数定義
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fillStyle = "red";
			ctx.fill();
			
			ctx.beginPath();
			ctx.arc(ringX, ringY, ringRadius, 0, Math.PI * 2);
			ctx.closePath();
			ctx.strokeStyle = "black";
			ctx.lineWidth = 3;
			ctx.stroke();
			
			//スコア表示
			ctx.font = "20px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + score, 10, 30);
			
			//レベル表示
			ctx.font = "20px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Level: " + level, canvas.width - 100, 30);
			
			//振り子描画
			swing += Math.abs(dx);
			x += dx;
			y += dy;
			dy += 0.4;
			
			if (x + radius >= canvas.width || x - radius <= 0) {
				dx *= -1;
			}
			
			//リング移動
			ringX += ringSpeed * ringDirection;
			if (ringX + ringRadius >= canvas.width || ringX - ringRadius <= 0) {
				ringDirection *= -1;
			}
			
			//再描画
			requestAnimationFrame(draw);
		}
		
		//初期描画
		draw();
	</script>
	
</body>
</html>