首先先來看一下效果圖

如果感興趣的就來看一下Js源碼吧

//計分板var board = { dom: document.getElementById('score'), maxLost: 3, //最大丟失量 lost: 0, //當(dāng)前丟失了多少個 score: 0, //當(dāng)前分數(shù) render: function() { //顯示 this.dom.innerHTML = '<p>得分：' + this.score + '</p><p>丟失：' + this.lost + ' / ' + this.maxLost + '</p>'; }, //增加一個丟失數(shù) addLost: function() { if (this.lost === this.maxLost) { return; //游戲已經(jīng)結(jié)束了 } this.lost++; if (this.lost === this.maxLost) { //丟失量達到最大 game.gameOver(); } this.render(); }, reset: function() { this.lost = 0; this.score = 0; this.render(); }, //增加得分 addScore: function(number) { if (this.lost === this.maxLost) { //已經(jīng)結(jié)束了 return; } this.score += number; this.render(); }};board.render();var letters = []; //目前的所有字母，一個字母就是一個對象//字母的容器var divContainer = document.getElementById('letter-container');/** * 產(chǎn)生一個字母對象，并將其加入到數(shù)組中 */function createLetter() { //創(chuàng)建img元素 var img = document.createElement('img'); img.className = 'letter'; divContainer.appendChild(img); //設(shè)置src路徑 var charNumber = getRandom(65, 65 + 26); //字母的隨機ASCII碼 var char = String.fromCharCode(charNumber); img.src = 'http://www.aoyou183.cn/bcjs/img/letter/' + char + '.png'; //left隨機 var left = getRandom(0, divContainer.clientWidth - img.width); img.style.left = left + 'px'; var letter = { dom: img, char: char, left: left, top: -img.height, //初始的top值 speed: getRandom(100, 500), //速度: 像素/秒 render: function() { this.dom.style.top = this.top + 'px'; }, // 每調(diào)用一次該方法，字母移動一段距離 // duration是經(jīng)過的時間: 秒 move: function(duration) { var dis = duration * this.speed; //計算距離 this.top += dis; this.render(); }, kill: function() { //自殺 // 從數(shù)組中移除 var index = letters.indexOf(this); //找到字母在數(shù)組中的下標(biāo) if (index >= 0) { letters.splice(index, 1); } // 移除dom元素 this.dom.remove(); } }; letter.render(); letters.push(letter);}// 根據(jù)最小值和最大值產(chǎn)生一個隨機整數(shù)(不包含最大值)function getRandom(min, max) { // Math.random() 0~1 // Math.random() * (max - min) 0 ~ (max - min) // Math.random() * (max - min) + min min ~ max return Math.floor(Math.random() * (max - min) + min);}//游戲?qū)ο?，統(tǒng)籌規(guī)劃var game = { timerProduce: null, //自動產(chǎn)生字母的timerid timerMove: null, //自動移動的timerid isOver: false, //自動的，不斷的，產(chǎn)生字母 startProduce: function() { if (this.timerProduce) { return; //正在產(chǎn)生中，什么也不做 } this.timerProduce = setInterval(createLetter, 500); }, //停止自動產(chǎn)生字母 stopProduce: function() { clearInterval(this.timerProduce); this.timerProduce = null; }, //開始不斷的移動所有字母 startMove: function() { if (this.timerMove) { return; } var duration = 0.016; //間隔時間，秒 this.timerMove = setInterval(function() { for (var i = 0; i < letters.length; i++) { var letter = letters[i]; //要移動的字母 letter.move(duration); //判斷該字母是不是可以消除了 if (letter.top >= divContainer.clientHeight) { letter.kill(); i--; //丟失 board.addLost(); } } }, duration * 1000); }, //停止移動所有字母 stopMove: function() { clearInterval(this.timerMove); this.timerMove = null; }, gameOver: function() { this.stopMove(); this.stopProduce(); document.getElementById('over').style.display = 'block'; this.isOver = true; }, restart: function() { //清空字母 for (var i = 0; i < letters.length; i++) { var letter = letters[i]; letter.kill(); i--; } this.startMove(); this.startProduce(); board.reset(); this.isOver = false; document.getElementById('over').style.display = 'none'; }};game.startProduce();game.startMove();//注冊事件window.onkeydown = function(e) { if (game.isOver) { return; } var key = e.key.toUpperCase(); //匹配 for (var i = 0; i < letters.length; i++) { var letter = letters[i]; if (letter.char === key) { letter.kill(); board.addScore(10); return; //只移除一個 } }};

僅僅使用js的面向?qū)ο缶幊?，可愛的金山打字小游戲就實現(xiàn)了

總結(jié)

到此這篇關(guān)于原生js實現(xiàn)的金山打字小游戲的文章就介紹到這了,更多相關(guān)js金山打字游戲內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！