这篇文章主要为大家详细介绍了射流研究…实现数字拼图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现数字拼图的具体代码,供大家参考,具体内容如下
重点:
游戏区分为8个div,进行游戏时需要判断点击的差异是否可移动,移动后判断游戏是否结束。
解决思路:将游戏界面看作一个差异大盒子,将大盒子分为9个区域进行编号,这9个区域的位置始终不变;8个差异以定位顶端和左边的控制其位置,设置9个区域的差异分别可以往哪个区域移动,点击时判断可移动的编号区域内是否有div,若有,则无法向该方向移动。每次移动后检查8个差异的编号是否与区域的编号完全重合,若重合,则通关。
运行情况
超文本标记语言
div id='容器'
!-最外面的DIV,用来包含里面的结构-
div id='游戏'
!-游戏区,也就是大差异方块-
div id='d1'1/div
div id='d2'2/div
div id='d3'3/div
div id='d4'4/div
div id=" D5 " 5/div
div id='d6'6/div
div id='d7'7/div
div id='d8'8/div
/div
div id='control '
!-游戏控制区-
p
总用时:
span id='timer'/span
/p
!-显示游戏时间区域-
p
按钮id="开始"开始/按钮
按钮id="重置"重来/按钮
/p
!-显示控制按钮区域-
/div
/div
半铸钢钢性铸铁(铸造半钢)
* {
填充:0;
边距:0;
边框:0;
}
正文{
宽度:100%;
身高:100%;
}
#容器{
位置:相对;
宽度:620像素
高度:450像素
边距:0自动;
边距-顶部:100像素
边框-半径:1px
}
#游戏{
位置:绝对;
宽度:450像素
高度:450像素
边框半径:5px
显示:内嵌-块;
背景色:# ffe171
box-shadow:0 0 10px # FFE 171;
}
#游戏部门{
位置:绝对;
宽度:149像素
身高:149像素
box-shadow:1px 1px 2px # 777;
背景色:# 20a6fa
颜色:白色;
文本对齐:居中;
字体大小:150像素;
行高:150像素;
光标:指针;
转场:0.3秒
}
#游戏部门:悬停{
颜色:# ffe171
}
#控制{
宽度:150像素
高度:450像素
显示:内嵌-块;
位置:绝对;
top:0;
右:0;
}
#控制按钮{
高度:25px
字体大小:20px
颜色:# 222;
页边距-顶部:10px
}
#开始{
显示:内嵌-块;
字体大小:28px
宽度:100像素
高度:28px
背景色:# 20a6fa
颜色:# ffe171
文-影:1px 1px 2px # FFE 171;
边框半径:5px
盒影:2px 2px 5px # 4c 98 f 5;
文本对齐:居中;
/*光标:指针让鼠标移到元素上面显示不同的鼠标形状,指针是手型*/
光标:指针;
}
#重置{
显示:内嵌-块;
字体大小:28px
宽度:100像素
高度:28px
背景色:# 20a6fa
颜色:# ffe171
文-影:1px 1px 2px # FFE 171;
边框半径:5px
盒影:2px 2px 5px # 4c 98 f 5;
文本对齐:居中;
光标:指针;
}
#d1 {
左:0px
}
#d2 {
左:150像素
}
#d3 {
左:300像素
}
#d4 {
顶:150 px
}
#d5 {
顶:150 px
左:150像素
}
#d6 {
顶:150 px
左:300像素
}
#d7 {
顶配:300像素
}
#d8 {
左:150像素
顶配:300像素
}
射流研究…
var time=0;
//添加暂停判断
var pause=true
var设置计时器
//创建编号,不使用第一个元素
变量d=新数组(10);
for(var I=1;I 9;i ) {
d[I]=I;
}
d[9]=0;
//大差异编号可移动的位置
var d_direct=新数组(
[0], [2, 4], [1, 3, 5], [2, 6], [1, 5, 7], [2, 4, 6, 8], [3, 5, 9], [4, 8], [5, 7, 9], [6, 8]
);
//大差异编号的位置[左上]
var d_posXY=新数组(
[0], [0, 0], [150, 0], [300, 0], [0, 150], [150, 150], [300, 150], [0, 300], [150, 300], [300, 300]
);
var游戏=文档。查询selector all(# game div));
for(var I=0;I game . length {
var j=I 1;
游戏[我]。setAttribute('index ',j);
游戏[我]。addEventListener('click ',函数(e) {
移动目标。get属性(' index ');
});
}
//移动
函数移动(e,id) {
//查找小差异在大差异中的位置
var I=1;
for(I=1;i 10i ) {
if (d[i]==id) {
打破;
}
}
//查找小差异可移动的位置,0则无法移动
var target _ d=0;
target _ d=其中canto(I);
//判断当前被点击的小差异是否可移动
if (target_d!=0) {
//设置当前大差异编号为0
d[I]=0;
//将目标大差异编号设置为被点击的小差异编号
d[target _ d]=id;
//设置被点击小差异的位置
文档。getelementbyid(' d ' id)。风格。left=d _ posXY[target _ d][0]“px”;
文档。getelementbyid(' d ' id)。风格。top=d _ posXY[target _ d][1]' px ';
}
//判断游戏是否完成
var finish _ flag=true
for(var k=1;K9;k ) {
if (d[k]!=k) {
完成标志=假
打破;
}
}
if (finish_flag==true) {
如果(!暂停){
start();
警报('恭喜中了!');
}
}
}
//查找并返回小差异可以移动的编号
函数whereCanTo(cur_div) {
var j=0;
var move _ flag=false
for(j=0;直达航班.长度;j ) {
if(d[d _ direct[cur _ div][j]]==0){
move _ flag=true
打破;
}
}
if (move_flag==true) {
return d _ direct[cur _ div][j];
}否则{
返回0;
}
}
//设置计时
函数计时器(){
时间=1;
var min=parseInt(时间/60);
var s=时间% 60;
document.getElementById('timer ')。innerHTML=min '分" s "秒;
}
//开始暂停
var start=文档。查询选择器(# start);
start.addEventListener('click ',sta);
函数sta() {
如果(暂停){
start.innerHTML='暂停;
暂停=假;
set_timer=setInterval(定时器,1000);
}否则{
start.innerHTML='开始;
暂停=真;
清除间隔(set _ timer);
}
}
//重置游戏
var reset=文档。查询选择器(# reset));
reset.addEventListener('click ',RES);
函数res() {
时间=0;
random _ d();
如果(暂停){
sta();
}
}
//随机打乱
函数random_d() {
for(var I=9;I 1;我- ) {
var to=parse int(数学。random()*(I-1)1);
//设置当前差异为随机产生的差异位置
if (d[i]!=0) {
文档。getelementbyid(' d ' d[I]),样式。left=d _ posXY[to][0]“px”;
文档。getelementbyid(' d ' d[I]),样式。top=d _ posXY[to][1]' px ';
}
//设置随机产生的差异位置为当前差异位置
if (d[to]!=0) {
文档。getelementbyid(' d ' d[to]),样式。left=d _ posXY[I][0]“px”;
文档。getelementbyid(' d ' d[to]),样式。top=d _ posXY[I][1]' px ';
}
//随机产生的差异与当前的差异编号互换
var temp=d[to];
d[to]=d[I];
d[I]=temp;
}
}
//初始化
window.addEventListener('load ',RES);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。