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

No:222

529

←

Prev Next

→

a lasso
Developer User2983｜Date and time 23/6/10 21:58:23
Build time 34.215 sec｜Game capacity 2.514KB｜

Script

lasso game

In this game.、Throw me a rope with your phone.、Aim at the target. If you hit the target、Points will be scored.

Controls: Tap the screen to throw the rope.、Release your fingers and pull on the rope.

Score: 0

←

Prev　Next

→ 　

Back　

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

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>
	
	<canvas id="canvas" width="300" height="500"></canvas>
	
	<span>得点： </span><span id="score">0</span>
	
	<script>
	
	// Canvas要素を取得
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	// 初期設定
	var score = 0;
	var target = {
		x: canvas.width/2,
		y: 100,
		r: 20
	};
	var rope = {
		x: canvas.width/2,
		y: canvas.height,
		len: 0,
		maxLen: canvas.height-100,
		speed: 10,
		isMoving: false
	};
	
	// 縄を描画する関数
	function drawRope() {
		ctx.beginPath();
		ctx.moveTo(rope.x, rope.y);
		ctx.lineTo(rope.x, rope.y-rope.len);
		ctx.strokeStyle = "#000000";
		ctx.lineWidth = 5;
		ctx.stroke();
	}
	
	// 的を描画する関数
	function drawTarget() {
		ctx.beginPath();
		ctx.arc(target.x, target.y, target.r, 0, Math.PI*2);
		ctx.fillStyle = "#FF0000";
		ctx.fill();
	}
	
	// スコアを描画する関数
	function drawScore() {
		var ele = document.getElementById("score");
		ele.innerHTML = score;
	}
	
	// ゲームループ
	function gameLoop() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		// 的を描画
		drawTarget();
		
		// 縄を描画
		if (rope.isMoving) {
			if (rope.len < rope.maxLen) {
				rope.len += rope.speed;
			}
			drawRope();
		}
		
		// 当たり判定
		if (rope.isMoving && Math.sqrt(Math.pow(rope.x-target.x, 2) + Math.pow(rope.y-rope.len-target.y, 2)) < target.r) {
			score++;
			rope.isMoving = false;
			rope.len = 0;
			target.x = Math.floor(Math.random()*(canvas.width-target.r*2))+target.r;
			target.y = Math.floor(Math.random()*(canvas.height-100))+50;
		}
		
		// スコアを描画
		drawScore();
		
		// 再描画
		requestAnimationFrame(gameLoop);
	}
	
	// ゲーム開始
	gameLoop();
	
	// クリックした時の処理
	canvas.addEventListener("click", function(e) {
		rope.isMoving = true;
	});
	
	// クリック開始時の処理
	canvas.addEventListener("mousedown", function(e) {
		rope.x = e.clientX - canvas.offsetLeft;
	});
	
	// クリック終了時の処理
	canvas.addEventListener("mouseup", function(e) {
		rope.isMoving = true;
		if (rope.len == 0) {
			rope.isMoving = false;
		}
	});
	
	</script>
</body>
</html>