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

No:344

407

←

Prev Next

→

skipping rope
Developer User2962｜Date and time 23/6/12 16:32:49
Build time 41.489 sec｜Game capacity 3.215KB｜

Script

skipping rope game

Score: 0

Outline of the jump rope game. The player jumps over the rope as it rises and、This is a game to compete for scores. Players appear from the left side of the screen and、When you touch the rope on the screen, you jump and score points. If you fail to jump over the rope or、If the player falls and goes off the screen, the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>なわとびゲーム</title>
	<meta charset="UTF-8">
</head>
<body>
	<div style="text-align: center;">
		<h1>なわとびゲーム</h1>
		<p id="score">スコア: 0</p>
		<button onclick="startGame()">スタート</button>
		<canvas id="canvas" style="border: 1px solid black;"></canvas>
	</div>
	
	<script>
		// ゲームに使用する定数
		const FPS = 60;
		const CANVAS_WIDTH = 300;
		const CANVAS_HEIGHT = 200;
		const GRAVITY = 0.1;
		const JUMP_POWER = -3.5;
		
		// ゲームに使用する変数
		let ctx, intervalId, score, player, rope;
		let isPlaying = false;
		
		// プレイヤーのクラス
		class Player {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.vy = 0;
				this.width = 20;
				this.height = 20;
			}
			
			jump() {
				this.vy = JUMP_POWER;
			}
			
			update() {
				this.y += this.vy;
				this.vy += GRAVITY;
				if(this.vy > 5) {
					this.vy = 5;
				}
			}
			
			draw() {
				ctx.fillStyle = "yellow";
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}
		}
		
		// ロープのクラス
		class Rope {
			constructor(x, y, len) {
				this.x = x;
				this.y = y;
				this.len = len;
			}
			
			update() {
				this.x += 1;
				if(this.x > CANVAS_WIDTH) {
					this.x = 0;
				}
			}
			
			draw() {
				ctx.strokeStyle = "brown";
				ctx.beginPath();
				ctx.moveTo(this.x, this.y);
				ctx.lineTo(this.x, this.y + this.len);
				ctx.stroke();
			}
			
			playerCollision(player) {
				if(player.x + player.width > this.x - 5 && player.x < this.x + 5 && player.y + player.height > this.y && player.y < this.y + this.len) {
					return true;
				} else {
					return false;
				}
			}
		}
		
		// ゲームの初期化
		function init() {
			let canvas = document.getElementById("canvas");
			canvas.width = CANVAS_WIDTH;
			canvas.height = CANVAS_HEIGHT;
			ctx = canvas.getContext("2d");
			score = 0;
			player = new Player(20, 150);
			rope = new Rope(150, 0, 80);
			isPlaying = true;
		}
		
		// ゲームのメインループ
		function loop() {
			ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
			
			rope.update();
			rope.draw();
			
			player.update();
			player.draw();
			
			if(rope.playerCollision(player)) {
				player.jump();
				score += 1;
				document.getElementById("score").textContent = "スコア: " + score;
			} else {
				if(player.y > CANVAS_HEIGHT) {
					isPlaying = false;
					alert("ゲームオーバー！ スコアは" + score + "でした。");
					clearInterval(intervalId);
				}
			}
		}
		
		// ゲームの開始
		function startGame() {
			if(!isPlaying) {
				init();
				intervalId = setInterval(loop, 1000 / FPS);
			}
		}
		
		// ゲームの終了
		function endGame() {
			isPlaying = false;
			clearInterval(intervalId);
		}
	</script>
</body>
</html>

【なわとびゲームの概要】
プレイヤーがロープを飛び越えながら上昇していき、スコアを競うゲームです。プレイヤーは画面左から登場し、画面内にあるロープに触れるとジャンプしてスコアが加算されます。ロープを飛びこえられなかったり、落下して画面外に出た場合はゲームオーバーです。