suchen
HeimWeb-FrontendView.jsIch begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!

Dieser Artikel zeigt Ihnen, wie Sie die Vuegrundlegende Syntax zum Schreiben eines Backgammon-Spiels verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Ich begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!

Im vorherigen Artikel habe ich ein Backgammon-Spiel mit der grundlegenden Syntax von JS geschrieben. Heute werde ich eines mit der grundlegenden Syntax von Vue schreiben, um den Unterschied zwischen den beiden zu spüren. . Um das Ergebnis zu beurteilen, habe ich die Methode aus dem vorherigen Artikel kopiert und eingefügt. Wenn Sie diese Logik verstehen möchten, können Sie meinen vorherigen Artikel lesen. (Lernvideo-Sharing: vuejs-Video-Tutorial)

1. Zeichnen Sie den Spielbereich und die Spielelemente

Bevor Sie mit dem Schreiben von Code beginnen, müssen Sie daran denken, die Vue-Datei zu packen. Das Schachbrett wird weiterhin mit einem zweidimensionalen Array gerendert. Sie können das Array(15).fill(0).map(()=>Array(15).fill(0)) verwenden Methode zum schnellen Generieren eines Arrays. Array(15).fill(0).map(()=>Array(15).fill(0))方法来快速生成数组。

    //创建Vue实例
    let vm = new Vue({
      //挂载到对应的盒子上
      el: '#app',
      data: {
        //快速生成用来渲染棋盘的数组,15*15,默认值是0
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
    })

数组生成之后,就可以用v-for方法对Html进行渲染了。第一层循环生成tr标签,第二层循环生成td标签。然后将index和index02这两个参数传入点击事件函数中,并且使用vue样式绑定,将黑棋和白棋这两种样式绑定在td中。

 <div id="app">
    <table>
      <!-- 渲染tr -->
      <tr v-for="(item,index) in list">
        <!-- 渲染td,绑定点击事件,并把参数传递到事件中 -->
        <td v-for="(item02,index02) in item" @click="doClick(index,index02)"
          :class="{&#39;bgc1&#39;:item02==1,&#39;bgc2&#39;:item02==2}"></td>
      </tr>
    </table>
    <!-- 悔棋按钮 -->
    <button @click="withdraw">悔棋</button>
  </div>

附上CSS样式

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }

    table {
      position: relative;
      width: 730px;
      height: 730px;
      margin: 0 auto;
      border: 5px solid black;
      background: url(./src=http___pic45.nipic.com_20140804_2372131_155038114014_2.jpg&refer=http___pic45.nipic.webp) no-repeat;
      background-size: 100%;
      background-position: center;
      padding: 24px 12px;
    }

    td {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 13px;
      margin-bottom: 11px;
      cursor: pointer;
    }

    .bgc1 {
      background-color: black;
    }

    .bgc2 {
      background-color: white;
    }

    button {
      position: absolute;
      width: 200px;
      height: 100px;
      bottom: 100px;
      right: 200px;
      text-align: center;
      line-height: 100px;
      font-size: 25px;
    }
  </style>

Ich begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!

2.点击事件

