原生JS面向?qū)ο髮崿F(xiàn)打字小游戲
本文實例為大家分享了JS面向?qū)ο髮崿F(xiàn)打字小游戲的具體代碼,供大家參考,具體內(nèi)容如下
Demo介紹
通過鍵盤點擊下落小球所顯示的數(shù)字,小球刷新再任意位置重新掉落。并且,每五個球后掉落速度加快
小球刷新位置 大小,顏色隨機(jī)。用面向?qū)ο骳lass方法實現(xiàn)
該demo源碼可直接使用。賦值到html文件 然后打開就可以使用,可用作學(xué)校課設(shè)使用
源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .title{ width: 1200px; height: 80px; margin:400px auto; color: darkblue; text-shadow: 3px 3px 3px black; font-size: 80px; font-weight: bolder; text-align: center; font-family: "楷體"; } .name{ width: 1000px; height: 40px; margin:0 auto; color: skyblue; text-shadow: 3px 3px 3px black; font-size: 40px; font-weight: bolder; text-align: center; font-family: "楷體"; } </style> <body> <div style="font-size: 40px;">當(dāng)前分?jǐn)?shù)<div class="score" >0</div></div> <div class="title">原生js小Demo:打字練習(xí)游戲</div> <div class="name">作者:lz</div> </body> <script> class TypingGame { constructor() { this.oSpan this.speed = 2; this.timer = ""; this.word; this.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson","green"]//顏色集合 this.createWord(this.speed); document.onkeydown = e => { var e = e || window.event; var keycode = e.keyCode || e.which; // TypingGame.oSpan=this.$$("span"); var keyword = String.fromCharCode(keycode). toLowerCase() if (this.word === keyword) { // 打掉一個 - 計分 // 獲取原來的分 var score = this.$('.score', false).innerText - 0 // 讓分?jǐn)?shù)+1 score++ // 加1以后的分?jǐn)?shù)放進(jìn)div中 document.querySelector('.score').innerText = score if (score === 5) { this.speed += 2//每過五個字母,下落速度加快 } this.oSpan.parentElement.removeChild(this.oSpan) this.createWord(this.speed) } } } createWord(speed) { let wh=this.getRandom(30,80);//隨機(jī)大小 this.oSpan = this.creEle('span'); // console.log(this.oSpan) this.setStyle(this.oSpan, { width: wh+"px", height: wh+"px", position: 'absolute', top: 0, left: this.getRandom(document.documentElement.clientWidth - 30) + "px", borderRadius: "50%", lineHeight: '30px', textAlign: 'center', backgroundColor: this.colors[this.getRandom(18)], color: "white", fontWeight: "bold", textAlign:"center", lineHeight:wh+"px" }) document.body.appendChild(this.oSpan) // 隨機(jī)字符:97~122 var randomNum = this.getRandom(97, 123) this.word = String.fromCharCode(randomNum); this.oSpan.innerText = this.word // 這個標(biāo)簽要慢慢向下運動 this.elementsMove(this.speed); } elementsMove() { // console.log(this.oSpan) // 定時器 clearInterval(this.timer) this.timer = setInterval(() => { // 獲取高度 var t = this.oSpan.offsetTop; // 加大高度 t += this.speed; console.log(this.speed) // 如果這個標(biāo)簽到了瀏覽器的最低端,GAME OVER if (t >= document.documentElement.clientHeight - 30) { clearInterval(this.timer) if (confirm("GAME OVER, 是否重玩?")) { location.reload();//刷新重玩 } } // 加大后設(shè)置給標(biāo)簽的top this.oSpan.style.top = t + "px" }, 50) } setStyle(ele, styleObj) { for (var attr in styleObj) { ele.style[attr] = styleObj[attr] } } $(tag, all = false) { return all ? document.querySelectorAll(tag) : document.querySelector(tag); } creEle(tag) { return document.createElement(tag) } getRandom(a, b = 0) { var max = Math.max(a, b); var min = Math.min(a, b) return Math.floor(Math.random() * (max - min)) + min } } new TypingGame; </script> </html>
Demo截圖
還可以改進(jìn)的地方
可以自行改寫
可以增加打錯提示,且可以隨機(jī)刷新的高度??梢赃M(jìn)行一些速度優(yōu)化。把動畫改成requestAnimationFrame()效果更真實。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js前端實現(xiàn)圖片懶加載(lazyload)的兩種方式
本篇文章主要介紹了js前端實現(xiàn)圖片懶加載(lazyload)的兩種方式 ,使用圖片懶加載可以提高網(wǎng)頁運行速度,有興趣的可以了解一下。2017-04-04有一段有意思的代碼-javascript現(xiàn)實多行信息
有一段有意思的代碼-javascript現(xiàn)實多行信息...2007-08-08使用Promise解決多層異步調(diào)用的簡單學(xué)習(xí)心得
下面小編就為大家?guī)硪黄褂肞romise解決多層異步調(diào)用的簡單學(xué)習(xí)心得。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05three.js中文文檔學(xué)習(xí)之創(chuàng)建場景
這篇文章主要給大家介紹了three.js中文文檔學(xué)習(xí)之創(chuàng)建場景的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11