記得幾年前剛做前端開發的時候，跟著師傅用純 es5 實現了這款坦克大戰，可以說我入行前端是從 javaScript 小游戲開始的，時間已匆匆過去了數年，前端發展日新月異，各種新框架、新概念層出不窮，很容易就迷失在對各種新技術的盲目學習和應用中，真正的編程是什么呢？值得思考的問題。我準備用 vue3 重新實現一下這款游戲，順便回顧和梳理下自己的知識體系。

W/上 S/下 A/左 D/右 F/射擊

讓我們開始吧！

架構搭建

項目技術選型為 vue3、vite、less、pnpm、ts，按照vue3 官網文檔來新建項目，注意：雖然我用了 vue3 實際上只是強行嘗鮮，主體內容都是 js 用到的框架特性有限。

$ pnpm create vite <project-name> -- --template vue

$ cd <project-name>

$ pnpm install

$ pnpm add -D less

$ pnpm dev

Canvas 構造函數

游戲的核心為 canvas 畫布和坦克元素，我們定義兩個構造函數

canvas 構造函數的定義參數、方法：dom、dimension 尺寸、renderTo 渲染函數、drawText 文本繪制函數、drawImageSlice 圖片繪制函數

畫布繪制

canvas 圖層按照一般的游戲設計優化理念，需要為靜態背景和動態元素單獨用不同的 canvas 圖層表示，每次更新時只需要重新繪制動態元素就好了，我抽象出一個渲染函數

// 渲染

this.renderTo = function renderTo(container_id) {

if (!is_rendered) {

let container = document.getElementById(container_id)

//畫布起始坐標

dom = document.createElement('canvas') // 創造canvas畫布

dom.setAttribute('class', 'canvas')

ctx = dom.getContext('2d')

dom.setAttribute('width', container.clientWidth)

dom.setAttribute('height', container.clientHeight)

// 畫布尺寸

dimension = {

x: container.clientWidth,

y: container.clientHeight,

}

container.insertBefore(dom, container.firstChild) // 插入cantainer容器

}

}

文本渲染

想要知道畫布中的具體位置坐標，可以定義一個函數，當鼠標滑動時候執行來將當前位置坐標繪制出來

this.drawText = function drawText(text, offset_left, offset_top, font) {

ctx.font = font || '25px Calibri'

ctx.fillStyle = '#fff'

ctx.fillText(text, offset_left, offset_top)

}

圖片

畫布重繪前的 clear

每次重繪前需要先擦掉整個畫布

this.clear = function clear() {

ctx.clearRect(0, 0, dimension.x, dimension.y)

}

核心：繪制函數

坦克、子彈、建筑等元素等繪制都是通過這個函數來完成的，實現遠離是利用來雪碧圖，通過坐標抓取特定位置的圖片元素來獲取各種不同坦克等元素的UI；

通過 rotate 旋轉元素來實現坦克的轉向；

this.drawImageSlice = function drawImage(img_ele, sx, sy, sWidth, sHeight, x, y, rotatation) {

ctx.save()

ctx.translate((2 * x + sWidth) / 2, (2 * y + sHeight) / 2) // 改變起始點坐標

ctx.rotate((Math.PI / 180) * rotatation) // 旋轉

x = x || 0

y = y || 0

ctx.drawImage(img_ele, sx, sy, sWidth, sHeight, -sWidth / 2, -sHeight / 2, sWidth, sHeight)

ctx.restore() // 復原

}

圖片

BattleCity 構造函數

BattleCity 構造函數定義坦克的各種配置信息，和方法函數

let TankConfig = function (cfg) {

this.explosion_count = cfg.explosion_count

this.width = cfg.type.dimension[0]

this.height = cfg.type.dimension[1]

this.missle_type = cfg.missle_type || MISSILE_TYPE.NORMAL

this.x = cfg.x || 0

this.y = cfg.y || 0

this.direction = cfg.direction || DIRECTION.UP

this.is_player = cfg.is_player || 0

this.moving = cfg.moving || 0

this.alive = cfg.alive || 1

this.border_x = cfg.border_x || 0

this.border_y = cfg.border_y || 0

this.speed = cfg.speed || TANK_SPEED

this.direction = cfg.direction || DIRECTION.UP

this.type = cfg.type || TANK_TYPE.PLAYER0

}

實現坦克的移動

用鍵盤的 W、S、A、D、來表示上下左右方向鍵，按下鍵盤則會觸發對應坦克實例的 move 函數，用于計算移動后的位置坐標信息，注意：對邊界條件的判斷，不可使其超出戰場邊界。

