AI game creator

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

No:1516

135

←

Prev Next

→

Life Reversal Game
Developer User3025｜Date and time 23/6/18 17:56:55
Build time 40.514 sec｜Game capacity 3.483KB｜

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: #FCECDD;
			text-align: center;
			font-size: 30px;
			margin: 0;
		}
		canvas {
			width: 100%;
			height: 100%;
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<div>逆転させろ！ジャンプしよう！</div>

// キャンバスの設定
		let canvas = document.getElementById("myCanvas");
		let ctx = canvas.getContext("2d");

// プレイヤーの設定
		let player = {
			x: canvas.width/2,
			y: canvas.height - 20,
			radius: 15,
			speed: 7,
			jumpForce: 15,
			isJumping: false,
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
				ctx.fillStyle = "#FE4365";
				ctx.fill();
				ctx.closePath();
			},
			jump: function() {
				if(!this.isJumping) {
					this.isJumping = true;
					this.y -= this.jumpForce;
				}
			},
			move: function(direction) {
				if (direction === "left" && this.x >= this.radius) {
					this.x -= this.speed;
				}
				else if (direction === "right" && this.x <= canvas.width - this.radius) {
					this.x += this.speed;
				}
			}
		};

// 障害物の設定
		let obstacle = {
			x: canvas.width/2,
			y: 0,
			width: 100,
			height: 20,
			speed: 5,
			draw: function() {
				ctx.beginPath();
				ctx.rect(this.x, this.y, this.width, this.height);
				ctx.fillStyle = "#F5A623";
				ctx.fill();
				ctx.closePath();
			},
			update: function() {
				this.y += this.speed;
				if (this.y > canvas.height + this.height) {
					this.y = 0;
					this.x = Math.random() * (canvas.width - this.width);
					gameState.score++;
				}
				if (this.x < player.x + player.radius &&
					this.x + this.width > player.x - player.radius &&
					this.y < player.y + player.radius &&
					this.y + this.height > player.y - player.radius) {
						gameState.isGameOver = true;
				}
			}
		};

// キーボードイベントの設定
		document.addEventListener("keydown", function(event) {
			if (event.key === "ArrowLeft") {
				player.move("left");
			}
			else if (event.key === "ArrowRight") {
				player.move("right");
			}
			else if (event.key === " " || event.key === "ArrowUp") {
				player.jump();
			}
		});

// ゲームループの設定
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			player.draw();
			obstacle.draw();
			obstacle.update();
			ctx.fillText("Score: " + gameState.score, 10, 50);
			if (gameState.isGameOver) {
				ctx.fillText("Game Over", canvas.width/2 - 100, canvas.height/2);
				clearInterval(gameInterval);
			}
			if (player.isJumping) {
				player.y += player.jumpForce / 2;
				if (player.y >= canvas.height - player.radius) {
					player.isJumping = false;
				}
			}
		}
		let gameInterval = setInterval(gameLoop, 1000/60);
	</script>
</body>
</html>