Hello everyone, I am Han Cao 😈, a grass code ape 🐒. Intermittent warm blood 🔥, continuous sand sculpture 🌟 if you like my article, you can pay attention to ➕ like, and grow with me ~

Preface – Background introduction

Domestic AAA game feelings

Friends who know me well know that I am a very fond of playing games. I even published a children’s Day talk game memory — Resident Evil 5. I also played many games when I was young, from card game to PS3 and PS4.

Us these 3 a child growing up game playing abroad has always been a little wish, is actually a big dream), is to belong to our domestic 3 a game, and is developed by Chinese people, not just people make, but contain the culture of China, we have a profound historical culture in five thousand, our game should be cultural output, Let the world’s game players see Chinese games, Chinese culture, Chinese charm.

Will you feel familiar with the above words, yes, domestic animation, the same, watching Japanese animation beauty long childhood children have been looking forward to the rise of domestic animation, suddenly that year, the Monkey King returned, wearing tiger Tiger wind gold armor, wearing hot fireworks red robe, hand shaking tianhe Jingdi god precious iron. It opened a new way for domestic animation films, but the back of the Monkey King game is not satisfactory, however, last year, the game science released a trailer for the Monkey King, and this year, a new trailer for unreal engine 5. See my blood boiling, last time is the great saint, this is the great saint, Wukong to open up my love of the game industry’s domestic 3A new road. “Here because cold grass 🌿 is too passionate, so there is this article, and these hundreds of lines of code”

The kids who played grew up and became engineers

Cold back now, that’s right, the grass watching the demo video for a long time not calm now, now cold grass 🌿 shed childish, became a lurching in the front-end industry engineers a year, at noon today and friends to eat delicious (yes, must have a good weekend ~), and the news of his I said a lot of black fairy wukong, I more say more excited, thought, Then I use my technology to express my expectation of domestic games and my love for games and front-end industry.

It has always been my original ambition to bring you interesting front-end content and do more interesting things with front-end. Along the way, thank you ☀️

Thesis – Using the front end to return to childhood

I have never used canvas before, and I wrote it bit by bit. Do not make fun of the code quality, because I know the code quality is not good 🌟

Hancao present to Game Science in 2021.

Since I wanted to produce a front-end work with feelings, I also spent a long time on the design and tried many ways to reflect my creativity, but the effect was not very good. While exploring the coding, I finally came up with the design of this work, just as my title said, the front-end work dreaming of childhood. Imitate is the old generation insert card game machine in the game boot animation, do not know now engaged in the front-end industry partner age, but like me, just entered the line of a year of new people have seen, we should, 80%, perhaps, probably, also have seen it…

Below let us witness, cold grass with the front-end technology of the black myth of Wukong and childhood game classic animation combined work

It's a gift from front end engineer Hancho to game science creators in 2021

Return to the Mosaic of wukong in the 1980s

Since we are going back to our childhood, our picture should keep up with The Times, which can not be so clear. Think back to the days when games were color block by color block Mosaic, so we needed to ‘Mosaic’ Goku.

Let’s start with a canvas

<canvas id="my-canvas-monkey-king"></canvas>
Copy the code

Then we import the image on the canvas, and get the dot matrix information, and get the color and draw at an interval of 12 pixels

// Show Monkey King
let canvas2 = document.getElementById("my-canvas-monkey-king");
let ctx2 = canvas2.getContext("2d");

var image2 = new Image();
image2.src = "monkey-king.jpeg";
image2.width = 700;
image2.height = 700;

image2.onload = function () {
    canvas2.width = image2.width;
    canvas2.height = image2.height;
    ctx2.drawImage(image2, 0.0);
    var imageData2 = ctx2.getImageData(0.0, image2.width, image2.height).data;
    // Black the canvas background
    ctx2.fillStyle = "# 000";
    ctx2.fillRect(0.0, image2.width, image2.height);
    var gap = 12;
    for (var h = 0; h < image2.height; h += gap) {
      for (var w = 0; w < image2.width; w += gap) {
        var position = (image2.width * h + w) * 4;
        var r = imageData2[position], g = imageData2[position + 1], b = imageData2[position + 2];
        // Since the background I used is not pure black, I will filter out the points where the RGB sum is less than 165 (600 is an integer).
        if (765 - (r + g + b) < 600) {
          ctx2.fillStyle = `rgb(${r}.${g}.${b}) `; ctx2.fillRect(w, h, gap, gap); }}}}Copy the code

Text dynamic effect design: Wukong! Come out!

Here is a logo Mosaic and line by line drawing effect, the Mosaic method is the same as before, this line by line drawing actually added some details, the more you go up to draw faster, a bit like layer upon layer of text

Let’s get another canvas

<canvas id="my-canvas-wukong"></canvas>
Copy the code

After that, we get the picture information, store it in the array by line, then use the timer to get the information of each line, draw line by line, and remember to reduce the timer time every time we execute the callback method of the timer.

let canvas = document.getElementById("my-canvas-wukong");
let ctx = canvas.getContext("2d");

var image = new Image();
image.src = "wukong.png";
image.width = 240;
image.height = 240;