首先用flag变量来判断黑白棋顺序。数组里的默认值都是0,点击下棋的原理就是改变这个值,上面td的样式绑定中,如果值变为1,就渲染出bgc1样式,也就是黑色。值为2就渲染出白色。在这个事件中,数组的值改变后,页面不会重新渲染,所以需要用this.$set()

    //所有黑棋数组
    let blackArr = []
    //所有白棋数组
    let whiteArr = []
    //下棋顺序变量
    let flag = true
    
    //创建Vue实例
   let vm = new Vue({
      //挂载到对应的盒子上
      el: &#39;#app&#39;,
      data: {
        //用来渲染棋盘的数组,15*15
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
      methods: {
        //点击事件,参数a,b对应td里的index,index02
        doClick(a, b) {
          //判断是黑棋还是白棋
          if (flag) {
            //判断格子内是否已经有棋子
            if (this.list[a][b] == 0) {
              //改变点击的td对应的数组元素的值,并且强制更新数组渲染页面
              this.$set(this.list[a], b, 1)
              flag = !flag
              //将对应的棋子坐标添加至总数组中,后面判断胜负需要用
              blackArr.push([a, b])
            }
          } else {
            this.$set(this.list[a], b, 2)
            flag = !flag
            whiteArr.push([a, b])
          }
        },
      },
    })

Nachdem das Array generiert wurde, können Sie die v-for-Methode zum Rendern von HTML verwenden. Die Schleife der ersten Ebene generiert tr-Tags und die Schleife der zweiten Ebene generiert td-Tags. Übergeben Sie dann die beiden Parameter index und index02 an die Click-Event-Funktion und verwenden Sie die Vue-Stilbindung, um die Schwarz-Weiß-Stile in td zu binden.

        //悔棋事件
        withdraw() {
          //判断前面一步下的是黑棋还是白棋
          if (!flag) {
            //获取最后一颗棋子的位置
            const a = blackArr[blackArr.length - 1][0]
            const b = blackArr[blackArr.length - 1][1]
            //将最后一刻棋子对应的数组元素的值改为0,并且强制更新数组渲染页面
            this.$set(this.list[a], b, 0)
            //把这个棋子从总数组里面删除,否则会影响到输赢判断
            blackArr.splice(blackArr.length - 1, 1)
            flag = !flag
          } else {
            const a = whiteArr[whiteArr.length - 1][0]
            const b = whiteArr[whiteArr.length - 1][1]
            this.$set(this.list[a], b, 0)
            whiteArr.splice(whiteArr.length - 1, 1)
            flag = !flag
          }
        }

Angehängter CSS-Stil

  //横轴获胜逻辑
    function XWin(a, b) {
      //当前X轴的所有棋子集合数组
      let xAllArr = []
      //判断横轴胜负逻辑的X轴棋子数组
      let xWinArr = []
      //判断下的是黑棋还是白棋
      if (!flag) {
        blackArr.map(item => {
          if (item[0] == a) {
            //将当前排的所有棋子加入对应数组
            xAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if (item[0] == a) {
            xAllArr.push(item[1])
          }
        })
      }
      //把横排总数组排序,方便比较
      xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < xAllArr.length; i++) {
        if (xAllArr[i] == (+xAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1,就将其添加至胜负逻辑数组
          xWinArr.push(xAllArr[i])
        } else {
          //否则得清空
          xWinArr = []
        }
      }
      //获胜条件
      if (xWinArr.length == 4) {
        //这里要用定时器将弹框变成异步任务,否则第五颗棋子渲染不出来就提示获胜了
        if (!flag) {
          setTimeout(function () {
            alert(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            location.reload()
          }, 100)
        }
      }
    }
    //竖轴获胜逻辑
    function YWin(a, b) {
      let yAllArr = []
      let yWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if (item[1] == b) {
            yAllArr.push(item[0])
          }
        })
      } else {
        whiteArr.map(item => {
          if (item[1] == b) {
            yAllArr.push(item[0])
          }
        })
      }
      yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < yAllArr.length; i++) {
        if (yAllArr[i] == (+yAllArr[i - 1] + 1)) {
          yWinArr.push(yAllArr[i])
        } else {
          yWinArr = []
        }
      }
      if (yWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            location.reload()
          }, 100)
        }
      }
    }
    //正斜轴获胜逻辑
    function X_YWin(a, b) {
      let x_yAllArr = []
      let x_yWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if ((item[0] - a) == (item[1] - b)) {
            x_yAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if ((item[0] - a) == (item[1] - b)) {
            x_yAllArr.push(item[1])
          }
        })
      }
      x_yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < x_yAllArr.length; i++) {
        if (x_yAllArr[i] == (+x_yAllArr[i - 1] + 1)) {
          x_yWinArr.push(x_yAllArr[i])
        } else {
          x_yWinArr = []
        }
      }
      if (x_yWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            location.reload()
          }, 100)
        }
      }
    }
   //反斜轴获胜逻辑
    function Y_XWin(a, b) {
      let y_xAllArr = []
      let y_xWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if (0 - (item[0] - a) == (item[1] - b)) {
            y_xAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if (0 - (item[0] - a) == (item[1] - b)) {
            y_xAllArr.push(item[1])
          }
        })
      }
      y_xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < y_xAllArr.length; i++) {
        if (y_xAllArr[i] == (+y_xAllArr[i - 1] + 1)) {
          y_xWinArr.push(y_xAllArr[i])
        } else {
          y_xWinArr = []
        }
      }
      if (y_xWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            location.reload()
          }, 100)
        }
      }
    }

