首先先來看一下效果圖

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

//計分板var board = { dom: document.getElementById('score'), maxLost: 3, //最大丟失量 lost: 0, //當前丟失了多少個 score: 0, //當前分數 render: function() { //顯示 this.dom.innerHTML = '<p>得分：' + this.score + '</p><p>丟失：' + this.lost + ' / ' + this.maxLost + '</p>'; }, //增加一個丟失數 addLost: function() { if (this.lost === this.maxLost) { return; //游戲已經結束了 } 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) { //已經結束了 return; } this.score += number; this.render(); }};board.render();var letters = []; //目前的所有字母，一個字母就是一個對象//字母的容器var divContainer = document.getElementById('letter-container');/** * 產生一個字母對象，并將其加入到數組中 */function createLetter() { //創建img元素 var img = document.createElement('img'); img.className = 'letter'; divContainer.appendChild(img); //設置src路徑 var charNumber = getRandom(65, 65 + 26); //字母的隨機ASCII碼 var char = String.fromCharCode(charNumber); img.src = 'http://m.cgvv.com.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'; }, // 每調用一次該方法，字母移動一段距離 // duration是經過的時間: 秒 move: function(duration) { var dis = duration * this.speed; //計算距離 this.top += dis; this.render(); }, kill: function() { //自殺 // 從數組中移除 var index = letters.indexOf(this); //找到字母在數組中的下標 if (index >= 0) { letters.splice(index, 1); } // 移除dom元素 this.dom.remove(); } }; letter.render(); letters.push(letter);}// 根據最小值和最大值產生一個隨機整數(不包含最大值)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);}//游戲對象，統籌規劃var game = { timerProduce: null, //自動產生字母的timerid timerMove: null, //自動移動的timerid isOver: false, //自動的，不斷的，產生字母 startProduce: function() { if (this.timerProduce) { return; //正在產生中，什么也不做 } this.timerProduce = setInterval(createLetter, 500); }, //停止自動產生字母 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的面向對象編程，可愛的金山打字小游戲就實現了

總結

到此這篇關于原生js實現的金山打字小游戲的文章就介紹到這了,更多相關js金山打字游戲內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！