CanvasSprite.prototype.move = function (d, obstacle_sprites) {

this.direction = d

switch (d) {

case DIRECTION.UP:

if ((obstacle_sprites && !this.checkRangeOverlap(obstacle_sprites)) || !obstacle_sprites) {

this.y -= this.speed

if (this.y <= 5) {

if (!this.out_of_border_die) {

this.y = 0

} else {

// this.alive = 0;

this.explode()

document.getElementById('steelhit').play()

}

}

}

break

case DIRECTION.DOWN:

if ((obstacle_sprites && !this.checkRangeOverlap(obstacle_sprites)) || !obstacle_sprites) {

this.y += this.speed

if (this.y + this.height >= this.border_y - 10) {

if (!this.out_of_border_die) {

this.y = this.border_y - this.height

} else {

// this.alive = 0;

this.explode()

document.getElementById('steelhit').play()

}

}

}

break

case DIRECTION.LEFT:

if ((obstacle_sprites && !this.checkRangeOverlap(obstacle_sprites)) || !obstacle_sprites) {

this.x -= this.speed

if (this.x <= 5) {

if (!this.out_of_border_die) {

this.x = 0

} else {

// this.alive = 0;

this.explode()

document.getElementById('steelhit').play()

}

}

}

break

case DIRECTION.RIGHT:

if ((obstacle_sprites && !this.checkRangeOverlap(obstacle_sprites)) || !obstacle_sprites) {

this.x += this.speed

if (this.x + this.width >= this.border_x - 10) {

if (!this.out_of_border_die) {

this.x = this.border_x - this.width

} else {

// this.alive = 0;

this.explode()

document.getElementById('steelhit').play()

}

}

}

break

}

}

坦克發射子彈的邏輯

首先需要定義子彈的配置信息以及構造函數；

let MissileConfig = function (cfg) {

this.x = cfg.x

this.y = cfg.y

this.type = cfg.type || MISSILE_TYPE.NORMAL

this.width = cfg.width || this.type.dimension[0]

this.height = cfg.height || this.type.dimension[1]

this.direction = cfg.direction || DIRECTION.UP

this.is_from_player = cfg.is_from_player

this.out_of_border_die = cfg.out_of_border_die || 1 // 判斷邊界類型

this.border_x = cfg.border_x || 0

this.border_y = cfg.border_y || 0

this.speed = cfg.speed || TANK_SPEED

this.alive = cfg.alive || 1

}

var Missile = function (MissileConfig) {

var x = MissileConfig.x

var y = MissileConfig.y

var width = MissileConfig.width

var height = MissileConfig.width

var direction = MissileConfig.direction

this.type = MissileConfig.type

this.is_from_player = MissileConfig.is_from_player || 0

var explosion_count = 0

CanvasSprite.apply(this, [

{

alive: 1,

out_of_border_die: 1,

border_y: HEIGHT,

border_x: WIDTH,

speed: MISSILE_SPEED,

direction: direction,

x: x,

y: y,

width: width,

height: height,

},

])

this.isDestroied = function () {

return explosion_count > 0

}

this.explode = function () {

if (explosion_count++ === 5) {

this.alive = 0

}

}

this.getImg = function () {

if (explosion_count > 0) {

return {

width: TANK_EXPLOSION_FRAME[explosion_count].dimension[0],

height: TANK_EXPLOSION_FRAME[explosion_count].dimension[1],

offset_x: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[0],

offset_y: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[1],

}

} else {

return {

width: width,

height: height,

offset_x: this.type.image_coordinates[0],

offset_y: this.type.image_coordinates[1],

}

}

}

this.getHeadCoordinates = function () {

var h_x, h_y

switch (this.direction) {

case DIRECTION.UP:

h_x = this.x + this.width / 2 - this.type.dimension[0] / 2

h_y = this.y - this.type.dimension[1] / 2

break

case DIRECTION.DOWN:

h_x = this.x + this.width / 2 - this.type.dimension[0] / 2

h_y = this.y + this.height - this.type.dimension[1] / 2

break

case DIRECTION.LEFT:

h_x = this.x

h_y = this.y + this.width / 2 - this.type.dimension[0] / 2

break

case DIRECTION.RIGHT:

h_x = this.x + this.height

h_y = this.y + this.width / 2 - this.type.dimension[0] / 2

}

console.log({

x: h_x,

y: h_y,

})

return {

x: h_x,

y: h_y,

}

}

this._generateId = function () {

return uuidv4()

}

sprites[this._generateId()] = this

}

然后再定義一個 fire 開發函數，當開火后，會使用 window.requestAnimationFrame() 來達到循環的效果，每次重繪最新的位置信息。

this.fire = function (boolean_type) {

if (!this.missle || !this.missle.alive) {

var coor = this.getCannonCoordinates()

this.missle = new Missile(

new MissileConfig({

x: coor.x,

y: coor.y,

direction: this.direction,

type: this.miss_type,

is_from_player: boolean_type,

})

)

if (boolean_type) {

document.getElementById('shoot').play()

}

}

}

總結

利用 requestAnimationFrame 來實現循環刷新畫布，通過修改各元素位置坐標值，在下一次畫布重繪時更新視圖，這是階段交互的基本邏輯

上一篇

互聯網涼了？參加長沙Java培訓能找到工作嗎？

下一篇

3種Javascript圖片預加載的方法詳解