arcade game where the object is to shoot arrows at a computer screen's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
arcade game where the object is to shoot arrows at a computer screen's game | AI game creator

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

No:3324

2126

←

Prev Next

→

arcade game where the object is to shoot arrows at..ALL
Developer User3655｜Date and time 23/6/24 13:42:22
Build time 18.857 sec｜Game capacity 1.714KB｜

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>
		#gameBoard {
			width: 100%;
			min-height: 300px;
			background-color: #eee;
			display: flex;
			justify-content: center;
			align-items: center;
		}

#arrow {
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: black;
			transform: translateX(-50%);
			animation: shoot 1s ease-in-out;
		}

@keyframes shoot {
			0% {
				top: 50%;
				left: 90%;
			}
			100% {
				top: 50%;
				left: -10%;
			}
		}
	</style>
</head>
<body>
	<div id="gameBoard">
		<img src="🌳" alt="木" width="100">
		<div id="arrow"></div>
	</div>

gameBoard.addEventListener('click', shootArrow);

function shootArrow(event) {
			let x = event.clientX;
			let y = event.clientY;
			arrow.style.top = y + 'px';

setTimeout(() => {
				arrow.style.left = x + 'px';
			}, 100);

setTimeout(() => {
				arrow.style.display = 'none';
			}, 1000);
		}
	</script>
</body>
</html>