ジャンル:縦スクロールアクションボタン:1.2.3.4 操作対象:適当な記号操作詳細:1を押すと、操作対象が左に1操作対象分動く。2を押すと、操作対象が上に1操作対象分動く。3を押すと、操作対象が下に1操作対象分動く。4を押すと、操作対象が右に1操作対象分動く。目的:上にあるスタートから下にあるゴールを目指す。ゴールするとクリアする。障害:「☆」が妨害キャラクターとして15体はじめに出現する。「☆」に操作対象が接触したら操作対象はスタートに戻される。プレイヤーがボタンを押すたびに「☆」が操作対象に向かって操作対象が動いた距離分移動する。's game

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

No:2602

4017

←

Prev Next

→

ジャンル:縦スクロールアクションボタン:1.2.3.4 操作対象:適当な記号操作詳細:1を..ALL
Developer User3589｜Date and time 23/6/22 2:18:20
Build time 93.241 sec｜Game capacity 3.969KB｜

Script

GOAL

😎

☆

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>縦スクロールアクションゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.outer {
			position: relative;
			width: 100%;
			height: 5000px;
			background-color: #f4f4f4;
			font-size: 30px;
			display: flex;
			justify-content: center;
		}
		.inner {
			position: relative;
			width: 100%;
			height: 100%;	
		}
		.goal {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 50px;
			padding: 20px;
			background-color: #ffd700;
			border-radius: 50px;
		}
		.char {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 50px;
			cursor: pointer;
		}
		.obstacle {
			position: absolute;
			font-size: 50px;
			cursor: pointer;
			animation: move-obstacle 2s linear infinite, change-color 1s linear infinite alternate;
		}
		@keyframes move-obstacle {
			from {left: 0;}
			to {left: 100%;}
		}
		@keyframes change-color {
			from {color: red;}
			to {color: blue;}
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<div class="goal">GOAL</div>
			<div id="char" class="char">😎</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
			<div class="obstacle">☆</div>
		</div>
	</div>
	<script>
		var char = document.getElementById("char");
		var obstacles = document.getElementsByClassName("obstacle");
		var goal = document.getElementsByClassName("goal")[0];
		var key1 = false, key2 = false, key3 = false, key4 = false;
		var charPos = {x: 50, y: 50};
		var obstaclePos = new Array(15);
		for(var i = 0; i < 15; i++){
			obstaclePos[i] = {x: -50, y: Math.random() * 4500 + 250};
		}

document.addEventListener("keydown", function(event){
			switch(event.keyCode){
				case 49: //1
					key1 = true;
					break;
				case 50: //2
					key2 = true;
					break;
				case 51: //3
					key3 = true;
					break;
				case 52: //4
					key4 = true;
					break;
			}
		});

document.addEventListener("keyup", function(event){
			switch(event.keyCode){
				case 49: //1
					key1 = false;
					break;
				case 50: //2
					key2 = false;
					break;
				case 51: //3
					key3 = false;
					break;
				case 52: //4
					key4 = false;
					break;
			}
		});

setInterval(function(){
			if(key1){
				charPos.x -= 10;
			}
			if(key2){
				charPos.y -= 10;
			}
			if(key3){
				charPos.y += 10;
			}
			if(key4){
				charPos.x += 10;
			}
			if(charPos.x + char.offsetWidth >= window.innerWidth){
				charPos.x = window.innerWidth - char.offsetWidth;
			}
			if(charPos.x <= 0){
				charPos.x = 0;
			}
			if(charPos.y + char.offsetHeight >= window.innerHeight){
				charPos.y = window.innerHeight - char.offsetHeight;
			}
			if(charPos.y <= 0){
				charPos.y = 0;
			}
			char.style.left = charPos.x + "px";
			char.style.top = charPos.y + "px";
			for(var i = 0; i < 15; i++){
				var obstacle = obstacles[i];
				obstaclePos[i].x += 2;
				obstacle.style.left = obstaclePos[i].x + "px";
				if(obstaclePos[i].x >= window.innerWidth){
					obstaclePos[i].x = -100;
					obstaclePos[i].y = Math.random() * 4500 + 250;
				}
				if(Math.abs(obstaclePos[i].x - charPos.x) < 50 && Math.abs(obstaclePos[i].y - charPos.y) < 50){
					charPos = {x: 50, y: 50};
					char.style.left = charPos.x + "px";
					char.style.top = charPos.y + "px";
				}
			}
			if(Math.abs(charPos.x - goal.offsetLeft - goal.offsetWidth/2) < 50 && Math.abs(charPos.y - goal.offsetTop - goal.offsetHeight/2) < 50){
				alert("クリア！");
				location.reload();
			}
		}, 50);
	</script>
</body>
</html>