Teach you how to easily make a snake game using Vue (with demo code)

This article is going to share how to use Vue.js to implement a command line snake game (temir-snake-game). Everyone must be familiar with the snake game and use Vue. It seems that it is not difficult to implement a Web version of the Snake game in js, but what if it is a command line version? Are you interested in its implementation principle? Let's get started!

Vue.js Write a command line Snake game

Install

npm install temir-snake-game -g

Start the game

Run in the terminal windowtemir -sg.

For Windows systems, it is recommended to use the hyper terminal for experience.

Render Vue to the command line interface

Use Vue .js to implement the command line Snake game, first means that we have to render Vue.js to the command line interface before we can start the specific game implementation. We often use Vue.js to write web applications, but Vue’s capabilities are not only Limited to this, its stage is not limited to browsers. Vue3 has excellent cross-platform capabilities. We can create a custom renderer through the createRenderer API, create the corresponding Node and Element in the host environment, and add, delete, and modify elements. Check the operation. [Recommendation: vue.js video tutorial]

Thanks to the excellent cross-platform capabilities of Vue3, I implemented Temir, a command line interface application that uses Vue components. Tools. Developers only need to use Vue to write command line applications without any additional learning costs. By the way, it is worth mentioning that it also supports HMR~

I won’t introduce Temir in detail here. Interested children can check out the introduction on Github or read this article about using Vue.js to write a command line interface.

Snake Game Implementation

With Temir, we have the conditions to use Vue.js to write command line games. Next, let’s take a look at the specific implementation of the game:

Implementation Disassembly

First of all, let’s do a simple dismantling of the game implementation. From the perspective of element logic, it can be simply divided into several parts:

Element initialization

Competition stage

Both the crawling of snakes and the generation of food depend on coordinates. The simplest coordinates actually only require one index value. . Therefore, the composition of the arena is also very simple. It is composed of many small boxes (here represented by ⬛). Each box corresponds to a coordinate (index). What we want to do is a 28*28 arena, so its The index set is (0~783).

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

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

SNAKE

We mentioned the concept of coordinates earlier, and the snake body is composed of a series of regular coordinates.

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

Food

The generation of food is actually a random coordinate (index), but it should be noted that we need to avoid the coordinates of the snake itself.

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
}

The initialized element looks like this :

The snake's crawling

The snake's crawling logic has two basic elements, the number of direction steps. Earlier we mentioned that the composition of the arena is a 28 *28 determinant structure, then the mapping of direction and number of steps is relatively clear:

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

With two basic elements, we can get the next coordinate of each crawl. We You only need to add the corresponding coordinates to the snake's head each time it crawls, and remove the coordinates of the snake's tail to achieve the effect of the snake crawling.

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() }
}

cross-border logic

Greedy Snake Game The end of the rule is that the snake's head crosses the boundary when crawling (the boundary here refers to beyond the range of the arena) or touches the snake's body.

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)
}

Direction Control

The core operating logic of the Snake game It lies in manipulating the direction of the snake to catch food. So what we need to do is to capture the input of the user's direction keys to switch the direction. Temir provides the useInput function to monitor the user's input.

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

About UI drawing and presentation Temir provides some Vue components. We only need to build the terminal UI like building Flexbox layout:

<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>

At this point, the implementation of Snake is over, and we have a sense of the specific implementation. If you are interested, you can check the source code.

Demo

The above is the detailed content of Teach you how to easily make a snake game using Vue (with demo code). For more information, please follow other related articles on the PHP Chinese website!