Spaces:

joung
/

t-t

Running

App Files Files Community

joung commited on Apr 21

Commit

6b6a80f

verified ·

1 Parent(s): 99eb336

Add 2 files

Browse files

Files changed (2) hide show

index.html +274 -275
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -1,332 +1,331 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cherry Blossoms & Snowfall</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
-        body {
-            margin: 0;
-            overflow: hidden;
-            font-family: 'Arial', sans-serif;
         }
-        #info {
             position: absolute;
-            bottom: 20px;
             width: 100%;
-            text-align: center;
-            color: white;
-            text-shadow: 0 0 5px rgba(0,0,0,0.5);
-            z-index: 100;
-            pointer-events: none;
         }
-        #title {
             position: absolute;
-            top: 20px;
             width: 100%;
-            text-align: center;
-            color: white;
-            font-size: 2.5rem;
-            text-shadow: 0 0 10px rgba(0,0,0,0.7);
             z-index: 100;
-            font-weight: 300;
-            letter-spacing: 2px;
-            pointer-events: none;
         }
-        .petal {
-            position: absolute;
-            width: 15px;
-            height: 15px;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23ffb6c1" d="M50 0 Q75 25 100 50 Q75 75 50 100 Q25 75 0 50 Q25 25 50 0"/></svg>') no-repeat;
-            background-size: contain;
-            opacity: 0.8;
-            animation: petal-fall linear infinite;
-            filter: drop-shadow(0 0 2px rgba(255,182,193,0.7));
         }
-        @keyframes petal-fall {
-            0% {
-                transform: translate(0, -10px) rotate(0deg);
-            }
-            100% {
-                transform: translate(calc(var(--sway) * 100px), calc(100vh + 10px)) rotate(360deg);
-            }
         }
     </style>
 </head>
-<body class="bg-gradient-to-b from-blue-900 to-purple-900">
-    <div id="title">春の舞 (Spring Dance)</div>
-    <div id="info">Cherry blossoms and snowflakes dancing together</div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Scene setup
-            const scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x0a1128);
-            // Camera setup
-            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 5, 30);
-            camera.lookAt(0, 0, 0);
-            // Renderer setup
-            const renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(window.devicePixelRatio);
-            document.body.appendChild(renderer.domElement);
-            // Create cherry blossom tree
-            createCherryTree(scene);
-            // Create snowflakes
-            const snowflakes = createSnowflakes(scene);
-            // Create cherry blossom petals
-            const petals = createPetals(scene);
-            // Add stars in the background
-            const stars = createStars(scene);
-            // Lighting
-            const ambientLight = new THREE.AmbientLight(0x404040);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
-            directionalLight.position.set(1, 1, 1);
-            scene.add(directionalLight);
-            // Moon
-            const moonGeometry = new THREE.SphereGeometry(3, 32, 32);
-            const moonMaterial = new THREE.MeshBasicMaterial({
-                color: 0xffffcc,
-                transparent: true,
-                opacity: 0.9
-            });
-            const moon = new THREE.Mesh(moonGeometry, moonMaterial);
-            moon.position.set(-20, 20, -30);
-            scene.add(moon);
-            // Animation loop
-            function animate() {
-                requestAnimationFrame(animate);
-                // Update snowflakes
-                snowflakes.forEach(flake => {
-                    flake.position.y -= flake.speed;
-                    flake.position.x += Math.sin(Date.now() * 0.001 + flake.id) * 0.05;
-                    if (flake.position.y < -20) {
-                        flake.position.y = 20;
-                        flake.position.x = Math.random() * 40 - 20;
-                        flake.position.z = Math.random() * 40 - 20;
-                    }
-                });
-                // Update petals
-                petals.forEach(petal => {
-                    petal.position.y -= petal.speed;
-                    petal.position.x += Math.sin(Date.now() * 0.001 + petal.id) * 0.03;
-                    petal.rotation.y += 0.01;
-                    if (petal.position.y < -5) {
-                        petal.position.y = 15;
-                        petal.position.x = Math.random() * 10 - 5;
-                        petal.position.z = Math.random() * 10 - 5;
                     }
-                });
-                // Rotate stars slightly
-                stars.rotation.x += 0.0001;
-                stars.rotation.y += 0.0001;
-                renderer.render(scene, camera);
             }