image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0.0);
var imageData = ctx.getImageData(0.0, image.width, image.height).data;
ctx.fillStyle = "# 000";
ctx.fillRect(0.0, image.width, image.height);
let pointPixels = [];
let rowPoints = [];

for (var h = image.height - 3; h >= 0; h -= 3) {
  if(h ! == image.height -3) {
    pointPixels.push(rowPoints);
    rowPoints = [];
  }
  for (var w = image.width - 3; w >= 0; w -= 3) {
    var position = (image.width * h + w) * 4;
    var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
    if(r + g + b ! = =0) {
      rowPoints.push([w, h]);
    }

  }
}
ctx.fillStyle = "#fff";
let index = 0;
const length = pointPixels.length;
let delay = 30;
const fn = () = > {
  let timer = setTimeout(() = > {
    clearTimeout(timer);
    if(index ! = length) {const rowPoints = pointPixels[index];
      for (const rowPoint of rowPoints) {
        ctx.fillRect(rowPoint[0], rowPoint[1].3.3);
      }
      delay = delay - 0.125;
      index++;
      fn();
    } else {
      const dom = document.getElementById('operation');
      dom.style.opacity = 1;
    }
  }, delay)
}
fn();
}
Copy the code

The menu of childhood games

To design our interface, let’s take a look back at the interface of some old games:

Emm, it seems that we have finished the above title, to design the following operation menu, I also follow the classic to:

The text here uses the text shadow effect. The following single player and multiplayer games use the staff as a selection pointer. I think the staff is also the symbol of Wukong. Hancao Present to Game Science in 2021. Hancao Present to Game Science in 2021

<style>
#operation {
      position: absolute;
      left: 30vw;
      top: 55vh;
      width: 40vw;
      height: 300px;
      text-align: center;
      transition: all 2s;
      opacity: 0;
    }

    #title {
      color: white;
      font-size: 40px;
      font-weight: 800;
      text-shadow: 8px 8px 8px # 888888;
      cursor: pointer;
      text-decoration: none;
    }

    .select {
      margin-top: 32px;
      text-align: left;
      padding-left: 160px;
    }

    .option {
      overflow: hidden;
    }

    .op {
      display: inline-block;
      overflow: hidden;
      line-height: 45px;
      font-size: 30px;
      font-weight: 600;
      text-shadow: 8px 8px 8px # 888888;
      color: #fff;
    }

    .jingubang {
      display: inline-block;
      height: 20px;
      width: 8px;
      background-color: # 555151;
      border-top: 10px solid #7c7469;
      border-bottom: 10px solid #7c7469;
      margin-right: 16px;
    }

    .placeholder {
      display: inline-block;
      height: 20px;
      width: 8px;
      margin-right: 16px;
    }

    .hancao {
      font-size: 8px;
      margin-top: 48px;
      color: #fff;
    }
</style>
<div id="operation">
    <a id="title" href="https://www.heishenhua.com">
      BLACKMYTH WUKONG
    </a>
    <div class="select">
      <div class="option">
        <div class="jingubang"></div>
        <div class="op">
          1 PLAYER
        </div>
      </div>
      <div class="option">
        <div class="placeholder"></div>
        <div class="op">
          2 PLAYERS
        </div>
      </div>
    </div>
    <div class="hancao">
      Hancao present to Game Science in 2021.
    </div>
</div>
Copy the code

The full code is here, copy and paste, and go back to childhood with me

The complete code is here, you can copy and paste, remember vscode download live server plug-in to run, otherwise, canvas image proxy problems

The full effect is shown in the header. The code quality is not good enough. First, Canvas is not good enough. Besides, I coded while designing, so the code structure has not been designed

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>wukong</title>
  <style>
    body {
      margin: 0;
      background-color: # 000;
    }
    #my-canvas-wukong {
      position: absolute;
      margin-left: 50vw;
      margin-top: 20vh;
      width: 16vw;
      height: 32vh;
    }

    #my-canvas-monkey-king {
      position: absolute;
      margin-left: 30vw;
      margin-top: 20vh;
      width: 16vw;
      height: 32vh;
    }

    #operation {
      position: absolute;
      left: 30vw;
      top: 55vh;
      width: 40vw;
      height: 300px;
      text-align: center;
      transition: all 2s;
      opacity: 0;
    }

    #title {
      color: white;
      font-size: 40px;
      font-weight: 800;
      text-shadow: 8px 8px 8px # 888888;
      cursor: pointer;
      text-decoration: none;
    }

    .select {
      margin-top: 32px;
      text-align: left;
      padding-left: 160px;
    }
    
    .option {
      overflow: hidden;
    }

    .op {
      display: inline-block;
      overflow: hidden;
      line-height: 45px;
      font-size: 30px;
      font-weight: 600;
      text-shadow: 8px 8px 8px # 888888;
      color: #fff;
    }

    .jingubang {
      display: inline-block;
      height: 20px;
      width: 8px;
      background-color: # 555151;
      border-top: 10px solid #7c7469;
      border-bottom: 10px solid #7c7469;
      margin-right: 16px;
    }

    .placeholder {
      display: inline-block;
      height: 20px;
      width: 8px;
      margin-right: 16px;
    }

    .hancao {
      font-size: 8px;
      margin-top: 48px;
      color: #fff;
    }
  </style>
