JavaScript 手寫打字遊戲
阿新 • • 發佈：2020-11-02
html部分
<body> <div class="setting"> <div class="grade-box"> 你的成績：<div class="grade">0</div> 分 </div> <div class="rank">選擇難度： <button onclick="changeRank('simple')">簡單</button> <button onclick="changeRank('middle')">中等</button> <button onclick="changeRank('hard')">困難</button> </div> </div> <div class="game-box"> </div> </body>
style樣式部分：
<style> body{ display: flex; justify-content: center; align-items: center; background-color: rgb(199,237,204); font-size: 15px; } .game-box{ background-color: rgba(0, 0, 0, 0.9); position: relative; width: 300px; height: 500px; border: 1px solid black; margin-left: 10px; box-shadow: 5px 5px 20px lightblue; font-size: 25px; } .grade-box{ font-size: 15px; display: flex; } .rank{ display: flex; justify-content: space-around; } .grade{ color: red; } </style>
JS頁面互動部分
<script> let box = document.getElementsByClassName('game-box')[0] let gradeBox = document.getElementsByClassName('grade')[0] let max = 0 let click = '' let style = {} let gameStatus = '' let gameGrade = 0 let gameRank = 0 // 遊戲總定時器 let gameSt = '' // 遊戲初始化 let gameInit = function(){ max = 0 click = '' style = {} gameStatus = '' gameGrade = 0 gameRank = 0 clearInterval(gameSt) gameSt = '' box.childNodes = [] } // 產生隨機數 var randomNum = function(mul,add = 0){ // 產生範圍在 [0 +add , mul + add ） 的隨機數 return Math.floor(Math.random() * mul + add) } // 捕捉按鍵 document.onkeydown = function(e) { click = e.key } // 產生節點 let startGame = function(){ let word0 = new Word() gameSt = setInterval(()=>{ if(gameStatus === 'fail'){ clearInterval(gameSt) } else{ if(gameGrade > 100){ gameRank += 1 } let word1 = new Word() } },1500- gameRank*200) } // 刪除節點 let delWord = function(obj){ for(var key in obj){ delete obj[key]; } } // 遊戲產生字母節點類 let Word = function(){ this.y = 3 this.x = randomNum(280,10) this.speed = Math.floor(Math.random()*2? 100 : 200) this.name = String.fromCharCode(randomNum(26,97)) // 初始化字母節點屬性 this.node = document.createElement('div') this.node.innerText = this.name this.node.style.position = 'absolute' this.node.style.left = this.x + "px" this.node.style.top = this.y +'px' this.node.style.color = 'rgb(' + randomNum(156,100)+ ',' + randomNum(156,100) +','+ randomNum(156,100) + ')' box.appendChild(this.node) this.init() } Word.prototype = { init(){ // 初始化 this.getWord() }, // 節點移動屬性 move(){ this.y += 2 this.node.style.top = this.y +"px" }, getWord(){ // 節點開始運轉 let st = setInterval(()=>{ this.move() if(this.y >= 470) { gameStatus = 'fail' alert('遊戲失敗') clearInterval(st) gameInit() delWord(this) return } if(this.y >= max){ max = this.y if(this.name === click){ // 這個判斷放裡面是為了確保只能點選最下面的字母 // 放外面 可以任意點擊出現的字母 clearInterval(st) click = '' box.removeChild(this.node) gameGrade += 1 if(gameGrade >= 20){ alert('666，通關了！！！') gameInit() } gradeBox.innerText = gameGrade delWord(this) max = 0 //重置最大點 } } },this.speed - gameRank*10 ) } } startGame() // 難度按鈕點選觸發 let changeRank = function(type = ''){ switch(type){ case 'simple' : gameRank = 0 break; case 'middle' : gameRank = 2 break; case 'hard': gameRank = 6 break } } </script>