js猜數字小遊戲2.0——原創
今天把之前的猜數字改了一下，不過彈出視窗會阻止定時器執行，查了半天資料暫時沒有找到解決辦法。
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>猜數字</title>
<style>
body{
color:red;
background-color:#ddd;
font-size:50px;
}
input{
width:200px;
height:30px
}
button{
width:100px;
height:30px;
background-color:#678;
}
p{
text-align:center;
}
div{
color:#000;
font-size:30px;
}
#d{
float:right;
margin-top:200px;
}
</style>
</head>
<body>
<p id="c">猜測隨機生成的數字！</p>
數字位數(預設3)：
<input type="text" id="a" >
<p><button type="button" id="su" onClick="start()">開始遊戲</button></p>
<div >遊戲規則：請選擇遊戲難度,系統會隨機生成一個n位數的數字，在彈出框中輸入一個n位數的數字，根據提示調整數字和順序，直到猜對為止！</div>
<div id="d"></div>
<script>
//封裝區域性函式變數
var times=0;
var end=0;
var str="";
//啟動定時器(非同步執行,彈出框阻止程式執行未解決！);
setTime()
/***************************建立事件函式********************************/
function start(){
//宣告區域性變數
var mes=[];
var user_Arr=[];
var new_Arr=[];
var step=0;
//var end=0;
//var times=0;
//var str="";
//動態改變頁面p元素內容;
c.innerHTML="猜測隨機生成的數字！";
//獲取使用者輸入數字,將資料儲存在陣列
if(a.value==""){
a.value=3;
}
//呼叫瀏覽器提示框開始遊戲;
if (confirm("是否開始猜數字遊戲！")){
//調整計時器；
//times=0
//呼叫隨機陣列函式，生成新陣列new_Arr;
new_Arr=sui_Arr(a.value);
while(true){
//step記步數;
++step;
//獲取使用者輸入數字,將資料儲存在陣列
console.log("隨機陣列是："+new_Arr);
//提示資訊；
if(step<2){
str=prompt(`請輸入0~9之間的數字！`);
}else{
str=prompt(`
提示：
個數正確：${mes[0]};
順序正確：${mes[1]};
`)
}
//呼叫字串切割函式，將使用者輸入的數字儲存在陣列
user_Arr=spl(str);
//呼叫陣列比較函式,
mes=Bi_Arr(new_Arr,user_Arr);
//動態改變頁面p元素內容;
c.innerHTML=`
恭喜,猜對了！
正確數字：${str};<br>
共猜測：${step}次;<br>
用時：${times}秒;<br>
分數：${100-step*2-times*0.1}分;
`;
//如果猜對，則遊戲結束；
if(mes[2]){
//重啟計時器；
end=true;
times=0;
setTime();
break;
}
}
}else{//取消遊戲
//重啟計時器；
end=true;
times=0;
setTime();
}
}
/****************************建立功能函式*******************************/
//建立計時器函式
function setTime(){
var Time=setInterval(function(){
++times;
console.log(times);
d.innerHTML=`記時：${times}`
if (end)
{
window.clearInterval(Time);
}
},1000);
}
//建立陣列比較函式,返回正確個數，和正確位數;
function Bi_Arr(arr1,arr2){
var wei_num=0;
var ge_num=0;
var end=false;
//遍歷對比兩個陣列
for(var i in arr1){
if(arr1[i]==arr2[i]){
ge_num++;
}
for (var j in arr2){
if(arr1[i]==arr2[j]){
++wei_num;
break;
}
}
}
if (ge_num==arr1.length){
end=true;
}
console.log(ge_num,wei_num,end)
//返回比較結果,正確數字個數,真確位數個數,是否全正確；
return [ge_num,wei_num,end];
}
//建立隨機陣列函式，儲存生成隨機陣列；
function sui_Arr(a=3){
var My_Arr=[0,1,2,3,4,5,6,7,8,9]
//var a=3;
var sui_num=0;
var new_Arr=[];
for (var i=0;i<a;i++){
sui_num=Math.floor(Math.random()*My_Arr.length);
sui_num==0 ? sui_num=5 : sui_num;
new_Arr[new_Arr.length]=sui_num;
}
return new_Arr;
}
//建立切割字串函式，將結果儲存為陣列；
function spl(str){
//var str="abcdef";
var arr=[]
for (var i=0;i<str.length;i++ ){
arr[i]=str[i];
}
console.log(arr)
return arr;
}
</script>
</body>
</html>