How to use VUE and Canvas to implement a Thunder Fighter typing game

How to use VUE and Canvas to implement a Thunder Fighter typing game

Today we are going to implement a Thunder Fighter typing game. The gameplay is very simple. Each "enemy" is some English words. If you type the letters of the word correctly on the keyboard, the plane will fire bullets one by one to destroy the "enemy". You need to kill the current "enemy" before you can kill the next one. It is a game that tests hand speed and word proficiency.

First, let’s take a look at the final effect:

emmmmmmmmmmmmm, the UI interface is very simple. Implement the basic functions first, and then consider the advanced UI.

First, let's analyze the interface composition:

(1) The plane is fixed in the middle of the bottom of the picture;

(2) Enemies (words) randomly generated from the top of the screen;

(3) A bullet fired from the front of the aircraft and heading straight for the enemy;

(4) Score display after the game ends.

Compared with previous games, this time the sports part seems to be more numerous and more complicated. In Flappy Bird, although the pipe is moving, the x-coordinate of the bird and the spacing and width of the pipe remain unchanged, so it is easier to calculate the boundary. In the pinball and bricks game, the wooden boards and bricks are relatively simple or fixed coordinates, so you only need to determine the boundary of the pinball and the contact area of ​​the bricks. In the Thunder Fighter Word Elimination game, whether it is the landing target word or the flying bullet, they all have their own movement trajectories, but the bullets have to follow the target, so there is a real-time trajectory calculation operation.

A tall building starts from the ground. After saying so much, let’s start with the simplest one!

1. The plane fixed in the middle of the bottom of the screen

This is very simple and there is nothing much to say. Here the default width and height of the aircraft are 40 pixels, and then the aircraft is drawn in the bottom center of the screen:

drawPlane() {
      let _this = this;
      _this.ctx.save();
      _this.ctx.drawImage(
        _this.planeImg,
        _this.clientWidth / 2 - 20,
        _this.clientHeight - 20 - 40,
        40,
        40
      );
      _this.ctx.restore();
},

2. Enemies randomly generated from the top of the screen

Here, by default, only 3 word targets will appear on the screen at a time, the target's y-axis movement speed is 1.3, and the target's radius is 10:

const _MAX_TARGET = 3; // The maximum number of targets that appear in the screen at one time const _TARGET_CONFIG = {
  // Fixed parameters of the target speed: 1.3,

  radius: 10

};

Then we first randomly take out _MAX_TARGET non-repeating words from the word library array and put the remaining words into the circular word library this.wordsPool:

generateWord(number) {
      // Randomly pick a word from the pool that does not overlap with the displayed words let arr = [];
      for (let i = 0; i < number; i++) {
        let random = Math.floor(Math.random() * this.wordsPool.length);
        arr.push(this.wordsPool[random]);
        this.wordsPool.splice(random, 1);
      }
      return arr;
},
generateTarget() {
      // Randomly generate targets let _this = this;
      let length = _this.targetArr.length;
      if (length < _MAX_TARGET) {
        let txtArr = _this.generateWord(_MAX_TARGET - length);
        for (let i = 0; i < _MAX_TARGET - length; i++) {
          _this.targetArr.push({
            x: _this.getRandomInt(
              _TARGET_CONFIG.radius,
              _this.clientWidth - _TARGET_CONFIG.radius
            ),
            y: _TARGET_CONFIG.radius * 2,
            txt: txtArr[i],
            typeIndex: -1,
            hitIndex: -1,
            dx: (_TARGET_CONFIG.speed * Math.random().toFixed(1)) / 2,
            dy: _TARGET_CONFIG.speed * Math.random().toFixed(1),
            rotate: 0
          });
        }
      }
}

It can be seen that this.targetArr is an array that stores the target object:

An initial target has x randomly distributed across the width of the screen;

The y-axis value is the diameter;

txt records the words represented by the target;

typeIndex records the index subscript of the character being typed when the word "bombing" is typed (used to separate typed characters from untyped characters);

hitIndex records the index of the bullet bombing the word "bombing" (because the bullet actually bombs the target after hitting the word, after all, the bullet has a flight time, so hitIndex is used to determine when the bullet is shattered and disappears);

dx is the target's offset distance on the x-axis per frame;

dy is the target's offset distance on the y-axis per frame;

rotate sets the target's rotation angle.

OK, now that we have generated three targets, let's move them from top to bottom:

