溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
原生JS面向對象如何實現打字小游戲，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
通過鍵盤點擊下落小球所顯示的數字，小球刷新再任意位置重新掉落。并且，每五個球后掉落速度加快
小球刷新位置 大小，顏色隨機。用面向對象class方法實現
該demo源碼可直接使用。賦值到html文件 然后打開就可以使用，可用作學校課設使用
<!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 >當前分數<div class="score" >0</div></div>
<div class="title">原生js小Demo：打字練習游戲</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
// 讓分數+1
score++
// 加1以后的分數放進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);//隨機大小
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)
// 隨機字符：97~122
var randomNum = this.getRandom(97, 123)
this.word = String.fromCharCode(randomNum);
this.oSpan.innerText = this.word
// 這個標簽要慢慢向下運動
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)
// 如果這個標簽到了瀏覽器的最低端，GAME OVER
if (t >= document.documentElement.clientHeight - 30) {
clearInterval(this.timer)
if (confirm("GAME OVER, 是否重玩?")) {
location.reload();//刷新重玩
}
}
// 加大后設置給標簽的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截圖
還可以改進的地方
可以自行改寫
可以增加打錯提示，且可以隨機刷新的高度。可以進行一些速度優化。把動畫改成requestAnimationFrame()效果更真實。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
