From 4d8c2171c12e18babf09a8c9c5b5dc7ef3c37ec9 Mon Sep 17 00:00:00 2001
From: zj-616 <148622703+zj-616@users.noreply.github.com>
Date: Mon, 19 Feb 2024 22:02:01 +0800
Subject: [PATCH] Add files via upload

---
 "\345\244\247\344\275\234\344\270\232.html" | 132 ++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 "\345\244\247\344\275\234\344\270\232.html"
diff --git "a/\345\244\247\344\275\234\344\270\232.html" "b/\345\244\247\344\275\234\344\270\232.html"
new file mode 100644
index 00000000..144cb89e
--- /dev/null
+++ "b/\345\244\247\344\275\234\344\270\232.html"
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #game-board {
+            margin: 0 auto;
+            border: 1px solid black;
+            display: grid;
+            grid-template-columns: repeat(20, 20px);
+        }
+        
+        .cell {
+            width: 20px;
+            height: 20px;
+            background-color: #ebe8bd;
+            border: 1px solid rgb(15, 13, 7);
+        }
+        
+        .snake {
+            background-color: #5bbea7;
+        }
+        
+        .food {
+            background-color: rgba(239, 12, 12, 0.253);
+        }
+    </style>
+</head>
+<body>
+    <div id="game-board"></div>
+    
+    <script>
+        var gridSize = 20;
+        var gridCount =20;
+        var snake = [{x: 10, y: 10}];
+        var food = {x: 15, y: 10};
+        var direction = 'right';
+        
+        var gameBoard = document.getElementById('game-board');
+        
+        function updateGameBoard() {
+            for (var y = 0; y < gridCount; y++) {
+                for (var x = 0; x < gridCount; x++) {
+                    var cell = document.createElement('div');
+                    cell.className = 'cell';
+                    
+                    var isSnake = false;
+                    for (var i = 0; i < snake.length; i++) {
+                        if (snake[i].x === x && snake[i].y === y) {
+                            isSnake = true;
+                        }
+                    }
+                    if (x === food.x && y === food.y) {
+                        cell.classList.add('food');
+                    } else if (isSnake) {
+                        cell.classList.add('snake');
+                    }
+                    
+                    gameBoard.appendChild(cell);
+                }
+            }
+        }
+        
+        function clearGameBoard() {
+            while (gameBoard.firstChild) {
+                gameBoard.removeChild(gameBoard.firstChild);
+            }
+        }
+        
+        function moveSnake() {
+            var head = {x: snake[0].x, y: snake[0].y};
+            if (direction === 'up') {
+                head.y--;
+            } else if (direction === 'down') {
+                head.y++;
+            } else if (direction === 'left') {
+                head.x--;
+            } else if (direction === 'right') {
+                head.x++;
+            }
+            
+            snake.unshift(head);
+            
+            if (head.x === food.x && head.y === food.y) {
+                generateFood();
+            } else {
+                snake.pop();
+            }
+        }
+        
+        function generateFood() {
+            var x, y;
+            do {
+                x = Math.floor(Math.random() * gridCount);
+                y = Math.floor(Math.random() * gridCount);
+            } while (checkCollision(x, y));
+            
+            food.x = x;
+            food.y = y;
+        }
+        
+        function checkCollision(x, y) {
+            for (var i = 0; i < snake.length; i++) {
+                if (x === snake[i].x && y === snake[i].y) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        
+        document.addEventListener('keydown', function(event) {
+            if ((event.keyCode === 37 || event.keyCode === 65) && direction !== 'right') {
+                direction = 'left';
+            } else if ((event.keyCode === 38 || event.keyCode === 87) && direction !== 'down') {
+                direction = 'up';
+            } else if ((event.keyCode === 39 || event.keyCode === 68) && direction !== 'left') {
+                direction = 'right';
+            } else if ((event.keyCode === 40 || event.keyCode === 83) && direction !== 'up') {
+                direction = 'down';
+            }
+        });
+        
+        function gameLoop() {
+            clearGameBoard();
+            updateGameBoard();
+            moveSnake();
+            setTimeout(gameLoop, 200);
+        }
+        
+        gameLoop();
+    </script>
+</body>
+</html>
\ No newline at end of file
