案例介紹 歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個乘法積分游戲。乘法游戲主要通過用戶輸入的數值和程式計算的數值進行對比，正確積一分，錯誤扣一分。通過實戰我們將學會JSON.parse方法、JSON.stringify方法、localS ...
案例介紹
歡迎來的我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個乘法積分游戲。乘法游戲主要通過用戶輸入的數值和程式計算的數值進行對比，正確積一分，錯誤扣一分。通過實戰我們將學會JSON.parse方法、JSON.stringify方法、localStorage.setItem方法和localStorage.getItem方法。
案例演示
運行程式後用戶根據題目在輸入框內輸入結果，點擊提交後，系統判定，正確得分加一分，錯誤得分扣一分。
案例設計
JavaScript實戰案例-乘法游戲
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。
源碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼。
<form class="form" id="form">
<h4 class="score" id="score">得分</h4>
<h1 id="question">1x1=?</h1>
<input type="text"
class="input"
id="input"
placeholder="輸入你的答案"
autofocus
autocomplete="off"/>
<button type="submit" class="btn">提交</button>
</form>
然後我們來編寫核心的JavaScript代碼，通過math隨機生成數字，自由組成題目。通過getElementById獲得指定id的對象，使用innerText將題目、得分設置在頁面上。當用戶點擊提交時，將用戶提交的結果和程式計算的結果進行比較，兩者一樣得分+1，兩者不同得分-1。
const num1=Math.ceil(Math.random()*10);
const num2=Math.ceil(Math.random()*10);
const questionEI=document.getElementById("question");
const inputEI=document.getElementById("input");
const formEI=document.getElementById("form");
const scoreEI=document.getElementById("score");
let score=JSON.parse(localStorage.getItem("score"));
if(!score){
score=0;
}
scoreEI.innerText=`得分：${score}`;
questionEI.innerText=`${num1} X ${num2} = ?`;
const correctAns=num1*num2;
formEI.addEventListener("submit",()=>{
const userAns=+inputEI.value;
if(userAns===correctAns){
score++;
updateLocalStorage();
}else{
score--;
updateLocalStorage();
}
});
function updateLocalStorage() {
localStorage.setItem("score",JSON.stringify(score));
}
總結思考
學習點
1、JSON.parse：將數據轉換為 JavaScript 對象。
2、JSON.stringify：將 JavaScript 對象轉換為字元串。
3、localStorage.setItem：將value存儲到key欄位
4、localStorage.getItem：獲取指定key本地存儲的值
問答
1、localStorage.setItem將什麼存儲到key欄位？
2、JSON.stringify是將對象轉換為字元串嗎？
3、JSON.parse：將數據轉換為什麼對象？
關註我，跟著我每天學習一點點，讓你不再枯燥，不再孤單..
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
