Shulou(Shulou.com)05/31 Report--

This article mainly explains "Vue how to achieve Chrome Little Dinosaur Game". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize Chrome Little Dinosaur Game by Vue".

Preface

A few years ago, Google added an interesting egg to Chrome browsers: if you visit a web page without connecting to the Internet, you will see the prompt "Unable to connect to the Internet" or "No internet", next to a pixel dinosaur.

Many people may think that this dinosaur is just a cute little icon to accompany users when the Internet is off. But then someone pressed the space bar and the little dinosaur began to run!

This cute little dinosaur is the work of designer Sebastien Gabriel. He said in an interview that he felt that the era without wifi was like prehistoric times. Many people had forgotten that the Internet could only be accessed in companies, schools or Internet cafes, so he used the dinosaur, the representative of prehistoric times, as the icon of disconnection.

The main content of this article is how to use Vue to achieve this small egg game, interested students can directly look at the effect: game address

Duplicate picture

Let's first put out the style of this Mini Game. As we can see, it mainly includes the following elements.

Dinosaur

Road surface

Cloud

Obstacle

integration

This is the main content, and we can put it in the right place through css.

Animation effect road animation

After the initial reproduction of the Mini Game picture, we need to move the picture. We can see that in fact, in the course of the game, the horizontal direction of the little dinosaur is motionless, but the road has been translating, so it seems that the little dinosaur is moving. So we need to add animation to the road.

Get roadStyle () {return {transform: `translateX (${this.roadTranslate} px) `};} startGamerInterval () {clearInterval (this.timer); this.timer = setInterval (() = > {if (this.gameStatus = GameStatus.RUNNING) {this.updateGameStatus ();}}, 100);} updateGameStatus () {if (this.roadTranslate {if (item.treeTranslateX))

< 0) { const isBigTree = GetRandomNum(0, 100) % 2 ? true : false; const itemWidth = isBigTree ? 25 : 17; const itemHeight = isBigTree ? 50 : 35; const itemCount = GetRandomNum(1, 3); const offsetPosition = GetRandomNum(0, 2); item.treeTranslateX = GetRandomNum(600, 1200); item.isBigTree = isBigTree; item.width = itemWidth * itemCount; item.height = itemHeight; item.backgroundPosition = -itemWidth * offsetPosition; } else { item.treeTranslateX -= GameConfig.TREE_VELOCITY; } }); } 同样是定时在updateGameStatus中修改障碍物的treeTranslateX，不同之处在于障碍物还需要通过随机树设置宽度与backgroundPosition。 同时当treeTranslateX < 0时，说明障碍物已经运行过去了，这时还需要重置状态 恐龙动画 除了路面背景在移动之外，为了让恐龙看起来在移动，我们还需要给恐龙添加动画效果，其实就是通过切换图片，让恐龙看起来在跑步，这也是通过雪碧图实现的。 除此之外，还有就是当我们按下空格键时，恐龙需要做一个跳跃动画 updateGameStatus() { if (this.rexItem.isInJump) { //跳跃动画 this.rexItem.rexTranslateY -= this.rexItem.rexVelocity; if (this.rexItem.rexTranslateY = 0) { this.rexItem.isInJump = false; this.rexItem.rexTranslateY = 0; this.rexItem.rexVelocity = 0; } } else { //跳步动画 if (this.rexItem.rexBackgroundPostion endX2 || startX2 >

EndX1);} deployment

Through the above steps, our Mini Game is basically developed, and the next step is to deploy. Without our own server, we can use GitHub Pages to deploy our project.

We use the packaged dist directory as the root of the Github Pages for publishing and deployment.

At this point, I believe you have a deeper understanding of "Vue how to achieve Chrome Little Dinosaur Game". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.