drawTarget() {
      // Draw the target frame by frame let _this = this;
      _this.targetArr.forEach((item, index) => {
        _this.ctx.save();
        _this.ctx.translate(item.x, item.y); //Set the center point of rotation_this.ctx.beginPath();
        _this.ctx.font = "14px Arial";
        if (
          index === _this.currentIndex ||
          item.typeIndex === item.txt.length - 1
        ) {
          _this.drawText(
            item.txt.substring(0, item.typeIndex + 1),
            -item.txt.length * 3,
            _TARGET_CONFIG.radius * 2,
            "gray"
          );
          let width = _this.ctx.measureText(
            item.txt.substring(0, item.typeIndex + 1)
          ).width; // Get the width of the tapped text_this.drawText(
            item.txt.substring(item.typeIndex + 1, item.txt.length),
            -item.txt.length * 3 + width,
            _TARGET_CONFIG.radius * 2,
            "red"
          );
        } else {
          _this.drawText(
            item.txt,
            -item.txt.length * 3,
            _TARGET_CONFIG.radius * 2,
            "yellow"
          );
        }
 
        _this.ctx.closePath();
        _this.ctx.rotate((item.rotate * Math.PI) / 180);
        _this.ctx.drawImage(
          _this.targetImg,
          -1 * _TARGET_CONFIG.radius,
          -1 * _TARGET_CONFIG.radius,
          _TARGET_CONFIG.radius * 2,
          _TARGET_CONFIG.radius * 2
        );
        _this.ctx.restore();
        item.y += item.dy;
        item.x += item.dx;
        if (item.x < 0 || item.x > _this.clientWidth) {
          item.dx *= -1;
        }
        if (item.y > _this.clientHeight - _TARGET_CONFIG.radius * 2) {
          //Hit the bottom_this.gameOver = true;
        }
        // Rotate item.rotate++;
      });
}

There is nothing special about drawing the target in this step. We just randomly increase dx and dy and bounce when it hits the left and right edges. The main point is the drawing of words. The word is divided into two parts through typeIndex, the tapped characters are set to gray, and then the width of the tapped characters is obtained through measureText to set the x-axis offset of the untapped characters, and the untapped characters are set to red to prompt the player that this word is a target under attack.

3. The bullet is fired from the front of the plane and goes straight to the enemy.

Bullets are a key part of this game. What aspects should be considered when drawing bullets?

(1) The target is always moving, and the fired bullet must always "track" the target, so the path changes dynamically;

(2) It takes a certain number of bullets to destroy a target, so when will the bullets be erased from the screen?

(3) When a target word is hit, the next batch of bullets will be fired at the next target, so the bullet path is unique;

(4) How to draw the bullet trailing effect;

(5) If the target word is locked, the player must finish typing the current word before hitting the next word

Here are some variables to set:

bulletArr: [], //Store bullet objects

currentIndex: -1 //The index of the currently locked target in targetArr

First, let's write the function to be triggered when the keyboard is pressed:

handleKeyPress(key) {
      //Keyboard pressed, determine the current target let _this = this;
      if (_this.currentIndex === -1) {
        // There is currently no target being shot at let index = _this.targetArr.findIndex(item => {
          return item.txt.indexOf(key) === 0;
        });
        if (index !== -1) {
          _this.currentIndex = index;
          _this.targetArr[index].typeIndex = 0;
          _this.createBullet(index);
        }
      } else {
        // A target is already being shot if (
          key ===
          _this.targetArr[_this.currentIndex].txt.split("")[
            _this.targetArr[_this.currentIndex].typeIndex + 1
          ]
        ) {
          // Get the target object_this.targetArr[_this.currentIndex].typeIndex++;
          _this.createBullet(_this.currentIndex);
 
          if (
            _this.targetArr[_this.currentIndex].typeIndex ===
            _this.targetArr[_this.currentIndex].txt.length - 1
          ) {
            // This target has already been shot_this.currentIndex = -1;
          }
        }
      }
},
// Fire a bullet createBullet(index) {
      let _this = this;
      this.bulletArr.push({
        dx: 1,
        dy: 4,
        x: _this.clientWidth / 2,
        y: _this.clientHeight - 60,
        targetIndex: index
      });
}

What this function does is very clear. It gets the character currently pressed on the keyboard. If currentIndex === -1, it proves that there is no target being attacked, so it goes to the target array to see which word has the first letter equal to the character, then sets currentIndex to the index of the word, and fires a bullet. If there is already a target being attacked, it checks whether the first character of the word that has not been hit matches. If so, it increases the typeIndex of the target object and fires a bullet. If the current target has been hit, it resets currentIndex to -1.

