Heim > Web-Frontend > View.js > Hauptteil

So implementieren Sie mit Vue3+Canvas ein einfaches Schlangenspiel

王林
Freigeben: 2023-05-12 21:58:04
nach vorne
1347 Leute haben es durchsucht

    So implementieren Sie mit Vue3+Canvas ein einfaches Schlangenspiel

    Spielregeln: Der Spieler steuert mit den Richtungstasten eine lange Schlange, um kontinuierlich Bohnen zu schlucken. Gleichzeitig wächst der Körper der Schlange mit den verschluckten Bohnen weiter Kopf trifft den Körper der Schlange oder das Spiel ist vorbei.

    Idee

    Elemente: Rand, Schlangenkopf, Schlangenkörper, Futter

    Rand: Geben Sie die Anzahl der Zeilen ein. Vom Schlangenkörper trennen, wenn Futter gegessen wird, wird der Schwanz des Schlangenkörpers hinzugefügt von

    Essen: das Der Standort wird zufällig generiert.

    Flussdiagramm

    Code-Implementierung

    So implementieren Sie mit Vue3+Canvas ein einfaches SchlangenspielTechnologie-Stack

    Wählen Sie die zu implementierende Technologie aus. Die Leistung ist besser.

    Grundlegende Variablendefinition

    <script setup lang="ts">
      import { ref, onMounted } from &#39;vue&#39;
      
      let width = ref(600) // 地图默认宽度
      let height = ref(400) // 地图默认高度
      let canvas: any = null // canvas 对象
      let ctx: any = null // canvas 渲染上下文对象
      let snakeList = [[0, 100], [10, 100],] // 蛇的点位坐标
      let direction = &#39;right&#39; // top | down | left | right // 当前方向
      let elementWidth = 10 // 元素尺寸
      let step = 10 // 速度
      let store = ref(0) // 分数
      let status = ref(&#39;start&#39;) // unStart | start | pause | over | success(通关) // 状态
      let foodCoordinate: any = [
        ((Math.random() * width.value) / 10) | 0,
        ((Math.random() * height.value) / 10) | 0,
      ] // 食物坐标
      let process: any = null // 定时器 Id
    </script>
    Nach dem Login kopieren

    Initialisierungvue3、vite 基础架构; 视图选用 canvas

    Montiert , hauptsächlich zum Zeichnen von Karten, zur Erkennung von Mauskoordinaten, zur Richtungsüberwachung, zum Zeichnen von Lebensmitteln, zur Timer-Aktivierung und für andere Vorgänge.

    function handleInit() {
      canvas = document.getElementById(&#39;canvas&#39;)
    
      if (canvas?.getContext) {
        ctx = canvas?.getContext(&#39;2d&#39;)
    
        canvas.addEventListener(&#39;mousemove&#39;, e => {
          ctx.clearRect(10, height.value - 20, 120, 40)
          ctx.fillText(`当前鼠标位置:${e.offsetX}, ${e.offsetY}`, 10, height.value - 10)
        })
    
        document.addEventListener(&#39;keydown&#39;, e => {
          e.preventDefault()
    
          if (Direction[e.keyCode]) {
            direction = Direction[e.keyCode]
          }
        })
    
        process = setInterval(handleRenderSnake, 150)
        handleRenderFood()
        // window.requestAnimationFrame(handleRenderSnake)
      } else {
        alert(&#39;您的浏览器不支持 canvas&#39;)
      }
    }
    Nach dem Login kopieren

    Essenszeichnung

    Wenn Nahrung gegessen wird, muss sie zerstört und regeneriert werden

    // 绘制食物
    function handleRenderFood() {
      ctx.clearRect(foodCoordinate[0], foodCoordinate[1], 10, 10)
      foodCoordinate = [(Math.random() * width.value) | 0, (Math.random() * height.value) | 0]
      ctx.fillStyle = &#39;#eb2f96&#39;
      ctx.fillRect(foodCoordinate[0], foodCoordinate[1], 10, 10)
    }
    Nach dem Login kopieren

    Schlangenkopf-/Schlangenkörperzeichnung

    Die Schlange wird durch ein zweidimensionales Array dargestellt, jeder Knoten repräsentiert einen Teil des Körpers, den Der erste Knoten stellt den Kopf der Schlange dar. Die Bewegung der Schlange wird durch das Löschen des Schwanzknotens und das Hinzufügen des Kopfknotens erreicht. Der mittlere Knoten muss nicht verschoben werden, und die Verarbeitung in den vier Richtungen ist etwas anders. Beachten Sie, dass beim Verzehr von Nahrung der Schwanzknoten des aktuellen Frames nicht mehr gelöscht wird und die Länge des Schlangenkörpers um 1 erhöht wird.

    function handleRenderSnake() {
      switch (direction) {
        case &#39;top&#39;:
          if (snakeList.slice(-1)[0][1] <= 0) {
            status.value = &#39;over&#39;
            return
          }
    
          snakeList.push([
            snakeList[snakeList.length - 1][0],
            snakeList[snakeList.length - 1][1] - step,
          ])
          handleUpdateVerify()
          break
        case &#39;down&#39;:
          if (snakeList.slice(-1)[0][1] >= height.value - 1) {
            status.value = &#39;over&#39;
            return
          }
    
          snakeList.push([
            snakeList[snakeList.length - 1][0],
            snakeList[snakeList.length - 1][1] + step,
          ])
          handleUpdateVerify()
    
          break
          ...
    Nach dem Login kopieren

    Kollisionsalgorithmus, Randbedingungen

    Wenn der Schlangenkopf den Rand der Karte berührt, ist das Spiel beendet. Sie müssen nur anhand der aktuellen Koordinaten und der aktuellen Richtung berechnen, ob die nächsten Koordinaten die Kartengröße überschreiten werden der Schlangenkopf.

    Berechnungsmethode für das Essen von Lebensmitteln: Berechnen Sie die Absolutwerte der x- und y-Achsen der Schlangenkopfkoordinaten bzw. der Lebensmittelkoordinaten. Wenn sie kleiner als die Elementgröße sind, wird davon ausgegangen, dass sie in Kontakt waren.

    // 更新校验
    function handleUpdateVerify() {
      if (status.value === &#39;pause&#39;) {
        clearInterval(process)
      }
    
      if (store.value >= 100) {
        status.value = &#39;success&#39;
        return
      }
    
      for (let i of snakeList) {
        ctx.clearRect(i[0], i[1], elementWidth, elementWidth)
      }
    
      let currentSnake = snakeList.slice(-1)[0]
      if (
        Math.abs(currentSnake[0] - foodCoordinate[0]) < 10 &&
        Math.abs(currentSnake[1] - foodCoordinate[1]) < 10
      ) {
        store.value++
        handleRenderFood()
      } else {
        snakeList.shift()
      }
    }
    Nach dem Login kopieren
    Punkteberechnung, Pause, Fortfahren und andere Funktionen

    Der globale Variablenstatus stellt den Status der aktuellen Situation dar. Wenn Status === „Pause“, wird der Pausenvorgang ausgelöst, die Timer-Variable gelöscht und der Neustart durchgeführt Klicken Sie auf die Schaltfläche, um ein neues Timer-Gerät zu erstellen.

    Wenn Essen gegessen wird, wird die globale Variable Store ++ bidirektional zur Anzeige an die Seite gebunden. Stellen Sie die Punktzahl vorübergehend auf mehr als 100 ein, um das Level zu bestehen.

    Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Vue3+Canvas ein einfaches Schlangenspiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:yisu.com
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage