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

No:2291

2128

←

Prev Next

→

A game in which you bounce people with a car and r..ALL
Developer User3536｜Date and time 23/6/20 21:01:53
Build time 33.138 sec｜Game capacity 2.353KB｜

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>
</head>
<body>
	<h1>人飛ばしゲーム</h1>
	<p>車で人を跳ね飛ばして、飛ばした人の飛距離をスコアとして競いましょう！</p>
	
	<div id="gameScreen">
		<p id="score">0m</p>
		<img src="person.png" alt="人" id="person">
		<img src="car.png" alt="車" id="car">
	</div>
	
	<script>
		var screenWidth = window.innerWidth; //画面幅
		var carWidth = 150; //車の幅
		var personWidth = 50; //人の幅
		var carSpeed = 10; //車の速度
		var jumpPower = 60; //人が飛ぶ力
		var personPos = screenWidth/2 - personWidth/2; //人の初期位置
		var carPos = -carWidth; //車の初期位置
		var score = 0; //スコア
		
		document.getElementById("person").style.left = personPos + "px";
		document.getElementById("car").style.left = carPos + "px";
		
		document.addEventListener("touchstart", jump); //スマホでタップした時にジャンプする
		
		setInterval(moveCar, 50); //50ミリ秒ごとに車を移動させる
		
		function moveCar() {
			if (carPos > screenWidth) { //画面外に出たら車を初期位置に戻す
				carPos = -carWidth;
				score++; //スコアを1加算
				document.getElementById("score").innerHTML = score + "m"; //スコアを表示
			}
			carPos += carSpeed;
			document.getElementById("car").style.left = carPos + "px";
			
			//車と人が接触した場合
			if (carPos + carWidth > personPos && carPos < personPos + personWidth) {
				jumpPower = 0; //人が飛ばなくなる
				document.getElementById("person").src = "ouch.png"; //人の画像を「痛そうな顔」に変更
				document.removeEventListener("touchstart", jump); //ジャンプさせない
			}
		}
		
		function jump() {
			if (jumpPower > 0) { //すでに飛んでいる時はジャンプできないように
				personPos += 10;
				document.getElementById("person").style.bottom = personPos + "px";
				jumpPower--;
			}
		}
	</script>
	
	<style>
		#gameScreen {
			width: 100%;
			height: 100vh;
			background-color: lightblue;
			position: relative;
		}
		#person, #car {
			position: absolute;
			bottom: 0;
		}
		#person {
			width: 50px;
		}
		#car {
			width: 150px;
		}
		#score {
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 24px;
		}
	</style>
</body>
</html>