面试题之用Vue手写贪吃蛇

最新推荐文章于 2024-08-20 15:07:29 发布

我是真的狗

最新推荐文章于 2024-08-20 15:07:29 发布

阅读量668

点赞数 2

分类专栏：面试文章标签： vue.js

本文链接：https://blog.csdn.net/wanghuan1020/article/details/114186846

版权

本文探讨如何使用Vue.js框架来实现经典游戏——贪吃蛇。在编写过程中遇到问题并进行了解决，以下是作者整理的完整代码实现。

摘要由CSDN通过智能技术生成

面试题之用Vue手写贪吃蛇

面试题之用Vue手写贪吃蛇

面试题之用Vue手写贪吃蛇

做了一半，还犯了一个致命问题
以下是试后自己整理的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
   
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #grid {
   
      background-color: #ddd;
      width: 500px;
      height: 500px;
      position: relative;
    }
    #grid .ele {
   
      background-color: #000;
      position: absolute;
      border: 1px solid #ccc;
      box-sizing: border-box;
      width: 10px;
      height: 10px;
    }

    #grid .food {
   
      background-color: red;
      position: absolute;
      border: 1px solid #ccc;
      box-sizing: border-box;
      width: 10px;
      height: 10px;
    }

  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 
    50*50
    5
    
   -->
</head>
<body>
  <div id="app">
    <div id="grid">
      <div class="ele" v-for="(item, index) in snake" :key="`snake${index}`" :style="locationCompute(item.x, item.y)"></div>
      <div class="food" v-for="(item, index) in foods" :key="`food${index}`" :style="locationCompute(item.x, item.y)"></div>
    </div>
    <br>
    <hr