A side-scrolling game where you can only move by skipping. There are three stages in total, and all of them have a bo's game

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

No:1069

145

←

Prev Next

→

A side-scrolling game where you can only move by s..ALL
Developer User3233｜Date and time 23/6/18 1:31:15
Build time 58.069 sec｜Game capacity 5.174KB｜

Script

1面

2面

3面

👦

👹

👿

👺

←

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;
			background-color: #333;
			font-family: "Arial", sans-serif;
			color: #fff;
		}
		#gameArea {
			width: 100vw;
			height: 100vh;
			overflow-x: hidden;
			display: flex;
			flex-direction: row;
			position: relative;
		}
		.block {
			width: 50vw;
			height: 100vh;
			background-color: #222;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 5rem;
			font-weight: bold;
			letter-spacing: 0.5rem;
		}
		#player {
			width: 5rem;
			height: 5rem;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 50vw;
			transform: translateX(-50%);
			z-index: 1;
			cursor: pointer;
position:relative;
		}
		.boss {
			width: 10rem;
			height: 10rem;
			background-color: #f00;
			position: absolute;
			bottom: 0;
			left: 50vw;
			transform: translateX(-50%);
			z-index: 1;
		}
		#score {
			position: absolute;
			top: 5%;
			right: 5%;
			font-size: 3rem;
			font-weight: bold;
			letter-spacing: 0.3rem;
		}
	</style>
</head>
<body>
	<div id="gameArea">
		<div class="block" style="background-color: #39f;">1面</div>
		<div class="block" style="background-color: #f93;">2面</div>
		<div class="block" style="background-color: #3f9;">3面</div>
		<div id="player">👦</div>
		<div class="boss" id="boss1">👹</div>
		<div class="boss" id="boss2">👿</div>
		<div class="boss" id="boss3">👺</div>
		<div id="score">0</div>
	</div>
	<script>
		let player = document.getElementById("player");
		let boss1 = document.getElementById("boss1");
		let boss2 = document.getElementById("boss2");
		let boss3 = document.getElementById("boss3");
		let score = document.getElementById("score");
		let currentStage = 0;
		let isBossEncountered = false;
		let isBossAlive = false;
		let scoreValue = 0;

player.style.left = 0;
player.style.top = 0;

function moveLeft() {
			player.style.left = parseInt(player.style.left) - 20 + "px";
			if (parseInt(player.style.left) < 0) {
				player.style.left = "0";
			}
		}

function moveRight() {
			player.style.left = parseInt(player.style.left) + 20 + "px";
			if (parseInt(player.style.left) > window.innerWidth) {
				player.style.left = window.innerWidth;
			}
		}

setInterval(function() {
			if (!isBossEncountered) {
				let playerPos = parseInt(player.style.left);
				if (playerPos < window.innerWidth / 3) {
					currentStage = 1;
					isBossEncountered = true;
					boss1.style.animation = "boss1 1.5s linear infinite";
					setTimeout(function() {
						isBossAlive = true;
					}, 1500);
				} else if (playerPos < window.innerWidth * 2 / 3) {
					currentStage = 2;
					isBossEncountered = true;
					boss2.style.animation = "boss2 1.5s linear infinite";
					setTimeout(function() {
						isBossAlive = true;
					}, 1500);
				} else {
					currentStage = 3;
					isBossEncountered = true;
					boss3.style.animation = "boss3 1.5s linear infinite";
					setTimeout(function() {
						isBossAlive = true;
					}, 1500);
				}
			} else {
				let bossPos;
				if (currentStage === 1 && isBossAlive) {
					bossPos = parseInt(boss1.style.bottom);
					if (bossPos > window.innerHeight) {
						isBossAlive = false;
						boss1.style.animation = null;
						boss1.style.bottom = "0";
						isBossEncountered = false;
						currentStage = 0;
					}
				} else if (currentStage === 2 && isBossAlive) {
					bossPos = parseInt(boss2.style.bottom);
					if (bossPos > window.innerHeight) {
						isBossAlive = false;
						boss2.style.animation = null;
						boss2.style.bottom = "0";
						isBossEncountered = false;
						currentStage = 0;
					}
				} else if (currentStage === 3 && isBossAlive) {
					bossPos = parseInt(boss3.style.bottom);
					if (bossPos > window.innerHeight) {
						isBossAlive = false;
						boss3.style.animation = null;
						boss3.style.bottom = "0";
						isBossEncountered = false;
						currentStage = 0;
					}
				}
			}
		}, 10);
	</script>
</body>
</html>