Next is to draw the bullet:

drawBullet() {
      // Draw bullets frame by frame let _this = this;
      // Determine whether the bullet has hit the target if (_this.bulletArr.length === 0) {
        return;
      }
      _this.bulletArr = _this.bulletArr.filter(_this.firedTarget);
      _this.bulletArr.forEach(item => {
        let targetX = _this.targetArr[item.targetIndex].x;
        let targetY = _this.targetArr[item.targetIndex].y;
        let k =
          (_this.clientHeight - 60 - targetY) /
          (_this.clientWidth / 2 - targetX); // Slope of the aircraft head and the target let b = targetY - k * targetX; // Constant b
        item.y = item.y - bullet.dy; // y-axis offset by one unit item.x = (item.y - b) / k;
        for (let i = 0; i < 15; i++) {
          // Draw the trailing effect_this.ctx.beginPath();
          _this.ctx.arc(
            (item.y + i * 1.8 - b) / k,
            item.y + i * 1.8,
            4 - 0.2 * i,
            0,
            2 * Math.PI
          );
          _this.ctx.fillStyle = `rgba(193,255,255,${1 - 0.08 * i})`;
          _this.ctx.fill();
          _this.ctx.closePath();
        }
      });
},
firedTarget(item) {
      // Determine whether the target is hit let _this = this;
      if (
        item.x > _this.targetArr[item.targetIndex].x - _TARGET_CONFIG.radius &&
        item.x < _this.targetArr[item.targetIndex].x + _TARGET_CONFIG.radius &&
        item.y > _this.targetArr[item.targetIndex].y - _TARGET_CONFIG.radius &&
        item.y < _this.targetArr[item.targetIndex].y + _TARGET_CONFIG.radius
      ) {
        // The bullet hit the target let arrIndex = item.targetIndex;
        _this.targetArr[arrIndex].hitIndex++;
        if (
          _this.targetArr[arrIndex].txt.length - 1 ===
          _this.targetArr[arrIndex].hitIndex
        ) {
          // All bullets hit the target let word = _this.targetArr[arrIndex].txt;
          _this.targetArr[arrIndex] = {
            // Generate a new target x: _this.getRandomInt(
              _TARGET_CONFIG.radius,
              _this.clientWidth - _TARGET_CONFIG.radius
            ),
            y: _TARGET_CONFIG.radius * 2,
            txt: _this.generateWord(1)[0],
            typeIndex: -1,
            hitIndex: -1,
            dx: (_TARGET_CONFIG.speed * Math.random().toFixed(1)) / 2,
            dy: _TARGET_CONFIG.speed * Math.random().toFixed(1),
            rotate: 0
          };
          _this.wordsPool.push(word); // The hit target word returns to the pool_this.score++;
        }
        return false;
      } else {
        return true;
      }
}

In fact, it is also very simple. We use targetIndex in the bullet object to record the target index attacked by the bullet. Then we solve the equation y = kx+b to get the orbit function of the aircraft head (the starting point of the bullet) and the target. We calculate the moving coordinates of each bullet in each frame, and then we can draw the bullet.

The trailing effect is achieved by drawing a number of circles with gradually decreasing transparency and radius along the growth direction of the track y-axis.

In the firedTarget() function, it is used to filter out the bullets that have hit the target. In order not to affect the index of other targets still being attacked in targetArr, splice deletion is not used, but the value of the destroyed target is directly reset, a new word is selected from wordPool, and the current broken word is thrown back into the pool, so as to ensure that no duplicate targets appear in the picture.

4. Score text effect after the game ends

The game ends when the target touches the bottom.

This is actually an easter egg. How can we use canvas to draw this kind of flashing and haloed text? Just switch the color and stack the buff, no, just stack the stroke.

drawGameOver() {
      let _this = this;
      //Save the state of the context object_this.ctx.save();
      _this.ctx.font = "34px Arial";
      _this.ctx.strokeStyle = _this.colors[0];
      _this.ctx.lineWidth = 2;
      //Halo_this.ctx.shadowColor = "#FFFFE0";
      let txt = "Game over, score: " + _this.score;
      let width = _this.ctx.measureText(txt).width;
      for (let i = 60; i > 3; i -= 2) {
        _this.ctx.shadowBlur = i;
        _this.ctx.strokeText(txt, _this.clientWidth / 2 - width / 2, 300);
      }
      _this.ctx.restore();
      _this.colors.reverse();
}

