A game in which a character is in the middle of the screen, the screen scrolls horizontally, and obstacles are flowing by jumping to avoid them.'s game

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

No:949

150

←

Prev Next

→

A game in which a character is in the middle of th..ALL
Developer User3203｜Date and time 23/6/17 23:03:20
Build time 40.685 sec｜Game capacity 3.516KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ジャンプ！</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			border: 1px solid black;
		}
		#message {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 3em;
			color: white;
			text-align: center;
			display: none;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<div id="message"></div>
	<script>
		const c = document.getElementById("myCanvas");
		const ctx = c.getContext("2d");
		const charSize = 50;
		const charJumpSpeed = 10;
		const obstacleSpeed = 5;
		const obstacleDensity = 0.003;
		const obstacleWidth = 50;
		const obstacleHeight = 100;
		let charY = c.height - charSize;
		let charJumping = false;
		let charJumpHeight = 0;
		let obstacles = [];
		let distance = 0;
		let gameOver = false;
		let score = 0;
		
		function drawChar() {
			ctx.fillStyle = "yellow";
			ctx.fillRect(c.width / 2 - charSize / 2, charY - charJumpHeight, charSize, charSize);
		}
		
		function jumpChar() {
			if (!charJumping) {
				charJumping = true;
				charJumpHeight = 1;
			}
		}
		
		function drawObstacles() {
			for (let i = 0; i < obstacles.length; i++) {
				ctx.fillStyle = "gray";
				ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacleWidth, obstacleHeight);
			}
		}
		
		function moveObstacles() {
			for (let i = 0; i < obstacles.length; i++) {
				obstacles[i].x -= obstacleSpeed;
				if (obstacles[i].x + obstacleWidth < 0) {
					obstacles.splice(i, 1);
					i--;
				}
			}
		}
		
		function generateObstacle() {
			if (Math.random() < obstacleDensity) {
				const obstacleY = c.height - obstacleHeight;
				obstacles.push({x: c.width, y: obstacleY});
			}
		}
		
		function detectCollision() {
			for (let i = 0; i < obstacles.length; i++) {
				if (charY - charJumpHeight + charSize >= obstacles[i].y && charY - charJumpHeight <= obstacles[i].y + obstacleHeight) {
					if (c.width / 2 - charSize / 2 + charSize >= obstacles[i].x && c.width / 2 - charSize / 2 <= obstacles[i].x + obstacleWidth) {
						return true;
					}
				}
			}
			return false;
		}
		
		function clearCanvas() {
			ctx.clearRect(0, 0, c.width, c.height);
		}
		
		function drawDistance() {
			ctx.fillStyle = "white";
			ctx.font = "20px Arial";
			ctx.fillText("Distance: " + Math.floor(distance), 10, 30);
		}
		
		function drawScore() {
			ctx.fillStyle = "white";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, c.width - 110, 30);
		}
		
		function gameOverScreen() {
			ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
			ctx.fillRect(0, 0, c.width, c.height);
			ctx.fillStyle = "white";
			ctx.font = "50px Arial";
			ctx.fillText("GAME OVER", c.width / 2, c.height / 2 - 25);
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, c.width / 2, c.height / 2 + 25);
		}
		
		function gameLoop() {
			if (gameOver) {
				gameOverScreen();
				return;
			}
			clearCanvas();
			drawChar();
			drawObstacles();
			moveObstacles();
			generateObstacle();
			distance += obstacleSpeed / 10;
			if (detectCollision()) {
				gameOver = true;
			}
			score = Math.floor(distance);
			drawDistance();
			drawScore();
			if (charJumping) {
				charJumpHeight += charJumpSpeed;
				if (charJumpHeight >= charSize) {
					charJumping = false;
				}
			}
			requestAnimationFrame(gameLoop);
		}
		
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 32) { // space
				jumpChar();
			}
		});
		
		gameLoop();
	</script>
</body>
</html>