game where your a stickman that is being chased by another stickman that has a knife in his hand and if he touches you you’ll die and you have to jump over spikes to go and if your alive for 5 minutes you win's game | AI game creator

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

No:568

172

game where your a stickman that is being chased by..ALL
Developer User2996｜Date and time 23/6/15 20:47:37
Build time 50.823 sec｜Game capacity 3.81KB｜

🚶

🔪

🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵

This is the implementation of the stickman chase game as a single HTML file with JavaScript included. The player is a stickman being chased by another stickman with a knife. The stickman must jump over spikes to avoid getting killed by them. If the player survives for 5 minutes, they win the game. The game is designed to be played on a smartphone, and the player can control the stickman by tapping on the screen. The game makes use of emojis to add a fun and playful element. The game uses CSS animations to animate the stickman, knife, and spikes. JavaScript is used to move the stickman when the player taps the screen, check if the stickman collides with the knife, check if the stickman jumps over the spikes, and implement a countdown timer for the game. If the stickman collides with the knife or the spikes, the player loses the game and if the player survives for 5 minutes, they win the game.

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Stickman Chase Game</title>
	<style>
		body {
			background-color: lightblue;
			margin: 0;
			padding: 0;
			overflow: hidden;
			font-size: 60px;
			text-align: center;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		#stickman {
			position: absolute;
			bottom: 0;
			left: 50%;
			animation: run 5s linear infinite;
			transform: translateX(-50%);
			font-size: 80px;
		}

#knife {
			position: absolute;
			bottom: 0;
			left: 50%;
			animation: chase 5s linear infinite;
			transform: translateX(-50%);
			font-size: 80px;
		}

#spikes {
			position: absolute;
			bottom: 100px;
			left: 0;
			transform-origin: bottom left;
			animation: move 2s linear infinite alternate;
		}

@keyframes run {
			0% {
				transform: translateX(-50%) scaleX(1);
			}
			50% {
				transform: translateX(-50%) scaleX(-1);
			}
			100% {
				transform: translateX(-50%) scaleX(1);
			}
		}

@keyframes chase {
			0% {
				transform: translateX(-50%) rotate(0deg);
			}
			25% {
				transform: translateX(-50%) rotate(-90deg);
			}
			50% {
				transform: translateX(-50%) rotate(-180deg);
			}
			75% {
				transform: translateX(-50%) rotate(-270deg);
			}
			100% {
				transform: translateX(-50%) rotate(-360deg);
			}
		}

@keyframes move {
			0% {
				transform: translateX(-100%);
			}
			100% {
				transform: translateX(100%);
			}
		}
	</style>
	<script>
		// move the stickman on click
		document.addEventListener('click', function() {
			document.getElementById('stickman').style.bottom = '100px';
			setTimeout(function() {
				document.getElementById('stickman').style.bottom = '0';
			}, 500);
		});

// check if stickman and knife collide
		setInterval(function() {
			var stickmanBox = document.getElementById('stickman').getBoundingClientRect();
			var knifeBox = document.getElementById('knife').getBoundingClientRect();
			if (stickmanBox.bottom >= knifeBox.top && stickmanBox.right >= knifeBox.left && stickmanBox.left <= knifeBox.right) {
				alert('You Died!');
				location.reload();
			}
		}, 10);

// check if stickman jumps over spikes
		setInterval(function() {
			var stickmanBox = document.getElementById('stickman').getBoundingClientRect();
			var spikesBox = document.getElementById('spikes').getBoundingClientRect();
			if (stickmanBox.bottom >= spikesBox.top) {
				alert('You Died!');
				location.reload();
			}
		}, 10);

// countdown timer
		var count = 0;
		var counter = setInterval(timer, 1000);
		function timer() {
			count++;
			if (count >= 300) {
				alert('You Win!');
				location.reload();
			}
		}
	</script>
</head>
<body>
	<div id="stickman">🚶</div>
	<div id="knife">🔪</div>
	<div id="spikes">🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵🌵</div>
</body>
</html>

This is the implementation of the stickman chase game as a single HTML file with JavaScript included. The player is a stickman being chased by another stickman with a knife. The stickman must jump over spikes to avoid getting killed by them. If the player survives for 5 minutes, they win the game.

The game is designed to be played on a smartphone, and the player can control the stickman by tapping on the screen. The game makes use of emojis to add a fun and playful element.

The game uses CSS animations to animate the stickman, knife, and spikes. JavaScript is used to move the stickman when the player taps the screen, check if the stickman collides with the knife, check if the stickman jumps over the spikes, and implement a countdown timer for the game. If the stickman collides with the knife or the spikes, the player loses the game and if the player survives for 5 minutes, they win the game.