function MainComponent() { React.useEffect(()=>{ let snakeBodies = []; let lastMoveTime = Date.now(); let score = 0; const snakehead = document.getElementById('snakehead'); const scoreDisplay = document.getElementById('score'); const initialPosition = { x: window.innerWidth / 2 - 25, y: window.innerHeight / 2 - 25 }; let positions = Array.from({ length: 1 }).fill(initialPosition); let gameStartTime = Date.now(); let gracePeriod = 3000; snakehead.style.transform = `translate(${initialPosition.x}px, ${initialPosition.y}px)`; function getRandomPosition() { const x = Math.floor(Math.random() * (window.innerWidth - 50)); const y = Math.floor(Math.random() * (window.innerHeight - 50)); return { x, y }; } function placeApple() { const apple = document.getElementById('apple'); const position = getRandomPosition(); apple.style.transform = `translate(${position.x}px, ${position.y}px)`; } function checkCollision(rect1, rect2) { return !(rect1.top > rect2.bottom || rect1.bottom < rect2.top || rect1.left > rect2.right || rect1.right < rect2.left); } function checkWallCollision(x, y) { return x < 0 || x > window.innerWidth - 50 || y < 0 || y > window.innerHeight - 50; } function createSnakeBody() { const snakebody = document.createElement('img'); snakebody.setAttribute('src', 'img/snakebody.jpg'); snakebody.setAttribute('alt', 'Snakebody'); snakebody.classList.add('w-[100px]', 'h-[100px]', 'absolute', 'rounded-full', 'transition-transform', 'duration-206', 'ease'); document.body.appendChild(snakebody); snakeBodies.push(snakebody); positions.push({ x: 0, y: 0 }); } function gameOver() { document.getElementById('gameOverMessage').style.display = 'block'; document.removeEventListener('mousemove', handleMove); document.removeEventListener('touchmove', handleMove); let highScores = JSON.parse(localStorage.getItem('highScores')) || [ 0 ]; const highestScore = Math.max(...highScores, score); localStorage.setItem('highScores', JSON.stringify([ highestScore ])); console.log('Game Over:', highestScore); } function updateSnakePosition(x, y) { if (Date.now() - gameStartTime > gracePeriod) { if (checkWallCollision(x, y)) { gameOver(); return; } } const newPos = { x, y }; positions.unshift(newPos); positions.pop(); snakehead.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`; for(let i = 0; i < snakeBodies.length; i++){ const pos = positions[i + 1]; if (pos) { snakeBodies[i].style.transform = `translate(${pos.x}px, ${pos.y}px)`; } } const apple = document.getElementById('apple'); const snakeRect = snakehead.getBoundingClientRect(); const appleRect = apple.getBoundingClientRect(); if (checkCollision(snakeRect, appleRect)) { placeApple(); createSnakeBody(); score += 100; } score += 1; scoreDisplay.textContent = `スコア: ${score}`; } function handleMove(e) { let x, y; if (e.type === 'mousemove') { x = e.clientX; y = e.clientY; } else if (e.type === 'touchmove') { e.preventDefault(); const touch = e.touches[0]; x = touch.clientX; y = touch.clientY; } updateSnakePosition(x, y); lastMoveTime = Date.now(); } document.addEventListener('mousemove', handleMove); document.addEventListener('touchmove', handleMove); placeApple(); const interval = setInterval(()=>{ if (Date.now() - lastMoveTime > 1000 && Date.now() - gameStartTime > gracePeriod) { gameOver(); clearInterval(interval); // Stop game loop on game over } }, 100); return ()=>{ document.removeEventListener('mousemove', handleMove); document.removeEventListener('touchmove', handleMove); clearInterval(interval); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full bg-[#f0f0f0] overflow-hidden", __source: { fileName: "", lineNumber: 136, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "img/snakehead.jpg", alt: "Snakehead", id: "snakehead", className: "w-[110px] h-[110px] absolute rounded-full transition-transform duration-150 ease", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "img/apple.jpg", alt: "Apple", id: "apple", className: "w-[110px] h-[110px] absolute rounded-full transition-transform duration-150 ease", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "gameOverMessage", className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl text-red-600 hidden", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, "ゲームオーバー"), /*#__PURE__*/ React.createElement("div", { id: "score", className: "absolute top-2 right-2 text-xl text-[#333]", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, "スコア: 0")); }