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

No:180

341

←

Prev Next

→

Jumping game with gravity facing the opposite dire..ALL
Developer User2908｜Date and time 23/6/3 23:59:44
Build time 125.729 sec｜Game capacity 4.367KB｜

Script

upside-down jump

This is an upside down world.、The game is about jumping and avoiding obstacles. The player is in the center of the screen.、Press the space key to jump. After jumping, gravity will cause you to fall automatically, but、The game is over if the player falls to the bottom of the screen. Obstacles are randomly generated and、They fall down from the top of the screen. The game is over when the player touches an obstacle. The score is calculated by the number of obstacles avoided.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html> 
<html> 
<head> 
	<title>逆さまジャンプ</title> 
	<style> 
		body { 
			margin: 0; 
			padding: 0; 
			overflow: hidden; 
			text-align: center; 
			background-color: #393E46; 
			color: #EEEEEE; 
			font-size: 3vw; 
			font-family: Arial, sans-serif; 
		} 
		canvas { 
			display: block; 
			position: absolute; 
			top: 0; 
			left: 0; 
		} 
		h1 { 
			margin-top: 10%; 
			font-size: 7vw; 
		} 
	</style> 
</head> 
<body> 
	<h1>逆さまジャンプ</h1> 
	<canvas id="canvas"></canvas> 
	<script> 
		var canvas = document.getElementById("canvas"); 
		canvas.width = window.innerWidth; 
		canvas.height = window.innerHeight; 
		var ctx = canvas.getContext("2d"); 
		
		// キー入力の設定
		var keys = { 
			space: false
		}; 
		window.addEventListener("keydown", function(e) { 
			if (e.keyCode == 32) { 
				keys.space = true; 
			} 
		}); 
		window.addEventListener("keyup", function(e) { 
			if (e.keyCode == 32) { 
				keys.space = false; 
			} 
		}); 
		
		// ジャンプの設定
		var player = { 
			x: canvas.width/2, 
			y: canvas.height/2, 
			vy: 0, 
			radius: 20, 
			color: "#00ADB5", 
			jump: function() { 
				this.vy = -10; 
			}, 
			draw: function() { 
				ctx.beginPath(); 
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); 
				ctx.fillStyle = this.color; 
				ctx.fill(); 
				ctx.closePath(); 
			} 
		}; 
		
		// プレイヤーのジャンプ
		function playerJump() { 
			if (keys.space) { 
				player.jump(); 
			} 
		} 
		
		// オブジェクトの設定
		var objects = []; 
		var objectColor = "#222831"; 
		var objectWidth = 50; 
		var objectGap = 200; 
		var objectSpeed = 5; 
		function spawnObject() { 
			var y = 0 - objectGap; 
			var width = Math.random() * (canvas.width - objectGap) + objectGap; 
			objects.push({ 
				x: 0, 
				y: y, 
				width: width, 
				height: objectWidth 
			}); 
		} 
		
		// ゲームオーバーの設定
		var gameOver = false; 
		function checkCollision() { 
			for (var i = 0; i < objects.length; i++) { 
				var o = objects[i]; 
				if (player.y - player.radius < o.y + o.height && 
					player.y + player.radius > o.y && 
					player.x - player.radius < o.x + o.width && 
					player.x + player.radius > o.x) { 
					gameOver = true; 
					break; 
				} 
			} 
		} 
		
		// ゲームループ
		var score = 0; 
		function loop() { 
			// 背景の描画
			ctx.clearRect(0, 0, canvas.width, canvas.height); 
			ctx.fillStyle = "#393E46"; 
			ctx.fillRect(0, 0, canvas.width, canvas.height); 
			
			// プレイヤーの描画
			player.draw(); 
			
			// ジャンプ
			playerJump(); 
			player.vy += 0.5; 
			player.y += player.vy; 
			if (player.y > canvas.height) { 
				gameOver = true; 
			} 
			
			// オブジェクトの描画
			for (var i = 0; i < objects.length; i++) { 
				var o = objects[i]; 
				ctx.fillStyle = objectColor; 
				ctx.fillRect(o.x, o.y, o.width, o.height); 
				o.y += objectSpeed; 
			} 
			if (objects.length > 0 && objects[0].y > canvas.height) { 
				objects.splice(0, 1); 
				score++; 
			} 
			if (objects.length == 0 || canvas.height - objects[objects.length-1].y > objectGap) { 
				spawnObject(); 
			} 
			
			// 衝突判定
			checkCollision(); 
			if (gameOver) { 
				ctx.fillStyle = "#F8B195"; 
				ctx.fillRect(0, 0, canvas.width, canvas.height); 
				ctx.fillStyle = "#EEEEEE"; 
				ctx.fillText("ゲームオーバー", canvas.width/2, canvas.height/2); 
				ctx.fillText("スコア: " + score, canvas.width/2, canvas.height/2 + 50); 
				return; 
			} 
			
			// スコアの表示
			ctx.fillStyle = "#EEEEEE"; 
			ctx.fillText("スコア: " + score, canvas.width - 150, 50); 
			
			// 次のループの呼び出し
			requestAnimationFrame(loop); 
		} 
		
		// ゲームの開始
		loop(); 
	</script> 
</body> 
</html>

これは逆さまになっている世界で、ジャンプして障害物を避けるゲームです。プレイヤーは画面の中央にいて、スペースキーを押すとジャンプします。ジャンプした後は重力によって自動的に落下しますが、画面の下に落ちるとゲームオーバーになります。障害物はランダムに生成され、画面の上から下に落ちてきます。プレイヤーが障害物に触れるとゲームオーバーになります。スコアは避けた障害物の数で計算されます。