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

No:24

412

←

Prev Next

→

Side scroll run game
Developer User64｜Date and time 23/4/24 1:02:02
Build time 82.177 sec｜Game capacity 3.602KB｜

Script

Side scroll run game

Use your smartphone to move your character left and right to avoid obstacles.

If you hit an obstacle even once, it’s game over!

🏃

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>横に走るゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #00FF7F;
			font-size: 1.5em;
			font-family: Arial, sans-serif;
			color: white;
			text-align: center;
		}
		h1 {
			margin-top: 10%;
			font-size: 3em;
		}
		p{
			margin-top: 5%;
			margin-bottom: 5%;
			font-size: 2em;
			line-height: 1.5em;
		}
		#player{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 5em;
			animation: run 1s linear infinite;
			/*絵文字の使用*/
			text-shadow: 2px 2px 5px black;
		}
		/*アニメーション*/
		@keyframes run {
			0% {
				transform: translateX(-50%) scale(1);
			}
			50% {
				transform: translateX(-50%) scale(1.2);
			}
			100% {
				transform: translateX(-50%) scale(1);
			}
		}
	</style>
</head>
<body>
	<h1>横に走るゲーム</h1>
	<p>スマホで操作して、キャラクターを左右に動かして障害物を避けてください。</p>
	<p>一度でも障害物にぶつかるとゲームオーバーです！</p>
	<div id="player">🏃</div>
	<script>
		/*タッチ操作*/
		document.addEventListener('touchstart', handleTouchStart);
		document.addEventListener('touchmove', handleTouchMove);
		var xDown = null;
		var yDown = null;
		function handleTouchStart(evt) {
			xDown = evt.touches[0].clientX;
			yDown = evt.touches[0].clientY;
		};
		function handleTouchMove(evt) {
			if ( ! xDown || ! yDown ) {
				return;
			}
			var xUp = evt.touches[0].clientX;
			var yUp = evt.touches[0].clientY;
			var xDiff = xDown - xUp;
			var yDiff = yDown - yUp;
			if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
				if ( xDiff > 0 ) {
					/*左にスワイプ*/
					movePlayer(-10);
				} else {
					/*右にスワイプ*/
					movePlayer(10);
				}
			}
			xDown = null;
			yDown = null;
		};
		/*キャラクターを動かす*/
		function movePlayer(x) {
			var player = document.getElementById('player');
			var playerPosX = player.offsetLeft;
			if (playerPosX + x > window.innerWidth - player.offsetWidth) {
				/*左にはみ出したら一番右に*/
				player.style.left = (window.innerWidth - player.offsetWidth) + 'px';
			} else if (playerPosX + x < 0) {
				/*右にはみ出したら一番左に*/
				player.style.left = '0px';
			} else {
				/*その他の場合は指定した位置に移動*/
				player.style.left = (playerPosX + x) + 'px';
			}
		}
		/*ランダムな時間で障害物を生成*/
		setInterval(function(){
			var obstacle = document.createElement('div');
			obstacle.className = 'obstacle';
			obstacle.style.top = Math.random() * (window.innerHeight * 0.8 - window.innerHeight * 0.5) + 'px';
			document.body.appendChild(obstacle);
			/*障害物を動かす*/
			var intervalId = setInterval(function(){
				obstacle.style.left = (obstacle.offsetLeft - 10) + 'px';
				if(obstacle.offsetLeft + obstacle.offsetWidth < 0){
					clearInterval(intervalId);
					obstacle.parentNode.removeChild(obstacle);
				}
				/*衝突判定*/
				var player = document.getElementById('player');
				if(player.offsetLeft + player.offsetWidth > obstacle.offsetLeft &&
					player.offsetLeft < obstacle.offsetLeft + obstacle.offsetWidth &&
					player.offsetTop + player.offsetHeight > obstacle.offsetTop &&
					player.offsetTop < obstacle.offsetTop + obstacle.offsetHeight){
					alert('GAME OVER');
					location.reload();
				}
			}, 50);
		}, Math.random() * 2000 + 1000);
	</script>
</body>
</html>