A game about avoiding incoming bombs's game

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

No:1333

←

Prev Next

→

A game about avoiding incoming bombs
Developer User3310｜Date and time 23/6/18 11:15:45
Build time 24.909 sec｜Game capacity 2.591KB｜

Script

得点：0

この爆弾避けゲームでは、黄色いプレイヤーのブロックをマウスで操作して、赤い爆弾が降ってくるのを回避します。爆弾に当たると負けになります。スマホでもプレイ可能で、得点が画面右上に表示されます。爆弾が降ってくる速度は上からspeedの値で調整可能です。

←

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: black;
		}
		#player{
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: yellow;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		#bomb{
			position: absolute;
			width: 30px;
			height: 30px;
			background-color: red;
		}
		#score{
			position: absolute;
			top: 10px;
			right: 10px;
			color: white;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="score">得点：<span id="point">0</span></div>
	<script>
		var player = document.getElementById('player');
		var score = document.getElementById('point');
		var speed = 5;
		var scoreCount = 0;
		var interval = setInterval(function(){
			var newBomb = document.createElement('div');
			newBomb.setAttribute('id', 'bomb');
			newBomb.style.left = Math.floor(Math.random() * (window.innerWidth - 30)) + 'px';
			document.body.appendChild(newBomb);
			var top = 0;
			var timer = setInterval(function(){
				top += speed;
				newBomb.style.top = top + 'px';
				if((top + 30) >= window.innerHeight){
					clearInterval(timer);
					document.body.removeChild(newBomb);
				}
				else{
					if(isCollision(player, newBomb)){
						clearInterval(timer);
						alert('ゲームオーバー！');
						clearInterval(interval);
					}
				}
			}, 50);
		}, 1000);
		
		function isCollision(obj1, obj2){
			var obj1Rect = obj1.getBoundingClientRect();
			var obj2Rect = obj2.getBoundingClientRect();
			if(obj1Rect.bottom < obj2Rect.top || obj1Rect.top > obj2Rect.bottom || obj1Rect.right < obj2Rect.left || obj1Rect.left > obj2Rect.right){
				return false;
			}
			else{
				document.body.removeChild(obj2);
				scoreCount++;
				score.innerHTML = scoreCount;
				return true;
			}
		}
		
		document.addEventListener('mousemove', function(event){
			var position = event.clientX - player.offsetWidth / 2;
			if(position < 0){
				position = 0;
			}
			else if(position > window.innerWidth - player.offsetWidth){
				position = window.innerWidth - player.offsetWidth;
			}
			player.style.left = position + 'px';
		});
	</script>
</body>
</html>