1 . png

2. Klicken Sie auf Ereignis

Verwenden Sie zunächst die Flag-Variable, um die Reihenfolge von Othello zu bestimmen. Die Standardwerte im Array sind alle 0. Das Prinzip des Klickens zum Schachspielen besteht darin, diesen Wert zu ändern. Wenn sich der Wert in der obigen td-Stilbindung auf 1 ändert, wird der bgc1-Stil gerendert, der schwarz ist. Ein Wert von 2 gibt Weiß wieder. In diesem Fall wird die Seite nicht erneut gerendert, nachdem sich der Wert des Arrays geändert hat. Daher müssen Sie die Methode this.$set() verwenden, um eine Aktualisierung von v-for zu erzwingen. Da wir die Vue-Syntax verwenden, muss diese Ereignisfunktion in Methoden geschrieben werden.

rrreeeIch begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!3. Reue-Schachfunktion

Das Prinzip des Reue-Schachs besteht darin, den Wert der letzten Schachfigur auf 0 zu ändern. Wie erkennt man, welche Schachfigur die letzte ist? Wurden oben nicht zwei globale Arrays deklariert? Das letzte Element im Array ist die letzte Schachfigur. Nachdem sich der Wert auf 0 geändert hat, muss dieses Element aus dem globalen Array gelöscht werden, da dieses Array nicht nur zum Bedauern des Umzugs, sondern auch zur späteren Bestimmung des Ergebnisses verwendet wird. Wenn es nicht gelöscht wird, wird die Bestimmung beeinträchtigt des Ergebnisses. Die Funktion des Reue-Move-Ereignisses muss ebenfalls in Methoden geschrieben werden. Ich begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!rrreee

4. Bestimmen Sie das Ergebnis

Die Logik zur Bestimmung des Ergebnisses wurde in meinem vorherigen Artikel beschrieben, daher werde ich hier nicht auf Details eingehen. Wenn Sie interessiert sind, können Sie den vorherigen Artikel darüber lesen, wie man Backgammon mit nativem JS schreibt. Nehmen Sie einfach die Methode hier und rufen Sie sie im Click-Ereignis auf.

rrreee

Schreiben Sie sie am Ende. Die grundlegende Syntax von Vue ist hier abgeschlossen Syntax Die DOM-Syntax ist viel praktischer. Bezüglich der Logik der Ergebnisbeurteilung habe ich den vorherigen Artikel noch kopiert. Wenn Sie interessiert sind, können Sie meinen vorherigen Artikel lesen:

Ich begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!

„Wie man mit nativem JS schnell ein Backgammon-Spiel schreibt“

https://juejin . cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4

🎜🎜🎜🎜【Empfohlene verwandte Video-Tutorials: 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonIch begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Dieser Artikel ist reproduziert unter:掘金社区. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Die Wahl der Frameworks: Was treibt die Entscheidungen von Netflix vor?Die Wahl der Frameworks: Was treibt die Entscheidungen von Netflix vor?Apr 13, 2025 am 12:05 AM

Netflix berücksichtigt hauptsächlich Leistung, Skalierbarkeit, Entwicklungseffizienz, Ökosystem, technische Schulden und Wartungskosten bei der Rahmenauswahl. 1. Leistung und Skalierbarkeit: Java und Springboot werden ausgewählt, um massive Daten und hohe gleichzeitige Anforderungen effizient zu verarbeiten. 2. Entwicklungseffizienz und Ökosystem: Verwenden Sie React, um die Effizienz der Front-End-Entwicklung zu verbessern und sein reiches Ökosystem zu nutzen. 3. Technische Schulden- und Wartungskosten: Wählen Sie Node.js, um Microservices zu erstellen, um Wartungskosten und technische Schulden zu senken.

Reagieren, Vue und die Zukunft von Netflix 'FrontendReagieren, Vue und die Zukunft von Netflix 'FrontendApr 12, 2025 am 12:12 AM

