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

No:144

267

←

Prev Next

→

Throw Boomerang game
Developer ひさひさ｜Date and time 23/5/28 2:19:43
Build time 101.501 sec｜Game capacity 3.671KB｜

Script

ブーメランゲーム

ブーメランを投げて、的に当てましょう。

的に当たるとスコアが上がります。

スマホで操作してください。

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
	<meta charset="UTF-8">
	<title>ブーメランゲーム</title>
</head>
<body>
	<h1>ブーメランゲーム</h1>
	<p>ブーメランを投げて、的に当てましょう。</p>
	<p>的に当たるとスコアが上がります。</p>
	<p>スマホで操作してください。</p>
	
	<canvas id="canvas" width="320" height="480"></canvas>
	
	<script>
		// ゲームの変数
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var angle = 0;
		var power = 0;
		var target = {
			x: Math.random() * canvas.width,
			y: Math.random() * canvas.height,
			r: 20
		};
		var boomerang = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			r: 10,
			v: 0,
			angle: 0,
			turn: 0
		};
		var isDragging = false;
		var isReturning = false;

// タッチイベントの設定
		canvas.addEventListener("touchstart", function(event){
			if(!isDragging){
				isDragging = true;
				power = 0;
			}
		});
		canvas.addEventListener("touchmove", function(event){
			if(isDragging){
				// ドラッグ中はブーメランを角度と力に応じて移動させる
				angle = Math.atan2(event.touches[0].clientY - canvas.offsetTop - boomerang.y, event.touches[0].clientX - canvas.offsetLeft - boomerang.x);
				if(angle < 0){
					angle += Math.PI * 2;
				}
				power = Math.sqrt(Math.pow(event.touches[0].clientX - canvas.offsetLeft - boomerang.x, 2) + Math.pow(event.touches[0].clientY - canvas.offsetTop - boomerang.y, 2)) / 10;
				if(power > 10){
					power = 10;
				}
			}
		});
		canvas.addEventListener("touchend", function(event){
			if(isDragging){
				isDragging = false;
				isReturning = true;
			}
		});

// ゲームの関数
		function draw(){
			// canvasをクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// ブーメランを描画
			ctx.beginPath();
			ctx.arc(boomerang.x, boomerang.y, boomerang.r, 0, Math.PI * 2, false);
			ctx.fill();
			ctx.closePath();
			
			// 的を描画
			ctx.beginPath();
			ctx.arc(target.x, target.y, target.r, 0, Math.PI * 2, false);
			ctx.fill();
			ctx.closePath();
			
			// スコアを描画
			ctx.font = "bold 24px sans-serif";
			ctx.fillStyle = "#000000";
			ctx.textAlign = "left";
			ctx.fillText("Score: " + score, 10, 30);
		}
		
		function update(){
			if(isDragging){
				// ブーメランをドラッグ中の角度と力に応じて移動させる
				boomerang.angle = angle;
				boomerang.v = power;
				boomerang.turn = 0;
			}else if(isReturning){
				// ブーメランを返す
				boomerang.angle += Math.PI / 180 * 10;
				boomerang.v -= 0.1;
				if(boomerang.v <= 0){
					isReturning = false;
				}
			}else{
				// ブーメランを回転させる
				boomerang.turn += Math.PI / 180 * 10;
				boomerang.x += Math.cos(boomerang.angle) * boomerang.v;
				boomerang.y += Math.sin(boomerang.angle) * boomerang.v;
				if(Math.sqrt(Math.pow(boomerang.x - target.x, 2) + Math.pow(boomerang.y - target.y, 2)) <= boomerang.r + target.r){
					// 的に当たったらスコアを加算し、新しい的をランダムで設定する
					score++;
					target.x = Math.random() * canvas.width;
					target.y = Math.random() * canvas.height;
				}
				if(boomerang.x < -boomerang.r || boomerang.x > canvas.width + boomerang.r || boomerang.y < -boomerang.r || boomerang.y > canvas.height + boomerang.r){
					// ブーメランが画面外に出たら初期位置に戻す
					boomerang.x = canvas.width / 2;
					boomerang.y = canvas.height / 2;
					isReturning = false;
				}
			}
		}

// ゲームループ
		setInterval(function(){
			draw();
			update();
		}, 1000 / 60);
	</script>
</body>
</html>