Okay, okay, we have a fairly complete game up to this point, but the UI is a bit rough. If you want to achieve the cool explosion effects like the real Thunder Fighter, you will need a lot of materials and canvas drawing.

Canvas is very powerful and fun. As long as you have enough imagination, you can draw whatever you want on this canvas.

As usual, here is the complete code of Vue for your reference:

<template>
  <div class="type-game">
    <canvas id="type" width="400" height="600"></canvas>
  </div>
</template>
 
<script>
const _MAX_TARGET = 3; // The maximum number of targets that appear in the screen at one time const _TARGET_CONFIG = {
  // Fixed parameters of the target speed: 1.3,
  radius: 10
};
const _DICTIONARY = ["apple", "orange", "blue", "green", "red", "current"];
export default {
  name: "TypeGame",
  data() {
    return {
      ctx: null,
      clientWidth: 0,
      clientHeight: 0,
      bulletArr: [], // The bullet on the screen targetArr: [], // Store the current target targetImg: null,
      planeImg: null,
      currentIndex: -1,
      wordsPool: [],
      score: 0,
      gameOver: false,
      colors: ["#FFFF00", "#FF6666"]
    };
  },
  mounted() {
    let _this = this;
    _this.wordsPool = _DICTIONARY.concat([]);
    let container = document.getElementById("type");
    _this.clientWidth = container.width;
    _this.clientHeight = container.height;
    _this.ctx = container.getContext("2d");
    _this.targetImg = new Image();
    _this.targetImg.src = require("@/assets/img/target.png");
 
    _this.planeImg = new Image();
    _this.planeImg.src = require("@/assets/img/plane.png");
 
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key >= 65 && key <= 90) {
        _this.handleKeyPress(String.fromCharCode(key).toLowerCase());
      }
    };
 
    _this.targetImg.onload = function() {
      _this.generateTarget();
      (function animloop() {
        if (!_this.gameOver) {
          _this.drawAll();
        } else {
          _this.drawGameOver();
        }
        window.requestAnimationFrame(animloop);
      })();
    };
  },
  methods: {
    drawGameOver() {
      let _this = this;
      //Save the state of the context object_this.ctx.save();
      _this.ctx.font = "34px Arial";
      _this.ctx.strokeStyle = _this.colors[0];
      _this.ctx.lineWidth = 2;
      //Halo_this.ctx.shadowColor = "#FFFFE0";
      let txt = "Game over, score: " + _this.score;
      let width = _this.ctx.measureText(txt).width;
      for (let i = 60; i > 3; i -= 2) {
        _this.ctx.shadowBlur = i;
        _this.ctx.strokeText(txt, _this.clientWidth / 2 - width / 2, 300);
      }
      _this.ctx.restore();
      _this.colors.reverse();
    },
    drawAll() {
      let _this = this;
      _this.ctx.clearRect(0, 0, _this.clientWidth, _this.clientHeight);
      _this.drawPlane(0);
      _this.drawBullet();
      _this.drawTarget();
      _this.drawScore();
    },
    drawPlane() {
      let _this = this;
      _this.ctx.save();
      _this.ctx.drawImage(
        _this.planeImg,
        _this.clientWidth / 2 - 20,
        _this.clientHeight - 20 - 40,
        40,
        40
      );
      _this.ctx.restore();
    },
    generateWord(number) {
      // Randomly pick a word from the pool that does not overlap with the displayed words let arr = [];
      for (let i = 0; i < number; i++) {
        let random = Math.floor(Math.random() * this.wordsPool.length);
        arr.push(this.wordsPool[random]);
        this.wordsPool.splice(random, 1);
      }
      return arr;
    },
    generateTarget() {
      // Randomly generate targets let _this = this;
      let length = _this.targetArr.length;
      if (length < _MAX_TARGET) {
        let txtArr = _this.generateWord(_MAX_TARGET - length);
        for (let i = 0; i < _MAX_TARGET - length; i++) {
          _this.targetArr.push({
            x: _this.getRandomInt(
              _TARGET_CONFIG.radius,
              _this.clientWidth - _TARGET_CONFIG.radius
            ),
            y: _TARGET_CONFIG.radius * 2,
            txt: txtArr[i],
            typeIndex: -1,
            hitIndex: -1,
            dx: (_TARGET_CONFIG.speed * Math.random().toFixed(1)) / 2,
            dy: _TARGET_CONFIG.speed * Math.random().toFixed(1),
            rotate: 0
          });
        }
      }
    },
    getRandomInt(n, m) {
      return Math.floor(Math.random() * (m - n + 1)) + n;
    },
    drawText(txt, x, y, color) {
      let _this = this;
      _this.ctx.fillStyle = color;
      _this.ctx.fillText(txt, x, y);
    },
    drawScore() {
      // Score this.drawText("Score: " + this.score, 10, this.clientHeight - 10, "#fff");
    },
    drawTarget() {
      // Draw the target frame by frame let _this = this;
      _this.targetArr.forEach((item, index) => {
        _this.ctx.save();
        _this.ctx.translate(item.x, item.y); //Set the center point of rotation_this.ctx.beginPath();
        _this.ctx.font = "14px Arial";
        if (
          index === _this.currentIndex ||
          item.typeIndex === item.txt.length - 1
        ) {
          _this.drawText(
            item.txt.substring(0, item.typeIndex + 1),
            -item.txt.length * 3,
            _TARGET_CONFIG.radius * 2,
            "gray"
          );
          let width = _this.ctx.measureText(
            item.txt.substring(0, item.typeIndex + 1)
          ).width; // Get the width of the tapped text_this.drawText(
            item.txt.substring(item.typeIndex + 1, item.txt.length),
            -item.txt.length * 3 + width,
            _TARGET_CONFIG.radius * 2,
            "red"
          );
        } else {
          _this.drawText(
            item.txt,
            -item.txt.length * 3,
            _TARGET_CONFIG.radius * 2,
            "yellow"
          );
        }
 
        _this.ctx.closePath();
        _this.ctx.rotate((item.rotate * Math.PI) / 180);
        _this.ctx.drawImage(
          _this.targetImg,
          -1 * _TARGET_CONFIG.radius,
          -1 * _TARGET_CONFIG.radius,
          _TARGET_CONFIG.radius * 2,
          _TARGET_CONFIG.radius * 2
        );
        _this.ctx.restore();
        item.y += item.dy;
        item.x += item.dx;
        if (item.x < 0 || item.x > _this.clientWidth) {
          item.dx *= -1;
        }
        if (item.y > _this.clientHeight - _TARGET_CONFIG.radius * 2) {
          //Hit the bottom_this.gameOver = true;
        }
        // Rotate item.rotate++;
      });
    },
    handleKeyPress(key) {
      //Keyboard pressed, determine the current target let _this = this;
      if (_this.currentIndex === -1) {
        // There is currently no target being shot at let index = _this.targetArr.findIndex(item => {
          return item.txt.indexOf(key) === 0;
        });
        if (index !== -1) {
          _this.currentIndex = index;
          _this.targetArr[index].typeIndex = 0;
          _this.createBullet(index);
        }
      } else {
        // A target is already being shot if (
          key ===
          _this.targetArr[_this.currentIndex].txt.split("")[
            _this.targetArr[_this.currentIndex].typeIndex + 1
          ]
        ) {
          // Get the target object_this.targetArr[_this.currentIndex].typeIndex++;
          _this.createBullet(_this.currentIndex);
 
          if (
            _this.targetArr[_this.currentIndex].typeIndex ===
            _this.targetArr[_this.currentIndex].txt.length - 1
          ) {
            // This target has already been shot_this.currentIndex = -1;
          }
        }
      }
    },
    // Fire a bullet createBullet(index) {
      let _this = this;
      this.bulletArr.push({
        dx: 1,
        dy: 4,
        x: _this.clientWidth / 2,
        y: _this.clientHeight - 60,
        targetIndex: index
      });
    },
    firedTarget(item) {
      // Determine whether the target is hit let _this = this;
      if (
        item.x > _this.targetArr[item.targetIndex].x - _TARGET_CONFIG.radius &&
        item.x < _this.targetArr[item.targetIndex].x + _TARGET_CONFIG.radius &&
        item.y > _this.targetArr[item.targetIndex].y - _TARGET_CONFIG.radius &&
        item.y < _this.targetArr[item.targetIndex].y + _TARGET_CONFIG.radius
      ) {
        // The bullet hit the target let arrIndex = item.targetIndex;
        _this.targetArr[arrIndex].hitIndex++;
        if (
          _this.targetArr[arrIndex].txt.length - 1 ===
          _this.targetArr[arrIndex].hitIndex
        ) {
          // All bullets hit the target let word = _this.targetArr[arrIndex].txt;
          _this.targetArr[arrIndex] = {
            // Generate a new target x: _this.getRandomInt(
              _TARGET_CONFIG.radius,
              _this.clientWidth - _TARGET_CONFIG.radius
            ),
            y: _TARGET_CONFIG.radius * 2,
            txt: _this.generateWord(1)[0],
            typeIndex: -1,
            hitIndex: -1,
            dx: (_TARGET_CONFIG.speed * Math.random().toFixed(1)) / 2,
            dy: _TARGET_CONFIG.speed * Math.random().toFixed(1),
            rotate: 0
          };
          _this.wordsPool.push(word); // The hit target word returns to the pool_this.score++;
        }
        return false;
      } else {
        return true;
      }
    },
    drawBullet() {
      // Draw bullets frame by frame let _this = this;
      // Determine whether the bullet has hit the target if (_this.bulletArr.length === 0) {
        return;
      }
      _this.bulletArr = _this.bulletArr.filter(_this.firedTarget);
      _this.bulletArr.forEach(item => {
        let targetX = _this.targetArr[item.targetIndex].x;
        let targetY = _this.targetArr[item.targetIndex].y;
        let k =
          (_this.clientHeight - 60 - targetY) /
          (_this.clientWidth / 2 - targetX); // Slope of the aircraft head and the target let b = targetY - k * targetX; // Constant b
        item.y = item.y - 4; // y-axis offset by one unit item.x = (item.y - b) / k;
        for (let i = 0; i < 15; i++) {
          // Draw the trailing effect_this.ctx.beginPath();
          _this.ctx.arc(
            (item.y + i * 1.8 - b) / k,
            item.y + i * 1.8,
            4 - 0.2 * i,
            0,
            2 * Math.PI
          );
          _this.ctx.fillStyle = `rgba(193,255,255,${1 - 0.08 * i})`;
          _this.ctx.fill();
          _this.ctx.closePath();
        }
      });
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.type-game {
  #type {
    background: #2a4546;
  }
}
</style>