Netflix verwendet React hauptsächlich als Front-End-Framework, das durch VUE für bestimmte Funktionen ergänzt wird. 1) Die Komponentierung von React und das virtuelle DOM verbessern die Leistung und Entwicklungseffizienz von Netflix -Anwendungen. 2) VUE wird in den internen Tools und kleinen Projekten von Netflix verwendet, und seine Flexibilität und Benutzerfreundlichkeit sind entscheidend.

Vue.js im Frontend: Anwendungen und Beispiele in realer WeltVue.js im Frontend: Anwendungen und Beispiele in realer WeltApr 11, 2025 am 12:12 AM

Vue.js ist ein progressives JavaScript -Framework, das zum Erstellen komplexer Benutzeroberflächen geeignet ist. 1) Zu seinen Kernkonzepten gehören Reaktionsdaten, Komponentierungen und virtuelle DOM. 2) In praktischen Anwendungen kann es durch den Aufbau von Todo -Anwendungen und die Integration von Vuerouter demonstriert werden. 3) Beim Debuggen wird empfohlen, VODEVTOOLS und CONSOLE.LOG zu verwenden. 4) Die Leistungsoptimierung kann durch V-IF/V-Show, Listen-Rendering-Optimierung, asynchrone Belastung von Komponenten usw. erreicht werden.

Vue.js und React: Verständnis der wichtigsten UnterschiedeVue.js und React: Verständnis der wichtigsten UnterschiedeApr 10, 2025 am 09:26 AM

Vue.js ist für kleine bis mittelgroße Projekte geeignet, während React eher für große und komplexe Anwendungen geeignet ist. 1. Vue.js 'Responsive System aktualisiert das DOM automatisch durch Abhängigkeitsverfolgung und erleichtert es, Datenänderungen zu verwalten. 2.React übernimmt einen Einweg-Datenfluss, und die Datenflüsse von der übergeordneten Komponente zur untergeordneten Komponente und liefern einen klaren Datenfluss und eine leicht zu debug-Struktur.

Vue.js vs. React: projektspezifische ÜberlegungenVue.js vs. React: projektspezifische ÜberlegungenApr 09, 2025 am 12:01 AM

Vue.js eignet sich für kleine und mittelgroße Projekte und schnelle Iterationen, während React für große und komplexe Anwendungen geeignet ist. 1) Vue.js ist einfach zu bedienen und für Situationen geeignet, in denen das Team nicht ausreicht oder die Projektskala klein ist. 2) React hat ein reichhaltigeres Ökosystem und eignet sich für Projekte mit hoher Leistung und komplexen funktionalen Bedürfnissen.

Wie man einen Tag zum Vue springtWie man einen Tag zum Vue springtApr 08, 2025 am 09:24 AM

Zu den Methoden zum Implementieren des Sprung eines Tags in VUE gehören: Verwenden des A -Tags in der HTML -Vorlage, um das HREF -Attribut anzugeben. Verwenden Sie die Router-Link-Komponente des Vue-Routings. Verwenden Sie dies. $ Router.push () Methode in JavaScript. Parameter können durch den Abfrageparameter weitergeleitet werden, und Routen sind in den Routeroptionen für dynamische Sprünge konfiguriert.

So implementieren Sie den Komponentensprung für VUESo implementieren Sie den Komponentensprung für VUEApr 08, 2025 am 09:21 AM

Es gibt die folgenden Methoden, um den Komponentensprung in Vue zu implementieren: Verwenden Sie Router-Link und & lt; Router-View & gt; Komponenten zur Durchführung von Hyperlinksprung und geben das zu Attribut als Zielpfad an. Verwenden Sie die & lt; Router-View & gt; Komponente direkt zur Anzeige der aktuell verdrehten gerenderten Komponenten. Verwenden Sie die Methoden Router.push () und Router.Replace () für die programmatische Navigation. Ersteres rettet die Geschichte und letzteres ersetzt die aktuelle Route, ohne Aufzeichnungen zu verlassen.

Wie man zum Div von Vue springtWie man zum Div von Vue springtApr 08, 2025 am 09:18 AM

Es gibt zwei Möglichkeiten, Divelemente in Vue zu springen: Verwenden Sie Vue Router und fügen Sie Router-Link-Komponente hinzu. Fügen Sie den @click Event -Listener hinzu und nennen Sie dies. $ Router.push () Methode zum Springen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft