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

No:156

271

←

Prev Next

→

Side-scrolling game of jumping pitfalls
Developer User2609｜Date and time 23/5/29 21:57:04
Build time 82.711 sec｜Game capacity 2.387KB｜

Script

落とし穴ジャンプ

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			background-color: #EEE;
			font-size: 24px;
		}
		h1{
			text-align: center;
			margin-top: 50px;
			font-size: 36px;
		}
		#canvas{
			display: block;
			margin: 0 auto;
			background-color: #FFF;
			border: 1px solid #000;
			padding: 10px;
		}
	</style>
</head>
<body>
	<h1>落とし穴ジャンプ</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<script>
		// ゲームの概要：プレイヤーは画面タップでジャンプし、落とし穴を避けながらできるだけ長く生き延びよう！
		
		// キャンバスの取得
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		// プレイヤーの初期値
		var player = {
			x: 50,
			y: 200,
			jump: false
		};
		
		// 落とし穴の初期値
		var hole = {
			x: canvas.width,
			y: Math.floor(Math.random()*(canvas.height-20))+10
		};
		
		// ジャンプのイベント処理
		canvas.addEventListener("touchstart", function(e){
			player.jump = true;
		});
		
		// 落とし穴とプレイヤーの描画処理
		function draw(){
			// 背景の描画
			ctx.fillStyle = "#EEE";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			// プレイヤーの描画
			ctx.fillStyle = "#F00";
			ctx.fillRect(player.x, player.y, 20, 20);
			// 落とし穴の描画
			ctx.fillStyle = "#00F";
			ctx.fillRect(hole.x, hole.y, 20, 20);
		}
		
		// ゲームのメインループ
		function mainLoop(){
			// プレイヤーの位置更新
			if(player.jump){
				player.y -= 10;
				if(player.y <= 50){
					player.jump = false;
				}
			}else{
				player.y += 10;
				if(player.y >= canvas.height-50){
					alert("GAME OVER");
					location.reload();
				}
			}
			// 落とし穴の位置更新
			hole.x -= 5;
			if(hole.x < -20){
				hole.x = canvas.width;
				hole.y = Math.floor(Math.random()*(canvas.height-20))+10;
			}
			// 当たり判定
			if(player.x+20 > hole.x && player.x < hole.x+20 && player.y+20 > hole.y && player.y < hole.y+20){
				alert("GAME OVER");
				location.reload();
			}
			// 画面の更新
			draw();
			// ループ処理
			window.requestAnimationFrame(mainLoop);
		}
		
		// ゲームの開始
		mainLoop();
	</script>
</body>
</html>