Micra-like rectangular stage's game

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

No:4074

←

Prev Next

→

Micra-like rectangular stage
Developer User1006｜Date and time 23/6/27 11:38:46
Build time 33.415 sec｜Game capacity 3.051KB｜

Script

を作り、プレイヤーがスマホで画面をタップすることでジャンプさせ、障害物を避けながら進む『ジャンプラン』というゲームを作成しました。以下がソースコードになります。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

を作り、プレイヤーがスマホで画面をタップすることでジャンプさせ、障害物を避けながら進む『ジャンプラン』というゲームを作成しました。

以下がソースコードになります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Jump Run</title>
	<style>
		body{
			margin:0;
			padding:0;
			overflow:hidden;
			background-color:#3a3a3a;
		}
		canvas{
			display:block;
		}
		#score{
			position:fixed;
			top:10px;
			right:10px;
			color:white;
			font-size:30px;
			font-family:sans-serif;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">0</div>
	<script>
		// キャンバスの設定
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// 初期設定
		let score = 0;
		let playerX = 100;
		let playerY = 400;
		let playerVY = 0;
		let obstacles = [
			{ x: 500, y: 470 },
			{ x: 800, y: 470 },
			{ x: 1100, y: 470 },
			{ x: 1400, y: 470 },
			{ x: 1700, y: 470 }
		];
		let gameover = false;

// キャラクターの描画
		const drawPlayer = () => {
			const size = 60;
			ctx.fillStyle = "yellow";
			ctx.fillRect(playerX, playerY - size, size, size);
		}

// 障害物の描画
		const drawObstacle = () => {
			ctx.fillStyle = "red";
			obstacles.forEach(obstacle => {
				ctx.fillRect(obstacle.x, obstacle.y, 100, 30);
			});
		}

// スコアの描画
		const drawScore = () => {
			ctx.fillStyle = "white";
			ctx.font = "30px sans-serif";
			ctx.fillText(score, canvas.width - 50, 50);
		}

// ジャンプ処理
		canvas.addEventListener("click", () => {
			if(!gameover) playerVY = -12;
		});

// ゲームループ
		const gameLoop = () => {
			// 背景の描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#3a3a3a";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// キャラクターの移動
			playerY += playerVY;
			playerVY += 0.8;

// キャラクターが画面外に出た場合
			if(playerY > canvas.height){
				gameover = true;
				ctx.fillStyle = "white";
				ctx.font = "50px sans-serif";
				ctx.fillText("GAME OVER", canvas.width / 2 - 150, canvas.height / 2 - 25);
				return;
			}

// キャラクターと障害物の当たり判定
			obstacles.forEach(obstacle => {
				if(playerX < obstacle.x + 100 && playerX + 60 > obstacle.x && playerY > obstacle.y - 60){
					gameover = true;
					ctx.fillStyle = "white";
					ctx.font = "50px sans-serif";
					ctx.fillText("GAME OVER", canvas.width / 2 - 150, canvas.height / 2 - 25);
					return;
				}
			});

// スコアの加算
			obstacles.forEach(obstacle => {
				if(obstacle.x < playerX && !obstacle.passed){
					obstacle.passed = true;
					score++;
				}
			});

// キャラクターと障害物の描画
			drawPlayer();
			drawObstacle();

// スコアの描画
			drawScore();

requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>
</html>