Can move and jump left and right.'s game

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

No:4575

534

←

Prev Next

→

Can move and jump left and right.
Developer User3790｜Date and time 23/6/28 9:36:18
Build time 37.312 sec｜Game capacity 3.909KB｜

Script

を実装します。以下が実際のプログラムです。このコードをhtmlファイルに貼り付けて保存することで、プレイできるゲームが完成します。

😎

👹

🏁

このゲームのルールは以下の通りです。 - 左右の矢印キーでプレイヤーキャラクターを移動させます。 - 上矢印キーでプレイヤーキャラクターをジャンプさせます。 - 敵キャラクターに当たるとゲームオーバーです。 - ゴールに到達するとクリアです。 - ゲームオーバー時にはスコアが表示されます。 - クリア時にはスコアが表示されます。また、このゲームは、スマホ操作にも対応しています。スマホでプレイする場合には、左右の矢印ボタンとジャンプボタンを配置することで操作できます。

←

Prev　Next

→ 　

Back　

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

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

を実装します。

以下が実際のプログラムです。このコードをhtmlファイルに貼り付けて保存することで、プレイできるゲームが完成します。

```
<!DOCTYPE html>
<html>
<head>
	<title>左右移動＆ジャンプゲーム</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
		}
		#player {
			position: absolute;
			top: 300px;
			left: 50px;
			font-size: 40px;
			transform: scaleX(-1);
		}
		.enemy {
			position: absolute;
			top: 320px;
			left: 800px;
			font-size: 60px;
			transform: scaleX(-1);
		}
		#goal {
			position: absolute;
			top: 100px;
			left: 1600px;
			font-size: 80px;
			color: blue;
		}
	</style>
</head>
<body>
	<div id="player">😎</div>
	<div class="enemy">👹</div>
	<div id="goal">🏁</div>
	<script>
		let player = document.getElementById("player");
		let enemy = document.querySelector(".enemy");
		let goal = document.getElementById("goal");
		let isJumping = false;
		let gravity = 0.9;
		let isGameOver = false;
		let enemySpeed = 10;
		let score = 0;
		
		function control(e) {
			if (e.keyCode === 37) {
				player.style.left = parseInt(player.style.left) - 20 + "px";
				player.style.transform = "scaleX(-1)";
			} else if (e.keyCode === 39) {
				player.style.left = parseInt(player.style.left) + 20 + "px";
				player.style.transform = "scaleX(1)";
			} else if (e.keyCode === 38) {
				if(!isJumping) {
					isJumping = true;
					jump();
				}
			}
		}
		document.addEventListener("keydown", control);
		
		function jump() {
			let timerId = setInterval(function () {
				if (parseInt(player.style.top) <= 150) {
					clearInterval(timerId);
					let downTimerId = setInterval(function() {
						if (parseInt(player.style.top) >= 300) {
							clearInterval(downTimerId);
							isJumping = false;
						}
						player.style.top = parseInt(player.style.top) + 5 + "px";
					}, 20);
				}
				player.style.top = parseInt(player.style.top) - 5*gravity + "px";
			}, 20);
		}
		
		function moveEnemy() {
			let enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
			if (enemyLeft < 0) {
				score++;
				enemySpeed += 1;
				enemy.style.left = "800px";
			} else if (enemyLeft > 0 && enemyLeft < 60 && parseInt(player.style.top) >= 300) {
				gameOver();
			}
			enemy.style.left = enemyLeft - enemySpeed + "px";
		}
		let enemyTimerId = setInterval(moveEnemy, 30);
		
		function gameOver() {
			clearInterval(enemyTimerId);
			isGameOver = true;
			document.removeEventListener("keydown", control);
			alert("GAME OVER! Your score is " + score);
		}
		
		function playAgain() {
			location.reload();
		}
		
		setInterval(function() {
			let playerTop = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
			let goalLeft = parseInt(window.getComputedStyle(goal).getPropertyValue("left"));
			if (goalLeft < 100 && goalLeft > -80 && playerTop >= 50) {
				clearInterval(enemyTimerId);
				goal.style.left = "250px";
				goal.style.opacity = 0;
				setTimeout(function() {
					alert("YOU WIN! Congratulations!\n Your score is " + score);
				}, 1000);
			}
		}, 50);
		
	</script>
	<button onclick="playAgain()">Play Again</button>
</body>
</html>
```

このゲームのルールは以下の通りです。

- 左右の矢印キーでプレイヤーキャラクターを移動させます。
- 上矢印キーでプレイヤーキャラクターをジャンプさせます。
- 敵キャラクターに当たるとゲームオーバーです。
- ゴールに到達するとクリアです。
- ゲームオーバー時にはスコアが表示されます。
- クリア時にはスコアが表示されます。

また、このゲームは、スマホ操作にも対応しています。スマホでプレイする場合には、左右の矢印ボタンとジャンプボタンを配置することで操作できます。