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

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

No:879

187

←

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>