生活随笔
收集整理的這篇文章主要介紹了
HTML网页小游戏 算术题判断
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前不久有個微信小程序的游戲，非常簡單的答題邏輯。
程序出一道簡單的算術題，并問你算術題的結果是對與錯？
例如：1+1=3？
你在規定的時間內，回答對錯，判斷正確則進入下一題，錯誤則游戲結束。
一共40道題，越到后面，答題時間越緊迫。全部答題，會有獎勵。
鄙人覺得有意思，也模仿著寫了一個HTML+JS版本的。全部代碼加起來，一百多行。當然，我這個全部答對是沒獎勵的。
游戲截圖如下：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><!--強制豎屏，針對UC、QQ--><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><!--使用app模式--><meta name="browsermode" content="application"><!--強制全屏，分別針對UC、QQ--><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><title></title><script src="js/jquery-3.1.1.min.js" type="text/javascript"></script><style>body {background-color: #3d4548;margin: 0;}/*問題區域*/#question {font-size: 9em;text-align: center;background-color: #c5099f;padding: 250px 0 0 0;color: white;height: 750px;border-radius: 0 0 1em 1em;box-shadow: #3c3737 8px 10px 6px;margin: 0px;}/*問題區域-標題*/#question #question-title {font-size: 45px;color: yellow;margin-top: 0;}/*問題區域-題數*/#question #question-count {font-size: 45px;}/*問題區域-進度條*/#question #question-progress {width: 90%;height: 25px;}/*答題區域*/#answer {color: white;position: fixed;bottom: 20px;width: 100%;display: flex;}#answer .answer-button {display: inline-block;width: 45%;font-size: 100px;text-align: center;border-radius: 10px;margin: auto;}#answer #answer-right {background-color: #5757e4;}#answer #answer-error {background-color: #f94b4b;}</style>
</head>
<body><div id="question"><p id="question-title">連續答對40題即挑戰成功</p><progress id="question-progress" value="100" max="100"></progress><p id="question-count">第1題</p><p id="question-text"></p></div><div id="answer"><div id="answer-right" class="answer-button">√</div><div id="answer-error" class="answer-button">×</div></div><script>//算數1、算數2，運算結果（該結果非正確結果，而是隨機結果）var g1, g2, g3;//運算符，只有+和-var op;//計時器句柄var gHandle = 0;//答題計數var gCount = 0;//生成一個問題,并顯示在#question-textfunction CreateQuestion() {//生成一道算術題g1 = Math.ceil(Math.random() * 100) % 10; //算數1g2 = Math.ceil(Math.random() * 100) % 10; //算數2op = Math.ceil(Math.random() * 100) % 2; //運算符switch (op) {case 0: //加法g3 = g1 + g2 + (Math.ceil(Math.random() * 100) % 3 - 1);$("#question-text").text(g1 + "+" + g2 + "=" + g3);break;case 1://減法g3 = g1 - g2 + (Math.ceil(Math.random() * 100) % 3 - 1);$("#question-text").text(g1 + "-" + g2 + "=" + g3);break;default:}gCount++;$("#question-count").text("第" + gCount + "題");}//返回CreateQuestion的正確答案function GetAnswer() {switch (op) {case 0:return (g1 + g2 == g3);case 1:return (g1 - g2 == g3);default:return true;}}//重置計時，把計時條的數值設置為100，并啟用每0.1秒的工作頻率function RestartTimeout() {clearInterval(gHandle);$("#question-progress").val(100);gHandle = setInterval(DealTimeout, 100);}//終止計時function StopTimeout() {clearInterval(gHandle);}/*處理計時計時器，以每0.1秒運行一次的頻率進行工作。它根據當前的題數，計算出答題時間。然后根據答題時間，計算出每0.1秒計時條要減少的數值（總值固定為100）最后刷新計時條。如果計時為0，則終止答題*/function DealTimeout() {//計算總秒數：1-10題 5秒，11-20題 4秒， 21-30題 3秒， 31-40 2秒var t = Math.floor((gCount - 1) / 10.0);var totalSeconds = 5 - t;var timeout = $("#question-progress").val();timeout -= (100 / (totalSeconds * 10));if (timeout == 0) {$("#question-progress").val(0);clearInterval(gHandle);alert("時間到!很遺憾，你只答對了" + (gCount - 1) + "道題");gCount = 0;$("#question-progress").val(100);CreateQuestion();}else {$("#question-progress").val(timeout);}}/*點擊回答按鈕，bret傳入用戶選擇的值，true or false*/function Answer(bRet) {if (bRet == GetAnswer()) {if (gCount == 40) {StopTimeout();$("#question-count").text("通關！！！");alert("太棒了，您成功答對40題！！截個圖發給我吧");}else {CreateQuestion();RestartTimeout();}}else {StopTimeout();alert("很遺憾，您只答對了" + (gCount - 1) + "道題");gCount = 0;$("#question-progress").val(100);CreateQuestion();}}$(document).ready(function () {CreateQuestion();$("#answer-right").click(function () {Answer(true);});$("#answer-error").click(function () {Answer(false);});});</script>
</body>
</html>
把上面代碼復制粘貼到記事本，然后保存為html后綴，就可以使用了。
其中用到了jquery，需要你自己去網上下載。
如果你想看結果，也可以訪問https://chion.site/master（這個是為移動端所寫的，建議在手機上訪問。電腦網頁訪問會走樣。）
總結
以上是生活随笔為你收集整理的HTML网页小游戏 算术题判断的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
