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

この記事では、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 もサポートしていることは注目に値します~

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

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

スネークゲームの実装

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

実装の分解

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

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

要素の初期化

競技ステージ

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

const basic = 28 const backgroundIcon = '⬛' const arena = ref([]) 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 }

ログイン後にコピー

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

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

ヘビの這う

ヘビの這うロジックには、方向の数という 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 を構築するだけで済みます。

ログイン後にコピー

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

デモ

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