The above is the details of how to use VUE and Canvas to implement the Thunder Fighter typing game. For more information about the VUE Thunder Fighter game, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue uses Canvas to generate random sized and non-overlapping circles
  • Vue uses canvas to realize image compression upload
  • How to draw the timeline with vue+canvas
  • VUE+Canvas realizes the whole process of a simple Gobang game
  • VUE+Canvas implements the game of God of Wealth receiving ingots
  • VUE+Canvas implements the sample code of the desktop pinball brick-breaking game
  • Vue uses the mouse to draw a rectangle on Canvas
  • Vue uses canvas to implement mobile handwritten signature
  • Vue+canvas realizes puzzle game
  • Vue uses canvas handwriting input to recognize Chinese

<<:  The main differences between MySQL 4.1/5.0/5.1/5.5/5.6

>>:  nginx proxy_cache batch cache clearing script introduction

Recommend

How to start jar package and run it in the background in Linux

The Linux command to run the jar package is as fo...

How to deploy Redis 6.x cluster through Docker

System environment: Redis version: 6.0.8 Docker v...

How to use mysqladmin to get the current TPS and QPS of a MySQL instance

mysqladmin is an official mysql client program th...

Details of using Vue slot

Table of contents 1. Why use slots? 1.1 slot 1.2 ...

Implementation of Docker packaging image and configuration modification

I have encountered many problems in learning Dock...

MySQL 5.7.25 installation and configuration method graphic tutorial

There are two types of MySQL installation files, ...

MySql Installer 8.0.18 Visual Installation Tutorial with Pictures and Text

Table of contents 1. MySQL 8.0.18 installation 2....

Teach you how to make cool barcode effects

statement : This article teaches you how to imple...

A brief discussion on the font settings in web pages

Setting the font for the entire site has always b...

The implementation principle of Tomcat correcting the JDK native thread pool bug

To improve processing power and concurrency, Web ...

Vue plugin error: Vue.js is detected on this page. Problem solved

Vue plugin reports an error: Vue.js is detected o...

A brief discussion on CSS height collapse problem

Performance For example: HTML: <div class=&quo...

Summary of the minesweeping project implemented in JS

This article shares the summary of the JS mineswe...

The difference between absolute path and relative path in web page creation

1. Absolute path First of all, on the local compu...

How to reset the password if the Ubuntu 18.04 server password is forgotten or tampered with

Recently, two accounts on the server were hacked ...