用破解小遊戲的方式來學習 js Debug

了解怎麼錄製頁面效能,監聽 Dom 變化,以及如何發送假的滑鼠事件

陳旭清(Hyman)
May 11, 2018 · 3 min read

從在讀書的時候,我就對於破解遊戲有著充分的興趣,我的寫程式的思維也大都是從破解遊戲的時候被啟發。最近同事給了我一個連結,https://www.humanbenchmark.com/tests/reactiontime/,這是一個用來測驗反應力的遊戲,當畫面變成綠色的時候,就點下畫面,這時候就會顯示你的反應時間毫秒,我一直無法超過同事的紀錄,所以…..let’s Cheat it.

要用哪個事件?

對於點擊的遊戲,我會先想要得知哪種滑鼠的事件會讓js觸發,例如有的遊戲可以用 click 但是有的遊戲卻是監聽 mouseDown mouseUp 的事件,那要怎麼知道他是監聽哪個事件?我會建議使用錄製 performance

錄製完之後我們就可以知道,這個遊戲要觸發並不是使用 click 事件,而是 mouseDown 事件,我們就可以用模擬的方式產生一個滑鼠按下的事件。

用在哪個DOM?

點錯地方就沒有用了,所以要找到哪個元件才是接收 mouseDown 事件的監聽者,你可以一個一個找,但是我推薦使用 chrome 裡面的 EventListener 來找,找到之後你就會看到如下。

點擊的時機?

我們實際玩了幾次遊戲,順便觀察剛剛找到的 DOM ,畫面綠色的時候 class 名稱會更改為 view-go ,所以我們就可以確定時機,一切準備都完成了我們就可以來破解了。

怎樣效率才好?

你可以寫一個 for 迴圈來檢查,但是我不推薦這樣,會把執行緒卡死,你或許也會想用 setInterval 每一百毫秒來檢查,但是這樣效能會慢,也許你最終會找到一個方法叫做 requestAnimationFrame 但是成績就止步於 1Xms,我們要讓成績維持在 10ms 內就要再下一個苦工,就是使用 MutationObserver 。這是一個比較新的瀏覽器 API 可以讓你偵測 DOM 的變動,效率好。把我們剛剛的東西都合起來就會寫了一隻 code 如下。

總結

透過破解遊戲的方式學會 chrome 的 debug 以及 js 怎麼發送事件,怎樣透過 MutationObserver 來監聽 dom 事件,一舉數得,實作的結果就如下圖,我本來想放動畫,可是太大了,只好放圖,大家如果有效率更快的方式也歡迎留言告訴我。

Hybrid Maker

小小前端工程師一路走來的一些紀錄

    陳旭清(Hyman)

    Written by

    FrontEnd Warrior 👨🏼‍🚀

    Hybrid Maker

    小小前端工程師一路走來的一些紀錄