溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>數字華容道</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#btns>button{
width: 100px;
height: 30px;
border: none;
background:#0082df;
color:white;
}
#content{
text-align: center;
margin: 0 auto;
}
#grid{
border: 1px solid #0082df;
width: 300px;
margin: 20px auto;
height: 300px;
}
#grid>div{
float: left;
width: 33%;
background: gray;
height: 33%;
margin-bottom:1px;
margin-right :1px;
}
.num{
background:#0082df;
width: 99%;
height: 99%;
color:white;
font-size: 30px;
font-weight: bold;
line-height:99px;
}
</style>
</head>
<body>
<div id="content">
<h2>步數<span id="count">0</span></h2>
<div id="grid">
</div>
<div id="btns">
<button>重新開始</button>
</div>
</div>
<script type="text/javascript">
var arr = [];
var count=0;
$('button').click(function(){
count=0;
$('#count').html(count);
arr=[];
load();
});
function load(){
for(var i=0;arr.length<8;i++){
var num = Math.ceil(Math.random()*8)
if(arr.indexOf(num)==-1){
arr.push(num)
}
}
arr.push("");
rander();
}
load();
function rander(){
var html="";
for(var i=0;i<arr.length;i++){
if(arr[i]==""){
html+="<div></div>";
}else{
html+="<div><div οnclick='toMove(this)' class='num'>"+arr[i]+"</div></div>";
}
}
$('#grid').html(html);
}
function toMove(obj){
var value=Number($(obj).text());
var index=arr.indexOf(value);
if(arr[index+3]==""){
arr[index]=arr[index+3];
arr[index+3]=value;
count++;
rander();
}
if(arr[index-3]==""){
arr[index]=arr[index-3];
arr[index-3]=value;
count++;
rander();
}
if(arr[index+1]==""){
arr[index]=arr[index+1];
arr[index+1]=value;
count++;
rander();
}
if(arr[index-1]==""){
arr[index]=arr[index-1];
arr[index-1]=value;
count++;
rander();
}
$('#count').html(count);
if(endGame()){
alert("成功");
}
};
function endGame(){
arr[arr.indexOf("")]=9;
for(var i=0;i<arr.length-2;i++){
if(arr[arr.length-1]==9){
if(arr[i]>arr[i+1]){
arr[arr.indexOf(9)]="";
return false;
}
}else{
arr[arr.indexOf(9)]="";
return false;
}
}
arr[arr.indexOf(9)]="";
return true;
}
</script>
</body>
</html>
總結
以上所述是小編給大家介紹的jQuery實現數字華容道小游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
