leaving a decision to someone else (often of a meal to be selected by the chef)'s game

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

No:3531

7602

←

Prev Next

→

leaving a decision to someone else (often of a mea..ALL
Developer User3707｜Date and time 23/6/25 12:57:15
Build time 51.479 sec｜Game capacity 5.062KB｜

Script

スマホで遊べるシンプルなジャンプゲームを作ってみました。このゲームでは、タップしてキャラクターをジャンプさせて、障害物を避けて進んでいくことが目的です。こちらが実際のプログラムです。

このゲームでは、キャラクターを操作して障害物を避けて進んでいきます。キャラクターはタップすることでジャンプします。障害物に触れるとゲームオーバーになります。スコアは距離に応じて加算されます。ゲームオーバー時にはスコアが表示されます。

←

Prev　Next

→ 　

Back　

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

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

スマホで遊べるシンプルなジャンプゲームを作ってみました。このゲームでは、タップしてキャラクターをジャンプさせて、障害物を避けて進んでいくことが目的です。

こちらが実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ジャンプゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			margin: auto;
			background-color: #87ceeb;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="500"></canvas>
	<script>
		// キャンバスの取得
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// ゲームの設定
		var gameSpeed = 6;
		var jumpPower = 15;
		var gravity = 1.5;
		var score = 0;
		var obstacles = [];
		var gameover = false;

// キャラクターの設定
		var character = {
			x: 50,
			y: 200,
			size: 30,
			speed: 0,
			jump: false
		};

// 障害物の設定
		function Obstacle(x, y, width, height, speed) {
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.speed = speed;

// 障害物の描画
			this.draw = function() {
				ctx.fillStyle = "red";
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}

// 障害物の移動
			this.move = function() {
				this.x -= this.speed;
			}
		}

// キャラクターのジャンプ
		function jump() {
			character.jump = true;
			character.speed = -jumpPower;
		}

// キャラクターの移動
		function moveCharacter() {
			// ジャンプ中の場合はキャラクターを上方向に移動
			if(character.jump) {
				character.y += character.speed;
				character.speed += gravity;
				if(character.y > canvas.height - character.size) {
					character.y = canvas.height - character.size;
					character.jump = false;
				}
			}
			// 通常時はキャラクターを下方向に移動
			else {
				character.y += gravity;
				if(character.y > canvas.height - character.size) {
					character.y = canvas.height - character.size;
				}
			}
		}

// 障害物の生成
		function generateObstacle() {
			var minWidth = 20;
			var maxWidth = 80;
			var minHeight = 20;
			var maxHeight = 80;
			var obstacleWidth = Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth;
			var obstacleHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
			var obstacleX = canvas.width;
			var obstacleY = canvas.height - obstacleHeight;
			var obstacleSpeed = Math.floor(Math.random() * (gameSpeed + 1)) + gameSpeed;
			var obstacle = new Obstacle(obstacleX, obstacleY, obstacleWidth, obstacleHeight, obstacleSpeed);
			obstacles.push(obstacle);
		}

// 障害物の移動
		function moveObstacles() {
			for(var i = 0; i < obstacles.length; i++) {
				obstacles[i].move();
				if(obstacles[i].x + obstacles[i].width < 0) {
					obstacles.splice(i, 1);
					i--;
				}
			}
		}

// 衝突判定
		function checkCollision() {
			for(var i = 0; i < obstacles.length; i++) {
				if(character.x + character.size > obstacles[i].x &&
				   character.x < obstacles[i].x + obstacles[i].width &&
				   character.y + character.size > obstacles[i].y &&
				   character.y < obstacles[i].y + obstacles[i].height) {
					gameover = true;
				}
			}
		}

// スコア表示
		function showScore() {
			ctx.fillStyle = "black";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, 10, 30);
		}

// ゲームオーバー表示
		function showGameover() {
			ctx.fillStyle = "black";
			ctx.font = "40px Arial";
			ctx.fillText("Game Over", canvas.width/2 - 100, canvas.height/2);
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, canvas.width/2 - 40, canvas.height/2 + 30);
		}

// ゲームループ
		function gameLoop() {
			if(!gameover) {
				// 背景の描画
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// キャラクターの描画
				ctx.fillStyle = "yellow";
				ctx.fillRect(character.x, character.y, character.size, character.size);

// キャラクターの移動
				moveCharacter();

// 障害物の生成と移動
				if(Math.random() < 0.05) {
					generateObstacle();
				}
				moveObstacles();

// 衝突判定
				checkCollision();

// スコアの加算
				score++;
			}
			else {
				// ゲームオーバーの処理
				showGameover();
			}

// スコアの表示
			showScore();

// ゲームループの再帰呼び出し
			requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		gameLoop();

// タップでジャンプ
		canvas.addEventListener("touchstart", jump);
	</script>
</body>
</html>
```