You have a knife to k○ll the bad guys and there's a hit button's game

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

No:3483

3321

←

Prev Next

→

You have a knife to k○ll the bad guys and there's ..ALL
Developer anonymous｜Date and time 70/1/1 9:38:51
Build time unknown sec｜Game capacity 2.331KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Bad Guy Killer</title>

#gameArea {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

#badGuy {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			bottom: 0;
			animation: moveBadGuy 2s infinite;
		}

#knife {
			width: 30px;
			height: 60px;
			background-image: url('knife.png');
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			bottom: 110px;
			left: 50%;
			transform: translate(-50%, 0);
			transition: transform .2s;
		}

#hitButton {
			width: 200px;
			height: 50px;
			background-color: dodgerblue;
			color: white;
			font-size: 24px;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			margin-top: 20px;
			transition: background-color .2s;
		}

#hitButton:hover {
			background-color: blue;
		}

@keyframes moveBadGuy {
			0% {
				left: 0;
			}
			50% {
				left: 80%;
			}
			100% {
				left: 0;
			}
		}
	</style>

knife.addEventListener("click", function() {
				knife.style.transform = "translate(-50%, -40%) rotate(45deg)";
				setTimeout(function() {
					knife.style.transform = "translate(-50%, 0) rotate(0deg)";
				}, 200);
			});

hitButton.addEventListener("click", function() {
				var knifePosition = knife.getBoundingClientRect().left + knife.offsetWidth / 2;
				var badGuyPosition = badGuy.getBoundingClientRect().left + badGuy.offsetWidth / 2;

var distance = Math.abs(knifePosition - badGuyPosition);

if (distance <= 80) {
					alert("You killed the bad guy!");
					location.reload();
				} else {
					alert("You missed the bad guy. Game over!");
					location.reload();
				}
			});
		};
	</script>
</head>
<body>
	<div id="gameArea">
		<div id="badGuy"></div>
		<div id="knife"></div>
		<button id="hitButton">HIT</button>
	</div>
</body>
</html>