Jquery实现数字华容道小游戏

<!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"><h1>步数<span id="count">0</span></h1><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实现数字华容道小游戏相关推荐

C语言开发数字华容道实现,jQuery实现数字华容道小游戏(实例代码)
数字华容道 *{ padding: 0px; margin: 0px; } #btns>button{ width: 100px; height: 30px; border: none; bac ...
数字华容道java的代码_jQuery实现数字华容道小游戏(实例代码)
数字华容道 *{ padding: 0px; margin: 0px; } #btns>button{ width: 100px; height: 30px; border: none; bac ...
canvas+js实现简单的数字华容道小游戏
数字华容道是个很简单的小游戏,今天就尝试使用canvas+js做个简单的数字华容道小游戏.有关于游戏的具体规则请上网查阅. 一如既往先写个html页面,这里我把游戏的界面水平居中了,这里预留了一个动画 ...
JS自制简易版数字华容道小游戏
最近复习了下前端基础知识HTML+JS(是真的非常基础那种,久不用,基本忘完了). 复习了一小部分内容,闲暇之余打算利用刚复习的js基础知识做个小游戏,刚好手机上下载的游戏集中就有一个数字益智游戏-- ...
CreateJS实现【益智类数字华容道小游戏】
系列文章微信小程序(游戏)----拖拽拼图(图片分块和打乱顺序) 微信小程序(游戏)----五子棋 [taro react](游戏) ---- 类2048游戏,看看在秦朝,功勋爵位你能到哪一级 [t ...
python快速实现数字华容道小游戏
华容道,中国历史地名.据<资治通鉴>注释中的说法,就是"从此道可至华容也".这里所说的华容,当然是指华容县城.华容道也就是赤壁战争中曹军逃入华容县界后向华容县城逃跑的路 ...
c语言实现数字华容道编程,【JIONEY】掌控版+遥传感器实现数字华容道小游戏...
数字华容道--掌控版+遥杆例程自小就喜欢玩拼图游戏,一个小板板上通过一个缺少的方块,移动其余的方块打乱拼图,通过一定的移动方法将方块放回到位置.这次就借助掌控版,来设计一个数字华容道. 任务: 1. ...
用Java写“数字华容道”小游戏，适合初学者的小游戏
游戏资源放在这里: 链接:百度网盘请输入提取码提取码:9290 在这个小游戏里,我们不仅用到了JFrame类,还用到了继承的方法.所以在这里我们用IDEA实现,在一个包下创建一个华容道类,用来进行 ...
unity3d 华容道_Android数字华容道小游戏开发
目的上周新一期的最强大脑出来了,虽然上季被称为最强黑幕,不过呢.我决定还是看看= =.它里面第一关是叫做数字华容道.说白了,就是和拼图差不多.一开始我准备下一个玩玩的.结果没搜到.所以决定写了一个. ...

Jquery实现数字华容道小游戏

Jquery实现数字华容道小游戏相关推荐

最新文章

热门文章