Spaces:

createcodeinnovation
/

testfile1

Running

App Files Files Community

createcodeinnovation commited on Jun 7

Commit

09cc2b3

verified ·

1 Parent(s): a3915f0

Update index.html

Browse files

Files changed (1) hide show

index.html +270 -19

index.html CHANGED Viewed

@@ -1,19 +1,270 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML 지렁이 게임</title>
+    <style>
+        /* 기본 스타일 */
+        body {
+            background-color: #f0f0f0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        /* 게임 컨테이너 스타일 */
+        #game-container {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        /* 게임 캔버스 스타일 */
+        #gameCanvas {
+            background-color: #dcedc8; /* 연한 녹색 배경 */
+            border: 2px solid #333;
+        }
+        /* 점수판 스타일 */
+        #score-board {
+            font-size: 24px;
+            font-weight: bold;
+            color: #555;
+            margin-top: 10px;
+        }
+        /* 게임 오버 메시지 스타일 */
+        #game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 20px 40px;
+            border-radius: 10px;
+            display: none; /* 기본적으로 숨김 */
+            text-align: center;
+        }
+        #game-over h2 {
+            margin: 0 0 10px 0;
+        }
+        #restart-button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        #restart-button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <h1>지렁이 게임</h1>
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+        <div id="score-board">점수: <span id="score">0</span></div>
+    </div>
+    <div id="game-over">
+        <h2>게임 오버!</h2>
+        <button id="restart-button">다시 시작</button>
+    </div>
+    <script>
+        // --- 1. 초기 설정 ---
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreElement = document.getElementById('score');
+        const gameOverElement = document.getElementById('game-over');
+        const restartButton = document.getElementById('restart-button');
+        const BOX_SIZE = 20; // 각 칸의 크기
+        const CANVAS_WIDTH = canvas.width;
+        const CANVAS_HEIGHT = canvas.height;
+        let snake; // 지렁이 배열 (x, y 좌표 객체)
+        let food; // 먹이 객체 (x, y 좌표)
+        let score; // 점수
+        let direction; // 현재 이동 방향
+        let changingDirection; // 방향 전환 중인지 확인 (연속적인 키 입력 방지)
+        let gameLoop; // 게임 루프 setInterval ID
+        // --- 2. 게임 시작 및 재시작 ---
+        function startGame() {
+            // 게임 상태 초기화
+            snake = [
+                { x: 10 * BOX_SIZE, y: 10 * BOX_SIZE },
+                { x: 9 * BOX_SIZE, y: 10 * BOX_SIZE },
+                { x: 8 * BOX_SIZE, y: 10 * BOX_SIZE }
+            ];
+            score = 0;
+            direction = 'RIGHT';
+            changingDirection = false;
+            // UI 초기화
+            scoreElement.textContent = score;
+            gameOverElement.style.display = 'none';
+            generateFood(); // 첫 먹이 생성
+            // 기존 게임 루프가 있다면 중지
+            if (gameLoop) {
+                clearInterval(gameLoop);
+            }
+            // 새로운 게임 루프 시작 (100ms 마다 main 함수 실행)
+            gameLoop = setInterval(main, 100);
+        }
+        // --- 3. 게임 메인 루프 ---
+        function main() {
+            if (checkGameOver()) {
+                clearInterval(gameLoop);
+                gameOverElement.style.display = 'block';
+                return;
+            }
+            changingDirection = false;
+            clearCanvas();
+            drawFood();
+            moveSnake();
+            drawSnake();
+        }
+        // --- 4. 그리기 함수들 ---
+        // 캔버스 지우기
+        function clearCanvas() {
+            ctx.fillStyle = '#dcedc8';
+            ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+        }
+        // 지렁이 그리기
+        function drawSnake() {
+            snake.forEach((segment, index) => {
+                // 머리 색상 다르게 하기
+                ctx.fillStyle = (index === 0) ? '#1b5e20' : '#4caf50';
+                ctx.strokeStyle = '#388e3c';
+                ctx.fillRect(segment.x, segment.y, BOX_SIZE, BOX_SIZE);
+                ctx.strokeRect(segment.x, segment.y, BOX_SIZE, BOX_SIZE);
+            });
+        }
+        // 먹이 그리기
+        function drawFood() {
+            ctx.fillStyle = '#d32f2f'; // 붉은색 먹이
+            ctx.strokeStyle = '#c62828';
+            ctx.fillRect(food.x, food.y, BOX_SIZE, BOX_SIZE);
+            ctx.strokeRect(food.x, food.y, BOX_SIZE, BOX_SIZE);
+        }
+        // --- 5. 게임 로직 함수들 ---
+        // 먹이 생성 (지렁이 몸 위가 아닌 곳에)
+        function generateFood() {
+            while (true) {
+                const foodX = Math.floor(Math.random() * (CANVAS_WIDTH / BOX_SIZE)) * BOX_SIZE;
+                const foodY = Math.floor(Math.random() * (CANVAS_HEIGHT / BOX_SIZE)) * BOX_SIZE;
+                let isFoodOnSnake = snake.some(segment => segment.x === foodX && segment.y === foodY);
+                if (!isFoodOnSnake) {
+                    food = { x: foodX, y: foodY };
+                    return;
+                }
+            }
+        }
+        // 지렁이 이동
+        function moveSnake() {
+            let dx = 0;
+            let dy = 0;
+            if (direction === 'RIGHT') dx = BOX_SIZE;
+            if (direction === 'LEFT') dx = -BOX_SIZE;
+            if (direction === 'UP') dy = -BOX_SIZE;
+            if (direction === 'DOWN') dy = BOX_SIZE;
+            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
+            snake.unshift(head); // 새로운 머리를 배열 맨 앞에 추가
+            // 먹이를 먹었는지 확인
+            if (head.x === food.x && head.y === food.y) {
+                score += 10;
+                scoreElement.textContent = score;
+                generateFood();
+            } else {
+                snake.pop(); // 먹이를 먹지 않았다면 꼬리 제거
+            }
+        }
+        // 게임 오버 조건 확인
+        function checkGameOver() {
+            // 1. 벽 충돌 확인
+            const head = snake[0];
+            if (head.x < 0 || head.x >= CANVAS_WIDTH || head.y < 0 || head.y >= CANVAS_HEIGHT) {
+                return true;
+            }
+            // 2. 자기 몸 충돌 확인
+            for (let i = 1; i < snake.length; i++) {
+                if (head.x === snake[i].x && head.y === snake[i].y) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        // --- 6. 이벤트 리스너 ---
+        // 키보드 입력 처리
+        function changeDirection(event) {
+            if (changingDirection) return;
+            changingDirection = true;
+            const keyPressed = event.key;
+            const goingUp = direction === 'UP';
+            const goingDown = direction === 'DOWN';
+            const goingRight = direction === 'RIGHT';
+            const goingLeft = direction === 'LEFT';
+            if ((keyPressed === 'ArrowLeft' || keyPressed.toLowerCase() === 'a') && !goingRight) {
+                direction = 'LEFT';
+            }
+            if ((keyPressed === 'ArrowUp' || keyPressed.toLowerCase() === 'w') && !goingDown) {
+                direction = 'UP';
+            }
+            if ((keyPressed === 'ArrowRight' || keyPressed.toLowerCase() === 'd') && !goingLeft) {
+                direction = 'RIGHT';
+            }
+            if ((keyPressed === 'ArrowDown' || keyPressed.toLowerCase() === 's') && !goingUp) {
+                direction = 'DOWN';
+            }
+        }
+        document.addEventListener('keydown', changeDirection);
+        restartButton.addEventListener('click', startGame);
+        // --- 7. 게임 시작 ---
+        startGame();
+    </script>
+</body>
+</html>