首頁 > 開發者 > JavaScript
剛剛開始學習ExtJS，第一天開始學習了javascript基礎，包括DOM編程和Javascript的各種api的使用，做了一個綜合執行個體--網頁打字遊戲。
效果：
Javascript網頁打字遊戲
需求：
實現步驟：
實現源碼：
1、letter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="letter.js"></script></head><body><div><a href="javascript:startGame()" style="text-decoration: none;">開始遊戲</a> <a href="javascript:stopGame()" style="text-decoration: none;">結束遊戲</a> 速度 <select id="level"><option value="30" selected="selected">緩慢</option><option value="70">一般</option><option value="120">快速</option></select></div><div id="score"></div><div id="letter"style="position: absolute; top: 30px; left: 30px; width: 30px; height: 30px;display: none;"><font size="20"><b>A</b></font></div></body></html>
2、letter.js
// 定義變數記錄產生的總的字母數和正確的字母數 sumKeys產生的總字母數，rightNum正確的次數var sumKeys = 0, rightNum = 0;// 定義一個定時器var gameTimer = null;// 開始遊戲的方法function startGame() {var score = document.getElementById("score");score.style.display = "none";gameTimer = window.setInterval(createLetter, 800);}//定義存放26個字母的數組var keys = [], currentKeys = []; // currentKeys數組記錄當前產生的字母的對應的div層for ( var i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {keys.push(String.fromCharCode(i));}//建立新的字母元素function createLetter() {// 普通的方法建立一個新的字母並添加到body中/* * var letter1 = document.createElement("div"); letter1.innerHTML = "<font * size='20'><b>B</b></font>"; letter1.style.top = "30px"; * letter1.style.width = "30px"; letter1.style.height = "30px"; * letter1.style.left = (screen.width * Math.random()) + "px"; * letter1.style.position = "absolute"; */// 可以使用元素的複製方法建立一個新的元素（取得當前頁面的字母div元素模板）var letter = document.getElementById("letter");// 根據這個模板複製一個元素var letter1 = letter.cloneNode(true);// 處理字母數組下標取整var keyIndex = parseInt(Math.random() * 26);letter1.innerHTML = "<font size='20'><b>" + keys[keyIndex] + "</b></font>";letter1.style.left = (screen.width * Math.random()) + "px";document.body.appendChild(letter1);// 移動字母元素moveLetter(letter1);// 為當前對應的字母div層設定一個keyCode屬性letter1.keyCode = keys[keyIndex];// 將當前產生的字母div加入數組currentKeys.push(letter1);sumKeys++;}// 字母移動的方法function moveLetter(letter) {// 定位到難度的選擇框var level = document.getElementById("level");// 擷取對應難度的下落數值var spleed = parseInt(level.options[level.selectedIndex].value);letter.style.display = "";var timer = setInterval(moveNext, 800);function moveNext() {// 擷取原來的上邊距var top = parseInt(letter.style.top);// 判斷高度是否大於螢幕高度if (top > (screen.availHeight - 250)) {// 清除掉定時器，如果不清楚的話會一直判斷下去造成資源的浪費window.clearInterval(timer);// 清楚字母if (letter.timerId) {letter.parentNode.removeChild(letter);}var ks = [];// for ( var i = 0; i < currentKeys.length; i++) {/* * 如果下一個產生的字母div層在目前記錄所產生的字母div層數組中不存在 * 則將其加到另外一個臨時變數數組中記錄著 * 最後在將臨時變數數組賦給當前產生的字母div數組中 */if (currentKeys[i] != letter) {ks.push(currentKeys[i]);}}currentKeys = ks;} else {// 新的上邊距var newtop = top + spleed + "px";// 將新的上邊距設定給top屬性letter.style.top = newtop;}}letter.timerId = timer;}// 處理鍵盤按下的事件/* * document.onkeypress = function(e) { alert(e.keyCode); }; */// 區分瀏覽器IE和Firefox的不同操作if (document.attachEvent) {// IE瀏覽器document.attachEvent("onkeydown", checkKeyPress);} else { // Firefox瀏覽器的操作document.addEventListener("keydown", checkKeyPress, false);}function checkKeyPress(e) {e = e || event;// alert(e.keyCode);var ks = [], nks = [];// ks是正確的字母數字，nks是不正確的字母數// 遍曆產生的字母數組，查看有沒有相同的，如果有則銷毀掉for ( var i = 0; i < currentKeys.length; i++) {// 螢幕上出現的字母if (String.fromCharCode(e.keyCode) == currentKeys[i].keyCode) {rightNum++;// 將按鍵正確的字母層存放到ks陣列變數中ks.push(currentKeys[i]);} else {// 螢幕上沒有出現的字母// 將按鍵不正確的字母層存放到nks陣列變數中nks.push(currentKeys[i]);}}// 清除使用者按鍵正確的字母div層for ( var i = 0; i < ks.length; i++) {ks[i].parentNode.removeChild(ks[i]);// 這裡就有可能會出現父子點是null的情況window.clearInterval(ks[i].timerId);delete ks[i].timerId;}// 將不正確的字母數組重新賦給當前出現的字母數組currentKeys = nks;}// 結束遊戲function stopGame() {var letter = document.getElementById("letter");letter.style.display = "none";letter.style.top = 30 + "px";if (gameTimer) {window.clearInterval(gameTimer);}// 結束遊戲的時候統計得分var score = document.getElementById("score");score.innerHTML = "出現的總字母數：" + sumKeys + "正確的次數：" + rightNum;sumKeys = 0;rightNum = 0;score.style.display = "";}
主要詳細的解析都在代碼中了，我就不再詳述了哈！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
