Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Avoid by jumping Players can jump vertically Obstacles will flow in from the side Players can avoid obstacles by jumping Obstacles will flow faster over time's game | AI game creator

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

No:1844

1031

←

Prev Next

→

Avoid by jumping Players can jump vertically Obsta..ALL
Developer User3383｜Date and time 23/6/19 6:06:56
Build time 40.929 sec｜Game capacity 3.851KB｜

Script

Jump Game

Tap to jump

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Jump Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #333;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #000;
		}
		h1 {
			font-size: 4em;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
		}
		p {
			font-size: 2em;
		}
	</style>
</head>
<body>
	<h1>Jump Game</h1>
	<canvas id="canvas" width="320" height="480"></canvas>
	<p>Tap to jump</p>
	
	<script>
		// Define canvas and context variables
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		// Define game variables
		var playerX = 50;
		var playerY = 250;
		var playerSize = 50;
		var playerSpeed = 7;
		var gravity = 0.2;
		var jumpPower = 7;
		var obstacles = [];
		var obstacleSpeed = 5;
		var obstacleFrequency = 100;
		var score = 0;
		var gameover = false;
		
		// Define player object
		var player = {
			x: playerX,
			y: playerY,
			size: playerSize,
			speed: playerSpeed,
			jumping: false,
			jumpPower: jumpPower,
			draw: function() {
				ctx.fillStyle = "#fff";
				ctx.fillRect(this.x, this.y, this.size, this.size);
			},
			jump: function() {
				if (!this.jumping) {
					this.jumping = true;
					this.speed = -this.jumpPower;
				}
			},
			update: function() {
				// Apply gravity
				this.speed += gravity;
				this.y += this.speed;
				// Check if player touches top or bottom of canvas
				if (this.y < 0) {
					this.y = 0;
					this.speed = 0;
				} else if (this.y + this.size > canvas.height) {
					this.y = canvas.height - this.size;
					this.speed = 0;
				}
				// Check if player is jumping
				if (this.jumping) {
					this.jumping = false;
				}
			}
		};
		
		// Define obstacle object
		function Obstacle() {
			this.x = canvas.width;
			this.y = Math.random() * (canvas.height - playerSize);
			this.size = playerSize;
			this.speed = obstacleSpeed;
			this.draw = function() {
				ctx.fillStyle = "#f00";
				ctx.fillRect(this.x, this.y, this.size, this.size);
			};
			this.update = function() {
				this.x -= this.speed;
				if (this.x + this.size <= 0) {
					obstacles.splice(obstacles.indexOf(this), 1);
				}
			};
		}
		
		// Define functions for game loop
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
		
		function drawScore() {
			ctx.fillStyle = "#fff";
			ctx.font = "24px Arial";
			ctx.fillText("Score: " + score, 10, 30);
		}
		
		function drawGameOver() {
			ctx.fillStyle = "#fff";
			ctx.font = "48px Arial";
			ctx.fillText("Game Over", canvas.width/2, canvas.height/2);
		}
		
		function updateGame() {
			player.update();
			for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].update();
				// Check if player collides with obstacle
				if (player.x + player.size > obstacles[i].x &&
				    player.x < obstacles[i].x + obstacles[i].size &&
				    player.y + player.size > obstacles[i].y &&
				    player.y < obstacles[i].y + obstacles[i].size) {
					gameover = true;
				}
			}
			if (gameover) {
				drawGameOver();
				return;
			}
			score++;
			// Add obstacles at random intervals
			if (score % obstacleFrequency == 0) {
				obstacles.push(new Obstacle());
				obstacleSpeed += 0.5;
				obstacleFrequency += 20;
			}
		}
		
		function drawGame() {
			player.draw();
			for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].draw();
			}
			drawScore();
		}
		
		function gameLoop() {
			clearCanvas();
			updateGame();
			drawGame();
			requestAnimationFrame(gameLoop);
		}
		
		// Start game loop
		gameLoop();
		
		// Add event listener to canvas for jumping
		canvas.addEventListener("click", function() {
			player.jump();
		});
	</script>
</body>
</html>