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

No:1844

987

←

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>