HTML5小恐龍游戲代碼是一段基于HTML5技術實現的簡易游戲代碼。該游戲源于Chrome瀏覽器的“無網絡”提示頁面,因此有人將其開發成了可供用戶娛樂的小游戲。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Chrome Dino</title> <style> #game{ width: 500px; height: 200px; border: 1px solid black; margin: 0 auto; position: relative; overflow: hidden; } #dino{ width: 50px; height: 50px; background-color: black; position: absolute; bottom: 0px; left: 50px; } #cactus{ width: 20px; height: 50px; background-color: green; position: absolute; bottom: 0px; right: 50px; } </style> </head> <body> <div id="game"> <div id="dino"></div> <div id="cactus"></div> </div> <script> var dino = document.querySelector("#dino"); var cactus = document.querySelector("#cactus"); var jump = -10; var gravity = 0.5; var isJumping = false; function update(){ if(isJumping){ jump += gravity; dino.style.bottom = parseInt(dino.style.bottom) + jump + "px"; } if(parseInt(dino.style.bottom)<= 0){ jump = -jump; } if(parseInt(cactus.style.right)<= 0){ cactus.style.right = "500px"; } if(parseInt(cactus.style.right)< 60 && parseInt(cactus.style.right) >0 && parseInt(dino.style.bottom)<= 50){ alert("Game over!"); location.reload(); } } document.addEventListener("keydown",function(){ if(!isJumping){ isJumping = true; jump = -10; } }); setInterval(update,20); </script> </body> </html>
以上是HTML5小恐龍游戲的完整代碼。其中,游戲中的主要元素包括一個小恐龍和一個仙人掌,通過監聽用戶的按鍵操作實現小恐龍的跳躍,在遇到仙人掌時實現游戲結束并刷新頁面。