</head>

<body>
  <canvas id="my-canvas-wukong">
  </canvas> 
  <canvas id="my-canvas-monkey-king">
  </canvas>
  <div id="operation">
    <a id="title" href="https://www.heishenhua.com">
      BLACKMYTH WUKONG
    </a>
    <div class="select">
      <div class="option">
        <div class="jingubang"></div> 
        <div class="op">
          1 PLAYER
        </div>
      </div>  
      <div class="option">
        <div class="placeholder"></div>
        <div class="op">
          2 PLAYERS
        </div>
      </div>  
    </div>
    <div class="hancao">
      Hancao present to Game Science in 2021.
    </div>
  </div>
  <script>
    setTimeout(() = > {
      let canvas = document.getElementById("my-canvas-wukong");
    let ctx = canvas.getContext("2d");

    var image = new Image();
    image.src = "wukong.png";
    image.width = 240;
    image.height = 240;

    image.onload = function () {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0.0);
      var imageData = ctx.getImageData(0.0, image.width, image.height).data;
      ctx.fillStyle = "# 000";
      ctx.fillRect(0.0, image.width, image.height);
      let pointPixels = [];
      let rowPoints = [];

      for (var h = image.height - 3; h >= 0; h -= 3) {
        if(h ! == image.height -3 ){
          pointPixels.push(rowPoints);
          rowPoints = [];
        }
        for (var w = image.width - 3; w >= 0; w -= 3) {
          var position = (image.width * h + w) * 4;
          var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
          if(r + g + b ! = =0) {
            rowPoints.push([w, h]);
          }

        }
      }
      ctx.fillStyle = "#fff";
      let index = 0;
      const length = pointPixels.length;

      let delay = 30;
      const fn = () = > {
        let timer = setTimeout(() = > {
          clearTimeout(timer);
          if(index ! = length){const rowPoints = pointPixels[index];
            for(const rowPoint of rowPoints){
              ctx.fillRect(rowPoint[0], rowPoint[1].3.3);
            }
            delay = delay - 0.125;
            index++;
            fn();
          } else {
            const dom = document.getElementById('operation');
            dom.style.opacity = 1;
          }
      }, delay)
      }
      fn();
    }

    // Show Monkey King
    let canvas2 = document.getElementById("my-canvas-monkey-king");
            let ctx2 = canvas2.getContext("2d");

            var image2 = new Image();
            image2.src = "monkey-king.jpeg";
            image2.width = 700;
            image2.height = 700;

            image2.onload = function () {
              console.log(image2, canvas2, ctx2);
              canvas2.width = image2.width;
              canvas2.height = image2.height;
              ctx2.drawImage(image2, 0.0);
              var imageData2 = ctx2.getImageData(0.0, image2.width, image2.height).data;
              console.log(imageData2)
              ctx2.fillStyle = "# 000";
              ctx2.fillRect(0.0, image2.width, image2.height);
              
              var gap = 12;

              for (var h = 0; h < image2.height; h+=gap) {
                  for(var w = 0; w < image2.width; w+=gap){
                          var position = (image2.width * h + w) * 4;
                          var r = imageData2[position], g = imageData2[position + 1], b = imageData2[position + 2];
                          if(765 - (r + g + b) < 600) {
                            ctx2.fillStyle = `rgb(${r}.${g}.${b}) `; ctx2.fillRect(w,h,gap,gap); }}}}},5000);

  </script>
</body>

</html>
Copy the code

Conclusion – love, therefore look forward to

First of all, the article about the game and the front end only represent my subjective ideas, welcome to comment section, and thank Teacher Da Shuai’s article and code for my thinking guidance ~

That’s the end of this article, we don’t need to laugh at Monkey King, just keep hoping. And maybe you can see from my article that we can use technology to accomplish a lot of fun things, I also hope that my existence can bring more creativity for front-end developers, more ideas, let everyone love this industry more ~

That’s probably what I can bring to the community now as a fun front end engineer with weird ideas. (Of course I also have core content, like the compilation principle of Cold grass hahaha)

Finally, love, so look forward to

Over the three boundaries of the temple, read the prosperity of the four continents. Laugh over the five aggregates, give up six cares. For friendship armor, for love to carry, lead horses, send sunset. Afraid of what desire endlessly, afraid of what wandering. He that never stops walking is saved.

Where is the way? The road is under foot.

Guys, if you like my article, you can like 👍 and follow ➕, which is the biggest support for me.

Add me on wechat: Hancao97, invite you into the group, understand the status quo of the Github group of han Grass 🌿, learn front end together, become a better engineer ~ (group QR code is here -> front end late to sleep, qr code is overdue to see the comments in the boiling point of the link, I will put the latest QR code in the comment area, of course, you can also add my wechat I pull you into the group, After all, I’m also a fun front end, so it’s nice to know me 🌟 ~)