Tue Apr 11 10:50:00 UTC 2023 inscode

src/components/tanchishe.vue

 <template>
-    <div class="game-board">
-      <div v-for="row in board" :key="rowIndex">
-        <div v-for="cell in row" :key="cellIndex" :class="getCellClass(cell)"></div>
-      </div>
+  <div class="game-board">
+    <div v-for="row in board" :key="rowIndex">
+      <div v-for="cell in row" :key="cellIndex" :class="getCellClass(cell)"></div>
     </div>
-  </template>
-  
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      board: [], // 游戏面板
+      snake: [], // 蛇的身体
+      food: [], // 食物
+      direction: 'right', // 蛇的移动方向
+      score: 0, // 得分
+    };
+  },
+  mounted() {
+    this.initGame();
+  },
+  methods: {
+    // 初始化游戏
+    initGame() {
+      this.board = this.createBoard(20, 20);
+      this.snake = [[10, 10], [10, 9], [10, 8]]; // 初始化蛇的位置
+      this.placeFood();
+      this.direction = 'right';
+      this.score = 0;
+      setInterval(() => this.move(), 100);
+      window.addEventListener('keydown', this.handleKeyPress);
+    },
+    // 创建游戏面板
+    createBoard(rows, cols) {
+      return Array(rows).fill(null).map(() => Array(cols).fill(0));
+    },
+    // 放置食物
+    placeFood() {
+      const emptyCells = [];
+      this.board.forEach((row, rowIndex) => {
+        row.forEach((cell, cellIndex) => {
+          if (cell === 0) emptyCells.push([rowIndex, cellIndex]);
+        });
+      });
+      this.food = emptyCells[Math.floor(Math.random() * emptyCells.length)];
+      this.board[this.food[0]][this.food[1]] = 2;
+    },
+    // 获取单元格的样式
+    getCellClass(cell) {
+      switch (cell) {
+        case 1: return 'snake';
+        case 2: return 'food';
+        default: return '';
+      }
+    },
+    // 处理键盘按键事件
+    handleKeyPress(event) {
+      switch (event.keyCode) {
+        case 37: this.direction = 'left'; break;
+        case 38: this.direction = 'up'; break;
+        case 39: this.direction = 'right'; break;
+        case 40: this.direction = 'down'; break;
+      }
+    },
+    // 移动蛇
+    move() {
+      const head = this.snake[0].slice();
+      switch (this.direction) {
+        case 'left': head[1]--; break;
+        case 'up': head[0]--; break;
+        case 'right': head[1]++; break;
+        case 'down': head[0]++; break;
+      }
+      if (this.isOutOfBounds(head) || this.isCollision(head)) {
+        alert('游戏结束');
+        this.initGame();
+        return;
+      }
+      this.snake.unshift(head);
+      if (head[0] === this.food[0] && head[1] === this.food[1]) {
+        this.score++;
+        this.placeFood();
+      } else {
+        this.board[this.snake[this.snake.length - 1][0]][this.snake[this.snake.length - 1][1]] = 0;
+        this.snake.pop();
+      }
+      this.snake.forEach((cell) => {
+        // 更新蛇在游戏面板中的位置
+        this.board[cell[0]][cell[1]] = 1;
+      });
+    },
+    // 判断蛇是否撞墙
+    isOutOfBounds(head) {
+      return head[0] < 0 || head[0] >= this.board.length || head[1] < 0 || head[1] >= this.board[0].length;
+    },
+    // 判断蛇是否撞到自己
+    isCollision(head) {
+      for (let i = 1; i < this.snake.length; i++) {
+        if (this.snake[i][0] === head[0] && this.snake[i][1] === head[1]) {
+          return true;
+        }
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<style>
+.game-board {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  height: 400px;
+  border: 1px solid #ccc;
+}
+
+.game-board>div {
+  display: flex;
+}
+
+.game-board>div>div {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #ccc;
+}
+
+.snake {
+  background-color: #333;
+}
+
+.food {
+  background-color: red;
+}
+</style>
   
\ No newline at end of file