-            // Handle window resize
-            window.addEventListener('resize', () => {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            });
-            // Start animation
-            animate();
-            // Add CSS petals for variety
-            for (let i = 0; i < 20; i++) {
-                const petal = document.createElement('div');
-                petal.className = 'petal';
-                // Random properties
-                const size = Math.random() * 15 + 10;
-                petal.style.width = `${size}px`;
-                petal.style.height = `${size}px`;
-                petal.style.left = `${Math.random() * 100}vw`;
-                petal.style.top = `${Math.random() * 20 - 10}vh`;
-                petal.style.setProperty('--sway', Math.random() * 2 - 1);
-                // Random animation duration (5-15 seconds)
-                const duration = Math.random() * 10 + 5;
-                petal.style.animationDuration = `${duration}s`;
-                // Random opacity
-                petal.style.opacity = Math.random() * 0.5 + 0.3;
-                document.body.appendChild(petal);
             }
-        });
-        function createCherryTree(scene) {
-            // Trunk
-            const trunkGeometry = new THREE.CylinderGeometry(0.5, 1, 10, 8);
-            const trunkMaterial = new THREE.MeshPhongMaterial({
-                color: 0x8B4513,
-                flatShading: true
-            });
-            const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
-            trunk.position.y = 5;
-            trunk.rotation.z = Math.PI / 20;
-            scene.add(trunk);
-            // Branches
-            const branchMaterial = new THREE.MeshPhongMaterial({
-                color: 0x8B4513,
-                flatShading: true
-            });
-            for (let i = 0; i < 5; i++) {
-                const length = 5 + Math.random() * 3;
-                const angle = Math.PI * 0.2 + Math.random() * Math.PI * 0.3;
-                const branchGeometry = new THREE.CylinderGeometry(0.2, 0.4, length, 6);
-                const branch = new THREE.Mesh(branchGeometry, branchMaterial);
-                branch.position.y = 8 + i * 0.5;
-                branch.position.x = (Math.random() - 0.5) * 3;
-                branch.rotation.z = angle * (Math.random() > 0.5 ? 1 : -1);
-                scene.add(branch);
             }
-            // Blossom clusters
-            const blossomGeometry = new THREE.SphereGeometry(0.1, 8, 8);
-            const blossomMaterial = new THREE.MeshPhongMaterial({
-                color: 0xffb6c1,
-                transparent: true,
-                opacity: 0.9
-            });
-            for (let i = 0; i < 100; i++) {
-                const blossom = new THREE.Mesh(blossomGeometry, blossomMaterial);
-                // Position around branches
-                const angle = Math.random() * Math.PI * 2;
-                const radius = 1 + Math.random() * 4;
-                const height = 5 + Math.random() * 8;
-                blossom.position.x = Math.cos(angle) * radius;
-                blossom.position.y = height;
-                blossom.position.z = Math.sin(angle) * radius;
-                scene.add(blossom);
             }
-        }
-        function createSnowflakes(scene) {
-            const snowflakes = [];
-            const snowflakeGeometry = new THREE.BufferGeometry();
-            const snowflakeMaterial = new THREE.PointsMaterial({
-                color: 0xffffff,
-                size: 0.15,
-                transparent: true,
-                opacity: 0.8,
-                blending: THREE.AdditiveBlending
-            });
-            const snowflakeCount = 1500;
-            const positions = new Float32Array(snowflakeCount * 3);
-            for (let i = 0; i < snowflakeCount; i++) {
-                positions[i * 3] = Math.random() * 40 - 20;
-                positions[i * 3 + 1] = Math.random() * 40 - 10;
-                positions[i * 3 + 2] = Math.random() * 40 - 20;
             }
-            snowflakeGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            const snowflakeSystem = new THREE.Points(snowflakeGeometry, snowflakeMaterial);
-            scene.add(snowflakeSystem);
-            // Add individual properties to each snowflake
-            for (let i = 0; i < snowflakeCount; i++) {
-                snowflakes.push({
-                    position: snowflakeSystem.geometry.attributes.position,
-                    index: i,
-                    speed: 0.05 + Math.random() * 0.1,
-                    id: i
                 });
             }
-            return snowflakes;
-        }
-        function createPetals(scene) {
-            const petals = [];
-            const petalGeometry = new THREE.PlaneGeometry(0.3, 0.3);
-            const petalMaterial = new THREE.MeshPhongMaterial({
-                color: 0xffb6c1,
-                transparent: true,
-                opacity: 0.7,
-                side: THREE.DoubleSide
-            });
-            const petalCount = 100;
-            for (let i = 0; i < petalCount; i++) {
-                const petal = new THREE.Mesh(petalGeometry, petalMaterial);
-                petal.position.x = Math.random() * 10 - 5;
-                petal.position.y = 5 + Math.random() * 10;
-                petal.position.z = Math.random() * 10 - 5;
-                petal.rotation.x = Math.random() * Math.PI;
-                petal.rotation.y = Math.random() * Math.PI;
-                petal.rotation.z = Math.random() * Math.PI;
-                petal.speed = 0.02 + Math.random() * 0.03;
-                petal.id = i;
-                scene.add(petal);
-                petals.push(petal);
             }
-            return petals;
-        }
-        function createStars(scene) {
-            const starGeometry = new THREE.BufferGeometry();
-            const starMaterial = new THREE.PointsMaterial({
-                color: 0xffffff,
-                size: 0.1,
-                transparent: true,
-                opacity: 0.7
             });
-            const starCount = 1000;
-            const starPositions = new Float32Array(starCount * 3);
-            for (let i = 0; i < starCount; i++) {
-                starPositions[i * 3] = (Math.random() - 0.5) * 2000;
-                starPositions[i * 3 + 1] = (Math.random() - 0.5) * 2000;
-                starPositions[i * 3 + 2] = (Math.random() - 0.5) * 2000;
-            }
-            starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
-            const stars = new THREE.Points(starGeometry, starMaterial);
-            scene.add(stars);
-            return stars;
-        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joung/t-t" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
+<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>오목 게임</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        .board {
+            display: grid;
+            grid-template-columns: repeat(15, 1fr);
+            grid-template-rows: repeat(15, 1fr);
+            width: 600px;
+            height: 600px;
+            background-color: #e6c88c;
+            position: relative;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
         }
+        .cell {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            cursor: pointer;
+        }
+        .cell::before, .cell::after {
+            content: '';
             position: absolute;
+            background-color: #333;
+        }
+        .cell::before {
             width: 100%;
+            height: 1px;
+            top: 50%;
+        }
+        .cell::after {
+            width: 1px;
+            height: 100%;
+            left: 50%;
         }
+        .stone {
+            width: 80%;
+            height: 80%;
+            border-radius: 50%;
+            z-index: 1;
+            transition: transform 0.2s;
+        }
+        .stone.black {
+            background: radial-gradient(circle at 30% 30%, #666, #000);
+            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
+        }
+        .stone.white {
+            background: radial-gradient(circle at 30% 30%, #fff, #ddd);
+            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
+        }
+        .star-point {
             position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #333;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
             z-index: 100;
+            justify-content: center;
+            align-items: center;
         }
+        .modal-content {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 10px;
+            text-align: center;
+            max-width: 80%;
+            animation: modalFadeIn 0.3s;
         }
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-50px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .highlight {
+            animation: highlight 1s infinite;
+        }
+        @keyframes highlight {
+            0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
+            50% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
         }
     </style>
 </head>
+<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="text-center mb-8">
+        <h1 class="text-4xl font-bold text-gray-800 mb-2">오목 게임</h1>
+        <p class="text-gray-600">흑돌과 백돌 중 먼저 5개를 연속으로 놓는 사람이 승리합니다!</p>
+    </div>
+    <div class="flex items-center justify-center gap-8 mb-6">
+        <div class="flex items-center">
+            <div class="w-8 h-8 rounded-full bg-black mr-2"></div>
+            <span class="font-medium">흑돌</span>
+        </div>
+        <div class="text-center">
+            <div class="text-xl font-bold mb-1" id="turn-indicator">흑돌 차례</div>
+            <button id="restart-btn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
+                게임 다시 시작
+            </button>
+        </div>
+        <div class="flex items-center">
+            <div class="w-8 h-8 rounded-full bg-white border border-gray-300 mr-2"></div>
+            <span class="font-medium">백돌</span>
+        </div>
+    </div>
+    <div class="board" id="board">
+        <!-- 오목판이 여기에 생성됩니다 -->
+    </div>
+    <div class="modal" id="result-modal">
+        <div class="modal-content">
+            <h2 class="text-2xl font-bold mb-4" id="result-text">흑돌 승리!</h2>
+            <button id="close-modal" class="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
+                닫기
+            </button>
+        </div>
+    </div>
+    <div class="mt-8 text-gray-600 text-sm">
+        <p>규칙: 흑돌이 먼저 시작하며, 3-3, 4-4, 장목(6개 이상)은 금수입니다.</p>
+    </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            const board = document.getElementById('board');
+            const turnIndicator = document.getElementById('turn-indicator');
+            const restartBtn = document.getElementById('restart-btn');
+            const resultModal = document.getElementById('result-modal');
+            const resultText = document.getElementById('result-text');
+            const closeModal = document.getElementById('close-modal');
+            const BOARD_SIZE = 15;
+            let currentPlayer = 'black'; // 'black' 또는 'white'
+            let gameOver = false;
+            let boardState = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
+            // 오목판 생성
+            function createBoard() {
+                board.innerHTML = '';
+                // 오목판 선 그리기
+                for (let i = 0; i < BOARD_SIZE; i++) {
+                    for (let j = 0; j < BOARD_SIZE; j++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'cell';
+                        cell.dataset.row = i;
+                        cell.dataset.col = j;
+                        // 별점 표시 (오목판의 특정 위치에)
+                        if ((i === 3 || i === 7 || i === 11) && (j === 3 || j === 7 || j === 11)) {
+                            const starPoint = document.createElement('div');
+                            starPoint.className = 'star-point';
+                            cell.appendChild(starPoint);
+                        }
+                        cell.addEventListener('click', () => handleCellClick(i, j));
+                        board.appendChild(cell);
                     }
+                }
             }
+            // 셀 클릭 처리
+            function handleCellClick(row, col) {
+                if (gameOver || boardState[row][col] !== null) return;
+                // 돌 놓기
+                boardState[row][col] = currentPlayer;
+                renderStone(row, col, currentPlayer);
+                // 승리 확인
+                if (checkWin(row, col)) {
+                    showResult(`${currentPlayer === 'black' ? '흑돌' : '백돌'} 승리!`);
+                    highlightWinningStones();
+                    gameOver = true;
+                    return;
+                }
+                // 무승부 확인
+                if (checkDraw()) {
+                    showResult('무승부!');
+                    gameOver = true;
+                    return;
+                }
+                // 플레이어 전환
+                currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
+                updateTurnIndicator();
             }
+            // 돌 렌더링
+            function renderStone(row, col, player) {
+                const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                const stone = document.createElement('div');
+                stone.className = `stone ${player}`;
+                cell.appendChild(stone);
+            }
+            // 승리 조건 확인
+            function checkWin(row, col) {
+                const directions = [
+                    [0, 1],   // 가로
+                    [1, 0],   // 세로
+                    [1, 1],   // 대각선 ↘
+                    [1, -1]   // 대각선 ↙
+                ];
+                for (const [dx, dy] of directions) {
+                    let count = 1;
+                    // 한 방향으로 검사
+                    count += countStonesInDirection(row, col, dx, dy);
+                    // 반대 방향으로 검사
+                    count += countStonesInDirection(row, col, -dx, -dy);
+                    if (count >= 5) {
+                        return true;
+                    }
+                }
+                return false;
             }
+            // 특정 방향으로 연속된 돌 개수 세기
+            function countStonesInDirection(row, col, dx, dy) {
+                let count = 0;
+                let r = row + dx;
+                let c = col + dy;
+                while (
+                    r >= 0 && r < BOARD_SIZE &&
+                    c >= 0 && c < BOARD_SIZE &&
+                    boardState[r][c] === currentPlayer
+                ) {
+                    count++;
+                    r += dx;
+                    c += dy;
+                }
+                return count;
             }
+            // 무승부 확인
+            function checkDraw() {
+                for (let i = 0; i < BOARD_SIZE; i++) {
+                    for (let j = 0; j < BOARD_SIZE; j++) {
+                        if (boardState[i][j] === null) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
             }
+            // 승리한 돌 강조 표시
+            function highlightWinningStones() {
+                // 실제 게임에서는 더 정교한 로직이 필요하지만, 여기서는 간단히 구현
+                document.querySelectorAll('.stone').forEach(stone => {
+                    stone.classList.add('highlight');
                 });
             }
+            // 턴 표시 업데이트
+            function updateTurnIndicator() {
+                turnIndicator.textContent = `${currentPlayer === 'black' ? '흑돌' : '백돌'} 차례`;
+                turnIndicator.className = `text-xl font-bold mb-1 ${currentPlayer === 'black' ? 'text-gray-900' : 'text-gray-100 bg-gray-800 px-2 py-1 rounded'}`;
+            }
+            // 결과 표시
+            function showResult(message) {
+                resultText.textContent = message;
+                resultModal.style.display = 'flex';
+            }
+            // 게임 초기화
+            function resetGame() {
+                boardState = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
+                currentPlayer = 'black';
+                gameOver = false;
+                createBoard();
+                updateTurnIndicator();
+                // 강조 효과 제거
+                document.querySelectorAll('.stone').forEach(stone => {
+                    stone.classList.remove('highlight');
+                });
             }
+            // 이벤트 리스너 설정
+            restartBtn.addEventListener('click', resetGame);
+            closeModal.addEventListener('click', () => {
+                resultModal.style.display = 'none';
             });
+            // 게임 시작
+            createBoard();
+            updateTurnIndicator();
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joung/t-t" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ 오목프로그램을 만들어줘