feat: snake

tianqing617 · Nov 9, 2021 · a452ff4 · a452ff4
1 parent 9342000
commit a452ff4
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/src/components/playGround/PlayGround.vue b/src/components/playGround/PlayGround.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="play-ground">
     <div id="snake">
-      <i></i>
+      <!-- 蛇头 -->
+      <b></b>
+
+      <!-- 蛇身 -->
       <i></i>
       <i></i>
     </div>
@@ -51,7 +54,7 @@ export default {
   left: 30px;
   height: 10px;
   line-height: 10px;
-  > i {
+  > b, i {
     width: 10px;
     height: 10px;
     background-color: #000;

diff --git a/src/components/playGround/Snake.ts b/src/components/playGround/Snake.ts
@@ -0,0 +1,42 @@
+export default class Snake {
+  // 蛇的容器
+  snakeEl: HTMLElement;
+  // 蛇头
+  headEl: HTMLElement;
+  // 蛇身，含蛇头
+  bodyListEl: HTMLCollection;
+
+  constructor() {
+    this.snakeEl = document.getElementById('snake')!;
+    this.headEl = this.snakeEl.firstElementChild as HTMLElement;
+    this.bodyListEl = this.snakeEl.children;
+  }
+
+  get headPointer(): {x: number, y: number} {
+    return {
+      x: this.headEl.offsetLeft,
+      y: this.headEl.offsetTop,
+    }
+  }
+
+  set headPointer(pointer) {
+    // 设置蛇头
+    console.log('headPointer', pointer);
+  }
+
+  // 增加蛇的长度
+  increaseBody() {
+    // The insertAdjacentHTML() method inserts a text as HTML, into a specified position.
+    this.snakeEl.insertAdjacentHTML('beforeend', '<i></i>');
+  }
+
+  // 移动蛇身
+  moveBody(): void {
+    //
+  }
+
+  // 检查是否撞到自己
+  checkAccident() {
+    //
+  }
+}