AI game creator

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

No:90

326

←

Prev Next

→

Shoot Wave Fist
Developer ひさひさ｜Date and time 23/5/13 23:25:41
Build time 81.532 sec｜Game capacity 3.061KB｜

Script

←

Prev　Next

→ 　

Back　

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

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 type="text/css">
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #4a4a4a;
			color: white;
		}

#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 100px;
			width: 100px;
			background-color: white;
			border-radius: 50%;
			animation: player 1s infinite;
		}

#player:before,
		#player:after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 70px;
			width: 20px;
			background-color: red;
			border-radius: 10px;
		}

#player:after {
			transform-origin: top center;
			animation: arms 0.5s infinite alternate;
		}

#enemy {
			position: absolute;
			top: 50%;
			left: -100px;
			transform: translateY(-50%);
			height: 100px;
			width: 100px;
			background-color: white;
			border-radius: 50%;
			animation: enemy 2s infinite;
		}

#wave {
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translate(-50%, -50%);
			height: 10px;
			width: 50px;
			background-color: blue;
			border-radius: 10px;
			animation: wave 1s infinite;
		}

@keyframes player {
			0% { transform: translateX(-50%) scale(1); }
			50% { transform: translateX(-50%) scale(1.1); }
			100% { transform: translateX(-50%) scale(1); }
		}

@keyframes arms {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(45deg); }
		}

@keyframes enemy {
			0% { transform: translateX(-100px); }
			100% { transform: translateX(calc(100% + 100px)); }
		}

@keyframes wave {
			0% { transform: translate(-50%, -50%) scaleX(1); }
			100% { transform: translate(-50%, -50%) scaleX(10); }
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="enemy"></div>
	<div id="wave"></div>

document.addEventListener('touchstart', function(event){
			// スクロールを無効化
			event.preventDefault();

var x = event.touches[0].clientX;
			var y = event.touches[0].clientY;

if (x > window.innerWidth / 2) {
				player.style.animation = 'none';

setTimeout(function(){
					player.style.animation = 'player 1s infinite';
				}, 1000);

wave.style.left = '100%';
				wave.style.top = y + 'px';
			}
		});

setInterval(function(){
			var playerRect = player.getBoundingClientRect();
			var enemyRect = enemy.getBoundingClientRect();

if (isColliding(playerRect, enemyRect)) {
				alert('GAME OVER');
			}
		}, 10);

function isColliding(a, b) {
			return !(
				((a.top + a.height) < (b.top)) ||
				(a.top > (b.top + b.height)) ||
				((a.left + a.width) < b.left) ||
				(a.left > (b.left + b.width))
			);
		}
	</script>
</body>
</html>