溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
原生JS面向?qū)ο笕绾螌?shí)現(xiàn)打字小游戲，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
通過(guò)鍵盤點(diǎn)擊下落小球所顯示的數(shù)字，小球刷新再任意位置重新掉落。并且，每五個(gè)球后掉落速度加快
小球刷新位置 大小，顏色隨機(jī)。用面向?qū)ο骳lass方法實(shí)現(xiàn)
該demo源碼可直接使用。賦值到html文件 然后打開(kāi)就可以使用，可用作學(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 >當(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) {
// 打掉一個(gè) - 計(jì)分
// 獲取原來(lái)的分
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//每過(guò)五個(gè)字母，下落速度加快
}
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
// 這個(gè)標(biāo)簽要慢慢向下運(yùn)動(dòng)
this.elementsMove(this.speed);
}
elementsMove() {
// console.log(this.oSpan)
// 定時(shí)器
clearInterval(this.timer)
this.timer = setInterval(() => {
// 獲取高度
var t = this.oSpan.offsetTop;
// 加大高度
t += this.speed;
console.log(this.speed)
// 如果這個(gè)標(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)的地方
可以自行改寫(xiě)
可以增加打錯(cuò)提示，且可以隨機(jī)刷新的高度。可以進(jìn)行一些速度優(yōu)化。把動(dòng)畫(huà)改成requestAnimationFrame()效果更真實(shí)。
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