Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Vue3+Canvas to achieve tank war game related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use Vue3+Canvas to achieve tank war game will have something to gain, let's take a look at it.

Architecture building

The technical selections of the project are vue3, vite, less, pnpm and ts. Create a new project according to the official website of vue3. Note: although I used vue3 to try something new, the frame features used by js in the main content are limited.

$pnpm create vite-template vue$ cd $pnpm install$ pnpm add-D less$ pnpm devCanvas constructor

The core of the game are canvas canvas and tank elements. We define two constructors.

Definition parameters and methods of canvas constructor: dom, dimension size, renderTo rendering function, drawText text drawing function, drawImageSlice picture drawing function

Canvas rendering

According to the general concept of game design optimization, canvas layer needs to be represented separately by different canvas layers for static background and dynamic elements, and only need to redraw dynamic elements for each update. I abstract a rendering function.

/ / render this.renderTo = function renderTo (container_id) {if (! is_rendered) {let container = document.getElementById (container_id) / / canvas starting coordinates dom = document.createElement ('canvas') / / create canvas canvas dom.setAttribute (' class', 'canvas') ctx = dom.getContext (' 2d') dom.setAttribute ('width', container.clientWidth) dom.setAttribute (' height') Container.clientHeight) / / canvas size dimension = {x: container.clientWidth, y: container.clientHeight,} container.insertBefore (dom, container.firstChild) / / insert cantainer container}} text rendering

If you want to know the specific location coordinates in the canvas, you can define a function that is executed when the mouse is rolled to draw the current location coordinates

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 before canvas repainting

The whole canvas needs to be wiped off before each repainting.

This.clear = function clear () {ctx.clearRect (0,0, dimension.x, dimension.y)} Core: drawing function

The drawing of tanks, bullets, buildings and other elements is completed through this function. To achieve distance is to use the snow blue map to capture the picture elements of a specific location through coordinates to obtain the UI of different tanks and other elements.

The turning of the tank is realized by rotate rotating elements.

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) / / change the starting point coordinates ctx.rotate ((Math.PI / 180) * rotatation) / / rotate x = x | 0 y = y | 0 ctx.drawImage (img_ele, sx, sy, sWidth, sHeight,-sWidth / 2) -sHeight / 2, sWidth, sHeight) ctx.restore () / / restore}

BattleCity constructor

The BattleCity constructor defines various configuration information for the tank, and method functions

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} to move the tank.

W, S, A, D of the keyboard are used to represent the up and down direction keys, and pressing the keyboard will trigger the move function of the corresponding tank instance, which is used to calculate the position coordinate information after movement. note: the judgment of the boundary condition must not go beyond the battlefield boundary.

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

The logic of tank firing bullets

First, you need to define the configuration information of the bullet and the constructor.

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 / / Determine the boundary type 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 html Hallelx switch (this.direction) {case DIRECTION.UP: hexamx = this.x + this.width / 2-this.type.dimension [0] / 2honomy = this.y-this.type.dimension [1] / 2 break case DIRECTION.DOWN: hexamx = this.x + this.width / 2-this.type.dimension [ 0] / 2 break case DIRECTION.RIGHT = this.y + this.height-this.type.dimension [1] / 2 break case DIRECTION.LEFT: hexamx = this.x houry = this.y + this.width / 2-this.type.dimension [0] / 2 break case DIRECTION.RIGHT: hexamx = this.x + This.height hype = this.y + this.width / 2-this.type.dimension [0] / 2} console.log ({x: hexamx) Y: generateId,}) return {x: hype, y: hype,}} this._generateId = function () {return uuidv4 ()} sprites [this. _ generateId ()] = this}

Then define a fire development function that, when fired, uses window.requestAnimationFrame () to achieve the effect of a loop, redrawing the latest location information each time.

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

This is the end of the article on "how to use Vue3+Canvas to realize the Tank War Game". Thank you for reading! I believe that everyone has a certain understanding of "how to use Vue3+Canvas to achieve tank war game" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.