A side-scrolling game in which needles of different heights flow from right to left at equal intervals, and the player threads the threads through the needles.'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
A side-scrolling game in which needles of different heights flow from right to left at equal intervals, and the player threads the threads through the needles.'s game | AI game creator

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

No:879

364

←

Prev Next

→

A side-scrolling game in which needles of differen..ALL
Developer User3174｜Date and time 23/6/17 21:36:21
Build time 45.178 sec｜Game capacity 4.014KB｜

Script

このゲームは、スマホでタッチ操作またはPCでマウス操作で遊べます。ゲームの目的は、等間隔で流れてくる針に、糸を通していくことです。糸を通すタイミングと針の位置が合わないと、ゲームオーバーになります。できるだけ多くの針を通して、高得点を目指しましょう！

←

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;
			overflow: hidden;
			font-size: 2em;
			background-color: #FDE6E6;
		}
		#needle {
			position: absolute;
			top: 50%;
			left: 10%;
			transform: translateY(-50%);
			height: 60%;
			width: 3%;
			background-color: #FFC5C5;
			border-radius: 10px;
			transition: all 0.1s ease;
			z-index: 1;
		}
		#thread {
			position: absolute;
			top: 50%;
			left: 8%;
			transform: translateY(-50%);
			height: 3%;
			width: 115%;
			background-color: #CCBCBC;
			z-index: 0;
		}
		#needle:active {
			transform: translate3d(30%, -50%, 0);
		}
		.needle {
			height: 50%;
			width: 3%;
			background-color: #FFC5C5;
			border-radius: 10px;
			transition: all 10s ease-in-out;
			animation: needle 10s linear infinite;
			animation-delay: var(--delay);
			z-index: 1;
		}
		@keyframes needle {
			from { transform: translate3d(100%, 0, 0); }
			to { transform: translate3d(-100%, 0, 0); }
		}
	</style>
	<script>
		window.addEventListener('load', () => {
			const needle = document.getElementById('needle');
			let isTouchInside = true;

needle.addEventListener('mousedown', (e) => {
				isTouchInside = true;
			});

document.addEventListener('mousemove', (e) => {
				if (isTouchInside) {
					needle.style.left = e.clientX + 'px';
				}
			});

document.addEventListener('mouseup', (e) => {
				isTouchInside = false;
			});

document.addEventListener('touchstart', (e) => {
				isTouchInside = true;
			});

document.addEventListener('touchmove', (e) => {
				const touch = e.touches[0];
				if (isTouchInside) {
					needle.style.left = touch.clientX + 'px';
				}
			});

document.addEventListener('touchend', (e) => {
				isTouchInside = false;
			});

const windowHeight = window.innerHeight;
			const needleHeight = needle.clientHeight;

const thread = document.getElementById('thread');
			
			const needles = [];
			for (let i = 0; i < 10; i++) {
				const needleClone = needle.cloneNode();
				needleClone.style.setProperty('--delay', (i/10) + 's');
				document.body.appendChild(needleClone);
				needles.push(needleClone);
			}

let score = 0;

let isGameOver = false;
			const gameOverScreen = document.createElement('div');
			gameOverScreen.style.position = 'absolute';
			gameOverScreen.style.top = '50%';
			gameOverScreen.style.left = '50%';
			gameOverScreen.style.transform = 'translate(-50%, -50%)';
			gameOverScreen.style.fontSize = '3em';
			gameOverScreen.innerText = 'Game Over';
			gameOverScreen.style.display = 'none';
			document.body.appendChild(gameOverScreen);

window.setInterval(() => {
				if (isGameOver) {
					return;
				}

score++;

const threadTop = Math.random() * (windowHeight - needleHeight);
				thread.style.top = threadTop + 'px';

const success = needles.some((n) => {
					const needleTop = n.getBoundingClientRect().top;
					const needleLeft = n.getBoundingClientRect().left;
					const needleHalfHeight = n.clientHeight / 2;

if (Math.abs(threadTop - needleTop - needleHalfHeight) < 10) {
						if (needleLeft <= needle.clientWidth/2) {
							n.parentNode.removeChild(n);
							const index = needles.indexOf(n);
							needles.splice(index, 1);
							return true;
						} else {
							isGameOver = true;
							gameOverScreen.style.display = 'block';
							return false;
						}
					}
				});

if (!success) {
					isGameOver = true;
					gameOverScreen.style.display = 'block';
				}
			}, 2000);
		});
	</script>
</head>
<body>
<div id="needle"></div>
<div id="thread"></div>
</body>
</html>