Side-scrolling game. A stickman rides a raft down a river. Rocks come down from the river, and the stickman jumps to avoid them. The longer the raft rider goes down the river, the more points he earns. The game is over when the stickman hits a rock.'s game

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

No:770

159

←

Prev Next

→

Side-scrolling game. A stickman rides a raft down ..ALL
Developer User3124｜Date and time 23/6/17 17:06:44
Build time 43.763 sec｜Game capacity 3.609KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>River Jump</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #87CEFA;
			font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
		}
		#score {
			font-size: 2em;
			text-align: center;
			color: #fff;
			text-shadow: 2px 2px #000;
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="200"></canvas>
	<div id="score">0</div>
	<script>
		// Game variables
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var speed = 2;
		var player = {
			x: 50,
			y: canvas.height - 50,
			w: 30,
			h: 30,
			jumping: false,
			jumpHeight: 100,
			jumpTime: 0,
			jumpDuration: 20
		};
		var rocks = [];

// Create rock object
		function createRock() {
			var rock = {
				x: canvas.width + 50,
				y: Math.floor(Math.random() * (canvas.height - 50)),
				w: 30,
				h: 30
			};
			rocks.push(rock);
		}

// Check collision between player and rock
		function checkCollision(player, rock) {
			if (player.x + player.w > rock.x && player.x < rock.x + rock.w && player.y + player.h > rock.y && player.y < rock.y + rock.h) {
				return true;
			} else {
				return false;
			}
		}

// Draw player
		function drawPlayer() {
			ctx.fillStyle = "yellow";
			ctx.fillRect(player.x, player.y, player.w, player.h);
		}

// Draw rock
		function drawRock(rock) {
			ctx.fillStyle = "gray";
			ctx.fillRect(rock.x, rock.y, rock.w, rock.h);
		}

// Draw background
		function drawBackground() {
			ctx.fillStyle = "#87CEFA";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "green";
			ctx.fillRect(0, canvas.height - 20, canvas.width, 20);
		}

// Draw score
		function drawScore() {
			ctx.fillStyle = "#fff";
			ctx.font = "bold 2em Segoe UI";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			ctx.fillText(score, canvas.width / 2, 30);
		}

// Game loop function
		function gameLoop() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update score
			score += 1;

// Draw background
			drawBackground();

// Draw player
			drawPlayer();

// Draw rocks
			rocks.forEach(function(rock, index) {
				drawRock(rock);

// Move rock to the left
				rock.x -= speed;

// Check collision
				if (checkCollision(player, rock)) {
					clearInterval(gameInterval);
					alert("Game over!");
				}

// Remove rock from array if it goes off screen
				if (rock.x + rock.w < 0) {
					rocks.splice(index, 1);
				}
			});

// Create new rock at random intervals
			if (Math.random() < 0.02) {
				createRock();
			}

// Make player jump
			if (player.jumping) {
				player.y -= player.jumpHeight * Math.sin(player.jumpTime * Math.PI / player.jumpDuration);
				player.jumpTime++;
				if (player.jumpTime == player.jumpDuration) {
					player.jumping = false;
					player.jumpTime = 0;
				}
			}

// Update score
			drawScore();
		}

// Start game loop
		var gameInterval = setInterval(gameLoop, 20);

// Event listener for spacebar
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 32 && !player.jumping) {
				player.jumping = true;
			}
		});

// Event listener for touch
		canvas.addEventListener("touchstart", function(event) {
			if (!player.jumping) {
				player.jumping = true;
			}
		});
	</script>
</body>
</html>