您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue怎么實(shí)現(xiàn)Chrome小恐龍游戲”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue怎么實(shí)現(xiàn)Chrome小恐龍游戲”吧!
幾年前,Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋:如果你在未聯(lián)網(wǎng)的情況下訪問網(wǎng)頁,會看到 “Unable to connect to the Internet” 或 “No internet” 的提示,旁邊是一只像素恐龍。
許多人可能覺得這只恐龍只是一個(gè)可愛的小圖標(biāo),在斷網(wǎng)的時(shí)候陪伴用戶。但是后來有人按下空格鍵,小恐龍開始奔跑!
這只可愛的小恐龍是設(shè)計(jì)師 Sebastien Gabriel 的作品。他在一次訪談中說,他覺得沒有 wifi 的年代就像是史前時(shí)代,很多人都已經(jīng)忘記那個(gè)只能在公司、學(xué)?;蛘呔W(wǎng)吧才能上網(wǎng)的年代,所以他就以史前時(shí)代的代表——恐龍,作為斷網(wǎng)的圖標(biāo)。
本文的主要內(nèi)容就是如何使用Vue實(shí)現(xiàn)這個(gè)小彩蛋游戲,感興趣的同學(xué)可以直接看下效果:游戲地址
我們首先把這個(gè)小游戲的樣式擺出來,可以看出,主要包括下面幾種元素
恐龍
路面
云彩
障礙物
積分
主要就是這些內(nèi)容,我們通過css將其放在合適的位置即可
在初步將小游戲的畫面復(fù)刻了之后,我們需要把畫面動起來,可以看出,其實(shí)在游戲過程中,小恐龍水平方向是不動的,只是路面一直在平移,看起來小恐龍?jiān)谝苿恿?,因此我們需要給路面添加動畫效果
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 <= -600) { this.roadTranslate = 0; } this.roadTranslate -= GameConfig.ROAD_VELOCITY; //... }
可以看出,主要是通過setInterval
啟動一個(gè)定時(shí)任務(wù),然后在其中修改roadTranslate
即可
障硬物同樣會隨著路面一起做水平移動,這部分跟路面的動畫部分基本一樣,不同的部分在于,障礙物可能有1棵樹或者多棵樹,這其實(shí)是通過雪碧圖和background-position
實(shí)現(xiàn)的,通過雪碧圖可以有效的減少我們的切圖數(shù)量
updateGameStatus() { this.treeItems.forEach((item) => { 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; } }); }
同樣是定時(shí)在updateGameStatus
中修改障礙物的treeTranslateX
,不同之處在于障礙物還需要通過隨機(jī)樹設(shè)置寬度與backgroundPosition
。
同時(shí)當(dāng)treeTranslateX < 0
時(shí),說明障礙物已經(jīng)運(yùn)行過去了,這時(shí)還需要重置狀態(tài)
除了路面背景在移動之外,為了讓恐龍看起來在移動,我們還需要給恐龍?zhí)砑觿赢嬓Ч?,其?shí)就是通過切換圖片,讓恐龍看起來在跑步,這也是通過雪碧圖實(shí)現(xiàn)的。
除此之外,還有就是當(dāng)我們按下空格鍵時(shí),恐龍需要做一個(gè)跳躍動畫
updateGameStatus() { if (this.rexItem.isInJump) { //跳躍動畫 this.rexItem.rexTranslateY -= this.rexItem.rexVelocity; if (this.rexItem.rexTranslateY <= -GameConfig.REX_MAX_JUMP) { this.rexItem.rexVelocity = -GameConfig.REX_VELOCITY; } else if (this.rexItem.rexTranslateY >= 0) { this.rexItem.isInJump = false; this.rexItem.rexTranslateY = 0; this.rexItem.rexVelocity = 0; } } else { //跳步動畫 if (this.rexItem.rexBackgroundPostion <= -220) { this.rexItem.rexBackgroundPostion = 0; } else { this.rexItem.rexBackgroundPostion -= 44; } } }
如上,主要就是跑步與跳躍動畫,其中跳躍動畫在達(dá)到最大高度后,需要修改速度的方向
在這個(gè)小游戲中,我們還需要響應(yīng)鍵盤事件
游戲未開始時(shí),按空格鍵開始
游戲中,按空格鍵跳躍
游戲結(jié)束后,按空格鍵重新開始
created() { window.addEventListener("keyup", this.submit); } submit(event: KeyboardEvent) { if (event.code === "Space") { if ( this.gameStatus === GameStatus.WAIT || this.gameStatus === GameStatus.END ) { this.gameStatus = GameStatus.RUNNING; this.initGame(); this.startGame(); } else if (this.gameStatus === GameStatus.RUNNING) { if (this.rexItem.rexTranslateY === 0) { if (this.rexItem.isInJump === false) { this.rexItem.isInJump = true; this.rexItem.rexVelocity = GameConfig.REX_VELOCITY; } } } } }
在完成畫面復(fù)刻與讓畫面動起來之后,接下來要做的就是恐龍與障礙物的碰撞檢測了,這其實(shí)就是判斷兩個(gè)矩形有沒有相交。我們可以通過判斷不重疊的情況,然后取反就可以
isOverlap(rect1: Rect, rect2: Rect) { const startX1 = rect1.x; const startY1 = rect1.y; const endX1 = startX1 + rect1.width; const endY1 = startY1 + rect1.height; const startX2 = rect2.x; const startY2 = rect2.y; const endX2 = startX2 + rect2.width; const endY2 = startY2 + rect2.height; return !( endY2 < startY1 || endY1 < startY2 || startX1 > endX2 || startX2 > endX1 ); }
通過以上步驟,我們的小游戲就基本開發(fā)完成了,接下來就是部署了,在沒有自己的服務(wù)器的情況下,我們可以利用GitHub Pages來部署我們的項(xiàng)目
我們將打包出來的dist目錄作為Github Pages的根目錄,從而實(shí)現(xiàn)發(fā)布與部署。
到此,相信大家對“Vue怎么實(shí)現(xiàn)Chrome小恐龍游戲”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。