“This is the seventh day of my participation in the First Challenge 2022.

introduce

Just dig gold boiling point launched the Spring Festival game is over, we are still happy to play, do not know your results reached the standard, anyway, I seriously played each game after the standard issued screenshots, but some games are really quite kill time, there is no what means to make you happy fast customs clearance? Some, because is the web front end of the game, there is such a word, but all the front end of the data are not trusted by default. Next we will take you to open these small games in the way of front-end programmers. Of course, you need to read their source logic and game rules in advance to proceed. Of course, the ultimate goal of this installment is to learn how to debug a page using Google’s Browser console to deal with different problems. It makes sense for people to make these little games by their own efforts, so that they respect the game developers.

The body of the

Cloth tiger

Codepen is a platform for sharing ideas without secrets. You can view the source code and modify it without using the console. Besides, I didn’t make it into a closure. Because at the beginning of the creation of this work, it did not follow the game. It simply wanted to draw a CSS cartoon shape, and added a little interaction because it felt a little monotonous.

Here activeIndex represents which tooth is bad. Go directly to the console and type activeIndex and you can see it.

If you understand the logic, you don’t even need to click your mouse to trigger your teeth. You can wait until the page is loaded and then type these in the open console:

document.querySelectorAll(".tooth span").forEach((item,index) = >{
    if(index! =activeIndex) item.click() })document.querySelectorAll(".tooth span")[activeIndex].click()
Copy the code

So, you even click the mouse operation are saved, but all this is to be established after reading source code learning.

Mine clearance

Played the minesweeping know, very time and kill brain cells, sometimes luck, test was developed to build on the vue of this book, after the release of the source code automatically did confuse compression processing, but still can see eyelashes, we open the console, explore the main logic he can find his initialization method, gives the breakpoint.

We see that s is the array that holds the thunder mark, 0 is none, 1 is yes, so it’s easy, we right-click this parameter and put it in the console as a global variable, and then we variable each grid and let it automatically determine that it is triggered.

The code is as follows:

let nodes = document.querySelectorAll(".mine-sweeper-item")
temp1.forEach((item,index) = >{
      if(item==0) nodes[index].click()
})
Copy the code

Or I could add the breakpoint up, change the number of thunder points before it generates an array, e, which is 1. So we click and we’re left with a single ray in the 16 by 16 region.

The diagram below:

Rob tickets

This is a vue typewriter small game, if you use the console debugging is similar to minesweeper. Below we interrupt the point, the Vue instance extract to the global, read the source code can do whatever you want. Call the success page directly, or change the word number to 1.

Alternatively, if you don’t want to do this by breaking points, you just read the node each time the word appears and assign it to the text field to enter.

for(let i = 0; i<30; ++i){ (function(i){
       setTimeout(() = >{
                const event = document.createEvent('HTMLEvents')
                event.initEvent('input'.false.true)
                document.querySelector(".word-input").value = document.querySelector(".word").innerText
                document.querySelector(".word-input").dispatchEvent(event) 
        },50*i)
   })(i)
}
Copy the code

Because Vue activates the input binding event, vue’s input must be triggered by making an input event using document.createEvent(‘HTMLEvents’). And since we have 30 problems, we’re just going to go through them.

Play the nien beast

It’s also a made of vue is similar to play little game of the plane, is nothing more than the nien beast blood is too thick, no matter how to play, at least also want one minute and keep highly concentrated, once discovered by leadership, gg, don’t ask me how can say that, because I play for the first time to 1 minute, 09 seconds, then discovered by leadership. Anyway, in fact, the debugging is as good as the above opportunity, I still interrupt the point on the console to change the health less, more powerful bullets, faster fire can be achieved.

Of course, if you just want to answer the friend can let the bullet automatically track nian Beast, as follows:

function run(){
  window.requestAnimationFrame(() = >{
    document.querySelectorAll(".bullet").forEach(b= >{
        b.style.left = parseInt(document.querySelector(".nianshou").style.marginLeft,10) + 100 + "px";
    })
    console.log('step')
    run()
  })
}
run()
Copy the code

. Here we use Windows requestAnimationFrame cycle the bullet directly and nian location to binding can be implemented.

conclusion

Finally, I still hope to treat each person’s works seriously, and see the processing logic for different problems, which is also a kind of improvement for myself. Some of the debugging methods mentioned above can be used in their own online projects to test debugging problems, and different problems different analysis to debug. Of course, the most important thing is that the need to stretch a string do not trust their front-end data too much, many times also want to remind the backend students to verify the data, do not be lazy.

Well, have a good time and a happy Year of the Tiger