Vueを使ってヘビゲームを簡単に作る方法を教えます（デモコード付き）

この記事では、Vue.js を使用してコマンド ライン スネーク ゲーム (temir-snake-game) を実装する方法を共有します。誰もがスネーク ゲームに精通しており、Vue を使用している必要があります。 Web バージョンの Snake ゲームを js で実装するのは難しくありませんが、コマンド ライン バージョンだとどうなるでしょうか? その実装原理に興味がありますか? 始めましょう!

Vue.jsコマンドライン Snake ゲーム

インストール

npm install temir-snake-game -g

ゲームの開始

ターミナル ウィンドウで実行temir -sg .

Windows システムの場合は、体験のためにハイパー ターミナルを使用することをお勧めします。

Vue をコマンド ライン インターフェイスにレンダリングします

Vue .js を使用してコマンド ライン スネーク ゲームを実装するということは、まず、特定のゲーム実装を開始する前に、Vue.js をコマンド ライン インターフェイスにレンダリングする必要があることを意味します。Web アプリケーションの作成にはよく Vue.js を使用しますが、Vue の機能これに限定されず、その舞台はブラウザに限定されません. Vue3 は優れたクロスプラットフォーム機能を備えています. createRenderer API を通じてカスタム レンダラーを作成し、ホスト環境で対応するノードと要素を作成し、追加、削除、 [推奨: vue.js ビデオ チュートリアル ]

Vue3 の優れたクロスプラットフォーム機能のおかげで、Temir というコマンド ライン インターフェイス アプリケーションを実装しました。 Vue コンポーネントを使用してツールを作成します。開発者は、追加の学習コストなしで、Vue を使用してコマンド ライン アプリケーションを作成するだけで済みます。ちなみに、HMR もサポートしていることは注目に値します~

ここでは Temir について詳しく紹介しません。興味のある方は、Github で紹介をチェックするか、Vue.js を使用したコマンド ライン インターフェイスの作成に関するこの記事を読んでください。

スネーク ゲームの実装

Temir を使用すると、Vue.js を使用してコマンド ライン ゲームを作成するための条件が整いました。次に、ゲームの具体的な実装を見てみましょう:

実装の分解

まず、ゲーム実装を簡単に分解してみましょう。要素ロジックの観点から、単純にいくつかの部分に分けることができます:

要素の初期化

競技ステージ

ヘビの這いも餌の生成も座標に依存します。実際に座標に必要なインデックス値は 1 つだけです。したがって、アリーナの構成も非常に単純です。多くの小さなボックス (ここでは ⬛ で表します) で構成されており、それぞれのボックスが座標 (インデックス) に対応しています。は 28*28 のアリーナなので、インデックス セットは (0~783) です。

const basic = 28
const backgroundIcon = '⬛'
const arena = ref<string[]>([])

function initArena() {
 arena.value = Array.from({ length: basic * basic }, () => backgroundIcon)
}

SNAKE

座標の概念については前に述べましたが、スネークの体は一連の系列で構成されています。

const snakeIcon = '?'
// 坐标(索引)30,29 长度为2的蛇身
const snakeBody = ref([30, 29])

食べ物

食べ物の生成は実際にはランダムな座標 (インデックス) ですが、ヘビ本体の座標を避ける必要があることに注意してください。 ##

const foodIcon = '?'
// 食物坐标
const foodCoord = ref(77)

// 生成食物
function generateFood() {
  const food = Math.floor(Math.random() * basic * basic)
  // 与蛇身冲突,重新生成
  if (snakeBody.value.includes(food)) {
    generateFood()
    return
  }
  foodCoord.value = food
}

初期化された要素は次のようになります:

ヘビの這う

ヘビの這うロジックには、方向の数という 2 つの基本要素があります。先ほど、アリーナの構成は 28 *28 の決定的な構造であると述べましたが、方向とステップ数のマッピングは比較的明確です:

const map = {
 left: -1,
 right: 1,
 top: -28,
 bottom: 28
}

2 つの基本要素を使用して、次の座標を取得できます。ヘビが這うたびに対応する座標をヘビの頭に追加し、ヘビの尻尾の座標を削除するだけで、ヘビが這う効果を実現できます。

function move() {
  const h = snakeBody.value[0]
  // 计算下一次爬行坐标,并添加至蛇头
  head.value = h + direction.value
  snakeBody.value.unshift(head.value)

  // 吃到食物,重新生成
  if (head.value === foodCoord.value) {
    generateFood()
  }
  // 只有在未吃到食物的时候,才需要移除蛇尾
  else { snakeBody.value.pop() }
}

クロスボーダー ロジック

貪欲なヘビ ゲーム ルールの最後は、這っているときにヘビの頭が境界を越えるか (ここでの境界とは、アリーナの範囲を超えていることを指します)、またはヘビの体に触れることです。

function isOutOfRange(h: number) {
    // 1. 蛇头碰到蛇身
  return snakeBody.value.indexOf(h, 1) > 0
    // 2. 蛇头超出竞技台上方
    || h < 0
    // 3. 蛇头超出竞技台下方
    || h > basic * basic - 1
    // 4. 蛇头超出竞技台右方
    || (direction.value === 1 && h % basic === 0)
    // 5. 蛇头超出竞技台左方
    || (direction.value === -1 && h % basic === basic - 1)
}

方向制御

スネーク ゲームの核となる操作ロジックは、ヘビの方向を操作して餌を捕まえることにあるため、ユーザーの方向キーの入力を取得して方向を切り替える必要があります。 Temir は、ユーザーの入力を監視する useInput 関数を提供します。

import { useInput } from '@temir/core'
useInput(onKeyBoard, { isActive: true })

function onKeyBoard(_, keys) {
  const { upArrow, downArrow, leftArrow, rightArrow } = keys
  const d = {
    [+leftArrow]: -1,
    [+rightArrow]: 1,
    [+upArrow]: -basic,
    [+downArrow]: basic,
  }[1] ?? direction.value
  direction.value = (snakeBody.value[1] - snakeBody.value[0] === d) ? direction.value : d
}

UI Drawing

UI 描画とプレゼンテーションについて Temir は、いくつかの Vue コンポーネントを提供します。Flexbox レイアウトを構築するのと同じように、ターミナル UI を構築するだけで済みます。

<script setup>
import { computed } from &#39;vue&#39;
import { TBox, TText } from &#39;@temir/core&#39;
import { useGame } from &#39;./composables&#39;
import Header from &#39;./components/Header.vue&#39;
import Home from &#39;./components/Home.vue&#39;
import Game from &#39;./components/Game.vue&#39;
import GameOver from &#39;./components/GameOver.vue&#39;
import Exit from &#39;./components/Exit.vue&#39;
const { playStatus } = useGame()
const activeComponent = computed(() => {
  return {
    unplayed: Home,
    playing: Game,
    over: GameOver,
    exit: Exit,
  }[playStatus.value]
})
</script>

<template>
  <TBox
    :width="100"
    justify-content="center"
    align-items="center"
    flex-direction="column"
    border-style="double"
  >
    <Header />
    <component :is="activeComponent" />
  </TBox>
</template>

この時点で、Snake の実装は終了し、具体的な実装の感覚がつかめました。興味がある場合は、ソース コードを確認してください。

デモ

以上がVueを使ってヘビゲームを簡単に作る方法を教えます（デモコード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。