Vue3+Canvas實現坦克大戰遊戲
前言
記得幾年前剛做前端開發的時候,跟著師傅用純 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 來實現循環刷新畫佈,通過修改各元素位置坐標值,在下一次畫佈重繪時更新視圖,這是階段交互的基本邏輯;
到這裡已經實現瞭坦克移動和發射子彈的效果。
以上就是Vue3+Canvas實現坦克大戰遊戲的詳細內容,更多關於Vue3 Canvas坦克大戰的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 基於canvas實現超炫酷的流水燈效果
- Vue3+Canvas實現簡易的貪吃蛇遊戲
- JavaScript canvas實現九宮格切圖效果
- vue實現監控視頻直播的示例代碼
- JavaScript 實現生命遊戲