教您前端开采拼图小游戏,纯前端开辟拼图游戏

功效如下:

js完毕九宫格拼图小游戏,js九宫拼图小游戏

效果如下:

皇家赌场手机版 1

代码如下:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>九宫格拼图</title>
 <style>
  *{
   padding: 0;
   margin: 0;
   border: 0;
  }
  /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */
  body{
   width: 100%;
   height: 100%;
  }
  /* 给body设置100%的高度和宽度,这样就会根据浏览器屏幕大小自动适配 */
  #container{
   position: relative;
   width: 620px;
   height: 450px;
   margin: 0 auto;
   margin-top: 100px;
   border-radius: 1px;
  }
  /* 这是包裹所有元素的DIV,给他设置620px的宽和450px的高,这个大小可以设置为更大,但是不能小,至少要能包含里面所有的元素 */
  #game{
   position: absolute;
   width: 450px;
   height: 450px;
   border-radius: 5px;
   display: inline-block;
   background-color: #ffe171;
   box-shadow: 0 0 10px #ffe171;
  }
  /* 这是游戏区的DIV,这个大小是计算出来的,取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px,所以这个大小是150px*3,为450px */
  #game div{
   position: absolute;
   width: 149px;
   height: 149px;
   box-shadow: 1px 1px 2px #777;
   background-color: #20a6fa;
   color: white;
   text-align: center;
   font-size: 150px;
   line-height: 150px;
   cursor: pointer;
   -webkit-transition: 0.3s;/*浏览器前缀,兼容其他浏览器 chrome*/
    -moz-transition: 0.3s;/*firefox*/
    -ms-transition: 0.3s;/*ie*/
     -o-transition: 0.3s;/*opera*/
     transition: 0.3s;
  }
  /* 这就是小方块的大小了,定位为绝对定位,这样改变位置不会影响其他元素的位置。宽高都是149px。注意了,我们还设置了box-shadow:1px 1px 2px #777 ;
  它还有边框阴影,所以149px 加上边框1px,它的总宽度是150px 下面的transition:0.3s是设置过渡时间,这是css3的属性,它会让属性改变呈现过渡动画,所以
  当我们改变方块的位置时,它会有一个动画,我们不必自己编写动画函数,这回让你疯狂*/
  #game div:hover{
   color: #ffe171;
  }
  /*给方块设置鼠标悬停动画,当鼠标悬停在元素上面时,会用这里的属性替换上面的属性,移开后又会变为原来的,这里我们是把字体颜色改变*/
  #control{
   width: 150px;
   height: 450px;
   display: inline-block;
   float: right;
  }
  /*控制区,display:inline-block会让元素呈现块状元素的特性,使得可以改变大小,同时也会具有行内元素的特性,使得不会占据一行空间,float:right让元素浮动到右边*/
  #control rowspan{
   height: 25px;
   font-size: 20px;
   color: #222;
   margin-top: 10px;
  }
  /*设置控制区按钮的共同样式*/
  #start{
   display: inline-block;
   font-size: 28px;
   width: 100px;
   height: 28px;
   background-color: #20a6fa;
   color: #ffe171;
   text-shadow: 1px 1px 2px #ffe171;
   border-radius: 5px;
   box-shadow: 2px 2px 5px #4c98f5;
   text-align: center;
   cursor: pointer;
  }
  /*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状,pointer是手型*/
  #reset{
   display: inline-block;
   font-size: 28px;
   width: 100px;
   height: 28px;
   background-color: #20a6fa;
   color: #ffe171;
   text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/
   border-radius: 5px;/*圆角属性*/
   box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/
   text-align: center;/*文字居中*/
   cursor: pointer;
  }
  /*给Reset按钮设置属性*/
  #d1{
   left: 0px;
  }
  #d2{
   left: 150px;
  }
  #d3{
   left: 300px;
  }
  #d4{
   top: 150px;
  }
  #d5{
   top: 150px;
   left: 150px;
  }
  #d6{
   top: 150px;
   left: 300px;
  }
  #d7{
   top: 300px;
  }
  #d8{
   left: 150px;
   top: 300px;
  }
  /*这是预先给每个小方块按照顺序排好位置*/
 </style>
</head>
<body>
 <div id="container">
 <!--最外面的DIV,用来包含里面的结构-->
  <div id="game">
  <!--游戏区,大DIV方块-->
   <div id="d1" onclick="move(1)">1</div>
   <!--小DIV,也就是8个小方块。当点击的时候执行move()函数,参数是显示的编号,这样我们就知道点击了哪个方块-->
   <div id="d2" onclick="move(2)">2</div>
   <div id="d3" onclick="move(3)">3</div>
   <div id="d4" onclick="move(4)">4</div>
   <div id="d5" onclick="move(5)">5</div>
   <div id="d6" onclick="move(6)">6</div>
   <div id="d7" onclick="move(7)">7</div>
   <div id="d8" onclick="move(8)">8</div>
  </div>
  <div id="control">
  <!--游戏控制区-->
   <p>
    <rowspan id="timeText">总用时</rowspan>
    <rowspan id="timer"></rowspan>
   </p>
   <!--显示游戏时间区域-->
   <p>
    <rowspan id="start" onclick="start()">开始</rowspan>
    <rowspan id="reset" onclick="reset()">重来</rowspan>
   </p>
   <!--显示控制按钮区域-->
  </div>
 </div>
 <script>
  var time=0; //保存定时时间
  var pause=true; //设置是否暂停标志,true表示暂停
  var set_timer; //设置定时函数
  var d=new Array(10); //保存大DIV当前装的小DIV的编号
  var d_direct=new Array(
    [0],//为了逻辑更简单,第一个元素我们不用,我们从下标1开始使用
    [2,4],//大DIV编号为1的DIV可以去的位置,比如第一块可以去2,4号位置
    [1,3,5],
    [2,6],
    [1,5,7],
    [2,4,6,8],
    [3,5,9],
    [4,8],
    [5,7,9],
    [6,8]
   ); //保存大DIV编号的可移动位置编号
  var d_posXY=new Array(
    [0],//同样,我们不使用第一个元素
    [0,0],//第一个表示left,第二个表示top,比如第一块的位置为let:0px,top:0px
    [150,0],
    [300,0],
    [0,150],
    [150,150],
    [300,150],
    [0,300],
    [150,300],
    [300,300]
   ); //大DIV编号的位置
  d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //默认按照顺序排好,大DIV第九块没有,所以为0,我们用0表示空白块
  function move(id){
   //移动函数,前面我们已将讲了
   var i=1;
   for(i=1; i<10; ++i){
    if( d[i] == id )
     break;
   }
   //这个for循环是找出小DIV在大DIV中的位置
   var target_d=0;
   //保存小DIV可以去的编号,0表示不能移动
   target_d=whereCanTo(i);
   //用来找出小DIV可以去的位置,如果返回0,表示不能移动,如果可以移动,则返回可以去的位置编号
   if( target_d != 0){
    d[i]=0;
    //把当前的大DIV编号设置为0,因为当前小DIV已经移走了,所以当前大DIV就没有装小DIV了
    d[target_d]=id;
    //把目标大DIV设置为被点击的小DIV的编号
    document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
    document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
    //最后设置被点击的小DIV的位置,把它移到目标大DIV的位置
   }
   //如果target_d不为0,则表示可以移动,且target_d就是小DIV要去的大DIV的位置编号
   var finish_flag=true;
   //设置游戏是否完成标志,true表示完成
   for(var k=1; k<9; ++k){
    if( d[k] != k){
     finish_flag=false;
     break;
     //如果大DIV保存的编号和它本身的编号不同,则表示还不是全部按照顺序排的,那么设置为false,跳出循环,后面不用再判断了,因为只要一个不符,就没完成游戏
    }
   }
   //从1开始,把每个大DIV保存的编号遍历一下,判断是否完成
   if(finish_flag==true){
    if(!pause)
     start();
    alert("congratulation");
   }
   //如果为true,则表示游戏完成,如果当前没有暂停,则调用暂停韩式,并且弹出提示框,完成游戏。
   //start()这个函数是开始,暂停一起的函数,如果暂停,调用后会开始,如果开始,则调用后会暂停
  }
  function whereCanTo(cur_div){
   //判断是否可移动函数,参数是大DIV的编号,不是小DIV的编号,因为小DIV编号跟可以去哪没关系,小DIV是会动的
   var j=0;
   var move_flag=false;
   for(j=0; j<d_direct[cur_div].length; ++j){
    //把所有可能去的位置循环遍历一下
    if( d[ d_direct[cur_div][j] ] == 0 ){
     move_flag=true;
     break;
    }
    //如果目标的值为0,说明目标位置没有装小DIV,则可以移动,跳出循环
   }
   if(move_flag == true){
    return d_direct[cur_div][j];
   }else{
    return 0;
   }
   //可以移动,则返回目标位置的编号,否则返回0,表示不可移动
  }
  //定时函数,每一秒执行一次
  function timer(){
   time+=1;//一秒钟加一,单位是秒
   var min=parseInt(time/60);//把秒转换为分钟,一分钟60秒,取商就是分钟
   var sec=time%60;//取余就是秒
   document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//然后把时间更新显示出来
  }
  //开始暂停函数
  function start(){
   if(pause){
    document.getElementById("start").innerHTML="暂停";//把按钮文字设置为暂停
    pause=false;//暂停表示设置为false
    set_timer=setInterval(timer,1000);//启动定时
    //如果当前是暂停,则开始
   }else{
    document.getElementById("start").innerHTML="开始";
    pause=true;
    clearInterval(set_timer);
   }
  }
  //重置函数
  function reset(){
   time=0;//把时间设置为0
   random_d();//把方块随机打乱函数
   if(pause)//如果暂停,则开始计时
    start();
  }
  //随机打乱方块函数,我们的思路是从第九块开始,随机生成一个数,然后他们两块对调一下
  function random_d(){
   for(var i=9; i>1; --i){
    var to=parseInt(Math.random()*(i-1)+1);//产生随机数,范围为1到i,不能超出范围,因为没这个id的DIV
    if(d[i]!=0){
     document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px";
     document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px";
    }
    //把当前的DIV位置设置为随机产生的DIV的位置
    if(d[to]!=0){
     document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
     document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
    }
    //把随机产生的DIV的位置设置为当前的DIV的位置
    var tem=d[to];
    d[to]=d[i];
    d[i]=tem;
    //然后把它们两个的DIV保存的编号对调一下
   }
  }
  //初始化函数,页面加载的时候调用重置函数,重新开始
  window.onload=function(){
   reset();
  }
 </script>
</body>
</html>

规划思路:

教您前端开采拼图小游戏,纯前端开辟拼图游戏。我们要做的正是安装四个大 DIV 用来包裹里面包车型大巴小 DIV,然后在中间安装 8 个小
DIV,从 1
开首给她们编号。右侧设置五个按键,点击早先的时候开始计时,达成拼图后停下计时,并弹出贰个框,提醒完毕了。重来按键是当用户以为眼下有难度的时候,点击重来可以又一次伊始三个新的拼图,把具备方块打乱顺序,然后开首计时。咱们的主要便是当鼠标点击在那之中七个四方时,要认清当前方块是不是可活动,如若可活动,则运动到相应的职位,如不得移动,则不做此外交事务。当移动完一块后,要看清是还是不是做到拼图。大家把那三个大
DIV 想象成一个盒子,它有几个职位,从 1
开端,到9编号,他们的职位和编号都以不会变的。把内部的 8 个小 DIV 想象成
8 个小盒子,给他们设置 top 和 left 就足以调控他们的职责。种种小 DIV 从 1
开首到 8 编号。他们的位置是足以任性别变化更的。所以当小 DIV 的数码和大 DIV
的数码全体重合时,就做到了拼图。

教您前端开采拼图小游戏,纯前端开辟拼图游戏。由此首要就唯有一个了。那正是哪些剖断是还是不是可活动。这么些也大约。我们设置二个一维数组变量,用来保存大
DIV 它里面装的小 DIV 的编号。假使大 DIV
未有小方块,也就表面它是空白块,那么就设为 0。借使当前大 DIV 有小
DIV,那就设置为小 DIV 的数码。然后再安装三个二维数组变量,用来保存大 DIV
的可活动号码。也正是保存这一个大 DIV 它有着的可去的职位。举例大 DIV 编号为
2 的,它不得不向 1号,3号,5号那四个方向移动。又比方 5,它能向 2、4、6、8
那多少个样子移动。大家循环遍历这些变量,要是对应的方向它
没有方块,也正是值为 0,那么它就能够往那么些趋势移动了。

提醒:因为实验中应用的任意打乱方块的算法特别轻易,可是存在
bug,有 四分之二 的票房价值生成的相继是无力回天恢复生机的,那年就只能点击重新起头。

如上正是本文的全体内容,希望本文的开始和结果对大家的学习大概职业能拉动一定的提携,同有时常候也盼望多多帮助帮客之家!

效果如下: 代码如下: !doctype htmlhtmlhead meta charset=”UTF-8″
title九宫格拼图/title style *{ padding: 0…

表达:文章全数剧情均截选自实验楼教程:;

表明:小说全数内容均截选自实验楼教程~

皇家赌场手机版 2

作品基于 HTML+CSS+JavaScript 达成网页版的拼图游戏。完结进程司令员用到
HTML5,CSS3 及 JavaScript
相关文化。实现那一个项目,能够特别扎实前端基础知识。

1.1 实验内容

本学科基于 HTML+CSS+JavaScript 实现网页版的拼图游戏。落成进程少将用到
HTML5,CSS3 及 JavaScript
相关文化。达成这些类型,可以更进一步扎实前端基础知识。

九宫格拼图相信大家都玩过了,看似简单的小游戏,但贯彻起来其实并不那么轻易。在以前,写程序是技师的专利,唯有他们工夫做出贰个软件来。不过今后不等了。科学和技术的进化和经济的进化,使得各样人都足以使用微型Computer。非常是
HTML5 和 CSS3 的风行,使得制作叁在那之中坚的娱乐变得简单。

上面我们就来做一个九宫格拼图。它的玩的方法是运动空格块旁边的四方,使得它们依照方块上边标的数字顺序排好。最后的作用:

皇家赌场手机版 3

代码如下:

九宫格拼图相信我们都玩过了,看似轻巧的小游戏,但落实起来实在并不那么粗略。在以前,写程序是技术员的专利,只有他们本领做出一个软件来。然则未来不可同日而语了。科学技术的提升和经济的升高,使得种种人都得以采取Computer。特别是
HTML5 和 CSS3 的流行,使得制作多个为主的游戏变得轻松。

1.2 实验知识点

本实验涉及以下知识点:

  • HTML5
  • CSS3
  • JavaScript
<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>九宫格拼图</title>
 <style>
  *{
   padding: 0;
   margin: 0;
   border: 0;
  }
  /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */
  body{
   width: 100%;
   height: 100%;
  }
  /* 给body设置100%的高度和宽度,这样就会根据浏览器屏幕大小自动适配 */
  #container{
   position: relative;
   width: 620px;
   height: 450px;
   margin: 0 auto;
   margin-top: 100px;
   border-radius: 1px;
  }
  /* 这是包裹所有元素的DIV,给他设置620px的宽和450px的高,这个大小可以设置为更大,但是不能小,至少要能包含里面所有的元素 */
  #game{
   position: absolute;
   width: 450px;
   height: 450px;
   border-radius: 5px;
   display: inline-block;
   background-color: #ffe171;
   box-shadow: 0 0 10px #ffe171;
  }
  /* 这是游戏区的DIV,这个大小是计算出来的,取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px,所以这个大小是150px*3,为450px */
  #game div{
   position: absolute;
   width: 149px;
   height: 149px;
   box-shadow: 1px 1px 2px #777;
   background-color: #20a6fa;
   color: white;
   text-align: center;
   font-size: 150px;
   line-height: 150px;
   cursor: pointer;
   -webkit-transition: 0.3s;/*浏览器前缀,兼容其他浏览器 chrome*/
    -moz-transition: 0.3s;/*firefox*/
    -ms-transition: 0.3s;/*ie*/
     -o-transition: 0.3s;/*opera*/
     transition: 0.3s;
  }
  /* 这就是小方块的大小了,定位为绝对定位,这样改变位置不会影响其他元素的位置。宽高都是149px。注意了,我们还设置了box-shadow:1px 1px 2px #777 ;
  它还有边框阴影,所以149px 加上边框1px,它的总宽度是150px 下面的transition:0.3s是设置过渡时间,这是css3的属性,它会让属性改变呈现过渡动画,所以
  当我们改变方块的位置时,它会有一个动画,我们不必自己编写动画函数,这回让你疯狂*/
  #game div:hover{
   color: #ffe171;
  }
  /*给方块设置鼠标悬停动画,当鼠标悬停在元素上面时,会用这里的属性替换上面的属性,移开后又会变为原来的,这里我们是把字体颜色改变*/
  #control{
   width: 150px;
   height: 450px;
   display: inline-block;
   float: right;
  }
  /*控制区,display:inline-block会让元素呈现块状元素的特性,使得可以改变大小,同时也会具有行内元素的特性,使得不会占据一行空间,float:right让元素浮动到右边*/
  #control rowspan{
   height: 25px;
   font-size: 20px;
   color: #222;
   margin-top: 10px;
  }
  /*设置控制区按钮的共同样式*/
  #start{
   display: inline-block;
   font-size: 28px;
   width: 100px;
   height: 28px;
   background-color: #20a6fa;
   color: #ffe171;
   text-shadow: 1px 1px 2px #ffe171;
   border-radius: 5px;
   box-shadow: 2px 2px 5px #4c98f5;
   text-align: center;
   cursor: pointer;
  }
  /*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状,pointer是手型*/
  #reset{
   display: inline-block;
   font-size: 28px;
   width: 100px;
   height: 28px;
   background-color: #20a6fa;
   color: #ffe171;
   text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/
   border-radius: 5px;/*圆角属性*/
   box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/
   text-align: center;/*文字居中*/
   cursor: pointer;
  }
  /*给Reset按钮设置属性*/
  #d1{
   left: 0px;
  }
  #d2{
   left: 150px;
  }
  #d3{
   left: 300px;
  }
  #d4{
   top: 150px;
  }
  #d5{
   top: 150px;
   left: 150px;
  }
  #d6{
   top: 150px;
   left: 300px;
  }
  #d7{
   top: 300px;
  }
  #d8{
   left: 150px;
   top: 300px;
  }
  /*这是预先给每个小方块按照顺序排好位置*/
 </style>
</head>
<body>
 <div id="container">
 <!--最外面的DIV,用来包含里面的结构-->
  <div id="game">
  <!--游戏区,大DIV方块-->
   <div id="d1" onclick="move(1)">1</div>
   <!--小DIV,也就是8个小方块。当点击的时候执行move()函数,参数是显示的编号,这样我们就知道点击了哪个方块-->
   <div id="d2" onclick="move(2)">2</div>
   <div id="d3" onclick="move(3)">3</div>
   <div id="d4" onclick="move(4)">4</div>
   <div id="d5" onclick="move(5)">5</div>
   <div id="d6" onclick="move(6)">6</div>
   <div id="d7" onclick="move(7)">7</div>
   <div id="d8" onclick="move(8)">8</div>
  </div>
  <div id="control">
  <!--游戏控制区-->
   <p>
    <rowspan id="timeText">总用时</rowspan>
    <rowspan id="timer"></rowspan>
   </p>
   <!--显示游戏时间区域-->
   <p>
    <rowspan id="start" onclick="start()">开始</rowspan>
    <rowspan id="reset" onclick="reset()">重来</rowspan>
   </p>
   <!--显示控制按钮区域-->
  </div>
 </div>
 <script>
  var time=0; //保存定时时间
  var pause=true; //设置是否暂停标志,true表示暂停
  var set_timer; //设置定时函数
  var d=new Array(10); //保存大DIV当前装的小DIV的编号
  var d_direct=new Array(
    [0],//为了逻辑更简单,第一个元素我们不用,我们从下标1开始使用
    [2,4],//大DIV编号为1的DIV可以去的位置,比如第一块可以去2,4号位置
    [1,3,5],
    [2,6],
    [1,5,7],
    [2,4,6,8],
    [3,5,9],
    [4,8],
    [5,7,9],
    [6,8]
   ); //保存大DIV编号的可移动位置编号
  var d_posXY=new Array(
    [0],//同样,我们不使用第一个元素
    [0,0],//第一个表示left,第二个表示top,比如第一块的位置为let:0px,top:0px
    [150,0],
    [300,0],
    [0,150],
    [150,150],
    [300,150],
    [0,300],
    [150,300],
    [300,300]
   ); //大DIV编号的位置
  d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //默认按照顺序排好,大DIV第九块没有,所以为0,我们用0表示空白块
  function move(id){
   //移动函数,前面我们已将讲了
   var i=1;
   for(i=1; i<10; ++i){
    if( d[i] == id )
     break;
   }
   //这个for循环是找出小DIV在大DIV中的位置
   var target_d=0;
   //保存小DIV可以去的编号,0表示不能移动
   target_d=whereCanTo(i);
   //用来找出小DIV可以去的位置,如果返回0,表示不能移动,如果可以移动,则返回可以去的位置编号
   if( target_d != 0){
    d[i]=0;
    //把当前的大DIV编号设置为0,因为当前小DIV已经移走了,所以当前大DIV就没有装小DIV了
    d[target_d]=id;
    //把目标大DIV设置为被点击的小DIV的编号
    document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
    document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
    //最后设置被点击的小DIV的位置,把它移到目标大DIV的位置
   }
   //如果target_d不为0,则表示可以移动,且target_d就是小DIV要去的大DIV的位置编号
   var finish_flag=true;
   //设置游戏是否完成标志,true表示完成
   for(var k=1; k<9; ++k){
    if( d[k] != k){
     finish_flag=false;
     break;
     //如果大DIV保存的编号和它本身的编号不同,则表示还不是全部按照顺序排的,那么设置为false,跳出循环,后面不用再判断了,因为只要一个不符,就没完成游戏
    }
   }
   //从1开始,把每个大DIV保存的编号遍历一下,判断是否完成
   if(finish_flag==true){
    if(!pause)
     start();
    alert("congratulation");
   }
   //如果为true,则表示游戏完成,如果当前没有暂停,则调用暂停韩式,并且弹出提示框,完成游戏。
   //start()这个函数是开始,暂停一起的函数,如果暂停,调用后会开始,如果开始,则调用后会暂停
  }
  function whereCanTo(cur_div){
   //判断是否可移动函数,参数是大DIV的编号,不是小DIV的编号,因为小DIV编号跟可以去哪没关系,小DIV是会动的
   var j=0;
   var move_flag=false;
   for(j=0; j<d_direct[cur_div].length; ++j){
    //把所有可能去的位置循环遍历一下
    if( d[ d_direct[cur_div][j] ] == 0 ){
     move_flag=true;
     break;
    }
    //如果目标的值为0,说明目标位置没有装小DIV,则可以移动,跳出循环
   }
   if(move_flag == true){
    return d_direct[cur_div][j];
   }else{
    return 0;
   }
   //可以移动,则返回目标位置的编号,否则返回0,表示不可移动
  }
  //定时函数,每一秒执行一次
  function timer(){
   time+=1;//一秒钟加一,单位是秒
   var min=parseInt(time/60);//把秒转换为分钟,一分钟60秒,取商就是分钟
   var sec=time%60;//取余就是秒
   document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//然后把时间更新显示出来
  }
  //开始暂停函数
  function start(){
   if(pause){
    document.getElementById("start").innerHTML="暂停";//把按钮文字设置为暂停
    pause=false;//暂停表示设置为false
    set_timer=setInterval(timer,1000);//启动定时
    //如果当前是暂停,则开始
   }else{
    document.getElementById("start").innerHTML="开始";
    pause=true;
    clearInterval(set_timer);
   }
  }
  //重置函数
  function reset(){
   time=0;//把时间设置为0
   random_d();//把方块随机打乱函数
   if(pause)//如果暂停,则开始计时
    start();
  }
  //随机打乱方块函数,我们的思路是从第九块开始,随机生成一个数,然后他们两块对调一下
  function random_d(){
   for(var i=9; i>1; --i){
    var to=parseInt(Math.random()*(i-1)+1);//产生随机数,范围为1到i,不能超出范围,因为没这个id的DIV
    if(d[i]!=0){
     document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px";
     document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px";
    }
    //把当前的DIV位置设置为随机产生的DIV的位置
    if(d[to]!=0){
     document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
     document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
    }
    //把随机产生的DIV的位置设置为当前的DIV的位置
    var tem=d[to];
    d[to]=d[i];
    d[i]=tem;
    //然后把它们两个的DIV保存的编号对调一下
   }
  }
  //初始化函数,页面加载的时候调用重置函数,重新开始
  window.onload=function(){
   reset();
  }
 </script>
</body>
</html>

下边大家就来做叁个九宫格拼图。它的玩的方法是移动空格块旁边的正方,使得它们遵照方块上边标的数字顺序排好。最后的职能:

1.3 实验意况

  1. Terminal: Linux 命令行终端,张开后会进入 Bash 情状,能够应用 Linux
    命令
  2. Firefox:浏览器,能够用在必要前端界面包车型客车学Corey,只须求张开蒙受里写的
    HTML/JS 页面即可
  3. GVim:相当好用的编辑器,最简易的用法能够参见课程 Vim编辑器
    (也许选择 Sublime Text 编辑器)

实验楼的 Sublime Text 编辑器位于:应用程序菜单->开荒 下。

设计思路:

皇家赌场手机版 4

1.4 适合人群

本课程难度一般,适合刚学完前端基础(HTML+CSS+JavaScript)的同窗作为练手项目。

我们要做的正是设置八个大 DIV 用来包裹里面包车型大巴小 DIV,然后在中间安装 8 个小
DIV,从 1
开首给他俩编号。右侧设置八个按键,点击开头的时候初阶计时,达成拼图后终止计时,并弹出二个框,提醒完毕了。重来按键是当用户认为近年来有难度的时候,点击重来能够另行开头二个新的拼图,把具备方块打乱顺序,然后开端计时。大家的重视就是当鼠标点击个中三个四方时,要认清当前方块是还是不是可活动,若是可活动,则运动到相应的职位,如不得移动,则不做其他事。当移动完一块后,要看清是不是实现拼图。大家把特别大
DIV 想象成三个盒子,它有九个职分,从 1
早先,到9编号,他们的职位和号码都以不会变的。把里面的 8 个小 DIV 想象成
8 个小盒子,给他俩设置 top 和 left 就足以决定他们的职务。每一种小 DIV 从 1
起头到 8 编号。他们的职位是能够轻松变动的。所以当小 DIV 的号子和大 DIV
的数码全体重叠时,就产生了拼图。

本实验涉及以下知识点:

1.5 代码获取

本学科中的全体源码能够经过以下办法下载:

$ wget http://labfile.oss.aliyuncs.com/courses/161/puzzle.zip

旧事下边包车型地铁功效图来旁观思虑,大家要做的便是设置一个大 DIV
用来包裹里面包车型大巴小 DIV,然后在内部安装 8 个小 DIV,从 1
初阶给他们编号。左侧设置多少个按键,点击开端的时候初始计时,完成拼图后停下计时,并弹出二个框,提示完毕了。重来开关是当用户感到近来有难度的时候,点击重来能够另行起首一个新的拼图,把持有方块打乱顺序,然后开端计时。

皇家赌场手机版 5

小编们的主要正是当鼠标点击当中二个四方时,要一口咬住不放当前方块是不是可活动,借使可活动,则运动到对应的地方,如不得移动,则不做其余事。当移动完一块后,要判定是不是完结拼图。

作者们把一点都一点都不小 DIV 想象成八个盒子,它有多少个职分,从 1
发轫,到9编号,他们的职位和数码都是不会变的。把内部的 8 个小 DIV 想象成
8 个小盒子,给他们设置 top 和 left 就能够调节他们的职分。每种小 DIV 从 1
开头到 8 编号。他们的职位是能够随便更改的。所以当小 DIV 的号子和大 DIV
的数码全部重合时,就完事了拼图。

从而最首要就只有三个了。那正是如何剖断是或不是可活动。那几个也简要。大家设置八个一维数组变量,用来保存大
DIV 它里面装的小 DIV 的号码。倘诺大 DIV
未有小方块,也就表面它是空白块,那么就设为 0。如若当前大 DIV 有小
DIV,这就安装为小 DIV 的数码。然后再安装叁个二维数组变量,用来保存大 DIV
的可活动号码。也正是保存那一个大 DIV 它有着的可去的地方。比方大 DIV 编号为
2 的,它不得不向 1号,3号,5号那五个趋势移动。又比方 5,它能向 2、4、6、8
那多个样子移动。我们循环遍历那些变量,假使对应的动向它从不方块,也便是值为
0,那么它就能够往那么些趋势移动了。

先创制上面包车型大巴目录结构:

puzzle |__puzzle.html |__puzzle.css |__puzzle.js

因此最主要就唯有三个了。那便是什么样决断是还是不是可活动。那一个也轻巧。大家设置叁个一维数组变量,用来保存大
DIV 它里面装的小 DIV 的号码。假使大 DIV
未有小方块,也就表面它是空白块,那么就设为 0。假诺当前大 DIV 有小
DIV,那就安装为小 DIV 的编号。然后再设置叁个二维数组变量,用来保存大 DIV
的可活动号码。也便是保存那几个大 DIV 它具备的可去的地方。例如大 DIV 编号为
2 的,它只可以向 1号,3号,5号这七个样子移动。又举个例子说 5,它能向 2、4、6、8
那三个趋势移动。大家循环遍历那个变量,假设对应的倾向它
未有方块,也正是值为 0,那么它就足未来这些样子移动了。

  • HTML5
  • CSS3
  • JavaScript

4.1 编写布局-HTML

puzzle.html中本身一贯不下边包车型客车代码:

<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Puzzle</title> <link rel="stylesheet" type="text/css" href="puzzle.css"> <script type="text/javascript" src="puzzle.js"></script></head><body> <div > <!--最外面的DIV,用来包含里面的结构--> <div > <!--游戏区,也就是大DIV方块--> <div onclick="move">1</div> <!--小DIV,也就是8个小方块。当点击的时候执行move()函数,参数是显示的编号,这样我们就知道点击了那个方块--> <div onclick="move">2</div> <div onclick="move">3</div> <div onclick="move">4</div> <div onclick="move">5</div> <div onclick="move">6</div> <div onclick="move">7</div> <div onclick="move">8</div> </div> <div > <!--游戏控制区--> <p> <rowspan >总用时</rowspan> <rowspan ></rowspan> </p> <!--显示游戏时间区域--> <p> <rowspan onclick="start()">开始</rowspan> <rowspan onclick="reset()">重来</rowspan> </p> <!--显示控制按钮区域--> </div> </div></body></html>

布局文件就写完了。这里为了简化逻辑,更易编写代码,大家把装有操作都打包了。只要举办move,正是点击了编号为2的小方块,前边的一各种操作都形成了。

升迁:因为实验中利用的大肆打乱方块的算法特别简单,可是存在
bug,有 六分之三 的可能率生成的逐个是无力回天恢复生机的,这年就只可以点击重新伊始。

依据上边包车型大巴职能图来旁观考虑,大家要做的正是安装四个大 DIV
用来包裹里面包车型大巴小 DIV,然后在里边安装 8 个小 DIV,从 1
初步给他们编号。左侧设置三个开关,点击早先的时候开首计时,完结拼图后终止计时,并弹出多少个框,提示达成了。重来按键是当用户以为近些日子有难度的时候,点击重来能够再一次起首一个新的拼图,把富有方块打乱顺序,然后起初计时。

4.2 编写样式 – CSS

布局写完了,将来大家为玩乐编写样式,使得它更加美好。在这一步,我们就能够和睦自由发挥了,你能够写出本人的风骨,让游玩更优质。也能够增进越多的因一向装点你的游玩。不过注意了,游戏
DIV 的高低假若退换了,一定要记得修改 js 代码,稍后我们会详细讲授。

puzzle.css

*{ padding: 0; margin: 0; border: 0;}/* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */body{ width: 100%; height: 100%;}/* 给body设置100%的高度和宽度,这样就会根据浏览器屏幕大小自动适配 */#container{ position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px;}/* 这是包裹所有元素的DIV,给他设置620px的宽和450px的高,这个大小可以设置为更大,但是不能小,至少要能包含里面所有的元素 */#game{ position: absolute; width: 450px; height: 450px; border-radius: 5px; display: inline-block; background-color: #ffe171; box-shadow: 0 0 10px #ffe171;}/* 这是游戏区的DIV,这个大小是计算出来的,取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px,所以这个大小是150px*3,为450px */#game div{ position: absolute; width: 149px; height: 149px; box-shadow: 1px 1px 2px #777; background-color: #20a6fa; color: white; text-align: center; font-size: 150px; line-height: 150px; cursor: pointer; -webkit-transition: 0.3s;/*浏览器前缀,兼容其他浏览器 chrome*/ -moz-transition: 0.3s;/*firefox*/ -ms-transition: 0.3s;/*ie*/ -o-transition: 0.3s;/*opera*/ transition: 0.3s;}/* 这就是小方块的大小了,定位为绝对定位,这样改变位置不会影响其他元素的位置。宽高都是149px。注意了,我们还设置了box-shadow:1px 1px 2px #777 ;它还有边框阴影,所以149px 加上边框1px,它的总宽度是150px 下面的transition:0.3s是设置过渡时间,这是css3的属性,它会让属性改变呈现过渡动画,所以当我们改变方块的位置时,它会有一个动画,我们不必自己编写动画函数,这回让你疯狂*/#game div:hover{ color: #ffe171;}/*给方块设置鼠标悬停动画,当鼠标悬停在元素上面时,会用这里的属性替换上面的属性,移开后又会变为原来的,这里我们是把字体颜色改变*/#control{ width: 150px; height: 450px; display: inline-block; float: right;}/*控制区,display:inline-block会让元素呈现块状元素的特性,使得可以改变大小,同时也会具有行内元素的特性,使得不会占据一行空间,float:right让元素浮动到右边*/#control rowspan{ height: 25px; font-size: 20px; color: #222; margin-top: 10px;}/*设置控制区按钮的共同样式*/#start{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer;}/*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状,pointer是手型*/#reset{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/ border-radius: 5px;/*圆角属性*/ box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/ text-align: center;/*文字居中*/ cursor: pointer;}/*给Reset按钮设置属性*/#d1{ left: 0px;}#d2{ left: 150px;}#d3{ left: 300px;}#d4{ top: 150px;}#d5{ top: 150px; left: 150px;}#d6{ top: 150px; left: 300px;}#d7{ top: 300px;}#d8{ left: 150px; top: 300px;}/*这是预先给每个小方块按照顺序排好位置*/

好了,样式也编写制定好了。最后再编辑叁个 js
调整代码,大家的拼图就能够用了。编写样式的时候大家要么先依照自个儿这里的来,等成就了全副游戏,领悟游戏逻辑的时候你们再本身发挥想象力去更改样式,不然大概会冒出未知的荒唐。

做到那步,张开 puzzle.html 应该能收看上面包车型客车法力了:

皇家赌场手机版 6

上述正是本文的全体内容,希望本文的内容对我们的就学大概专门的学业能带来一定的扶植,同一时间也冀望多多援助脚本之家!

皇家赌场手机版 7

4.3 调整代码 – JavaScript

有关调整拼图移动的JavaScript代码,由于较多,这里就不叙述了,点击就可以查看完整代码~

  • 想要学习越多前端项目支出,点击这里就可以学习~
  • 你也足以点击【web前端学习路线】,跟着路线零基础入门学习web开荒~

您大概感兴趣的小说:

  • 原生JS达成九宫格抽取奖金效果
  • javascript九宫格图片随机打乱地点的兑现格局
  • js达成九宫格的轻易颜色跳转
  • JS模仿手提式有线电话机端九宫格登陆功用完结代码
  • 基于javascript达成九宫格大转盘效果
  • javascript兑现九宫格相加数值相等
  • javascript解三阶幻方(九宫格)
  • js达成九宫格图形半透明渐显特效的秘诀
  • javascript+canvas制作九宫格小程序
  • ionic
    grid(栅格)九宫格制作详解

小编们的重大正是当鼠标点击在那之中四个四方时,要咬定当前方块是还是不是可活动,假设可活动,则运动到对应的地点,如不得移动,则不做其余事。当移动完一块后,要认清是或不是到位拼图。

皇家赌场手机版 ,大家把非常大 DIV 想象成多个盒子,它有七个岗位,从 1
开端,到9编号,他们的职责和号码都以不会变的。把里面的 8 个小 DIV 想象成
8 个小盒子,给他俩设置 top 和 left 就能够决定他们的岗位。每一种小 DIV 从 1
起初到 8 编号。他们的职分是能够轻巧改造的。所以当小 DIV 的号子和大 DIV
的号子全体重叠时,就完了了拼图。

就此重要就唯有一个了。这就是怎么着判断是或不是可活动。那个也简要。大家设置多个一维数组变量,用来保存大
DIV 它里面装的小 DIV 的编号。假若大 DIV
没有小方块,也就表面它是空白块,那么就设为 0。假设当前大 DIV 有小
DIV,那就设置为小 DIV 的数码。然后再安装贰个二维数组变量,用来保存大 DIV
的可活动号码。相当于保存这么些大 DIV 它有着的可去的职位。比如大 DIV 编号为
2 的,它不得不向 1号,3号,5号那多少个趋势移动。又举例 5,它能向 2、4、6、8
那多少个样子移动。大家循环遍历这么些变量,假若对应的趋势它从不方块,也正是值为
0,那么它即可往那个方向移动了。

先创造上边包车型地铁目录结构:

puzzle |__puzzle.html |__puzzle.css |__puzzle.js

puzzle.html中作者从不上边包车型客车代码:

<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Puzzle</title> <link rel="stylesheet" type="text/css" href="puzzle.css"> <script type="text/javascript" src="puzzle.js"></script></head><body> <div > <!--最外面的DIV,用来包含里面的结构--> <div > <!--游戏区,也就是大DIV方块--> <div onclick="move">1</div> <!--小DIV,也就是8个小方块。当点击的时候执行move()函数,参数是显示的编号,这样我们就知道点击了那个方块--> <div onclick="move">2</div> <div onclick="move">3</div> <div onclick="move">4</div> <div onclick="move">5</div> <div onclick="move">6</div> <div onclick="move">7</div> <div onclick="move">8</div> </div> <div > <!--游戏控制区--> <p> <rowspan >总用时</rowspan> <rowspan ></rowspan> </p> <!--显示游戏时间区域--> <p> <rowspan onclick="start()">开始</rowspan> <rowspan onclick="reset()">重来</rowspan> </p> <!--显示控制按钮区域--> </div> </div></body></html>

布局文件就写完了。这里为了简化逻辑,更易编写代码,大家把全体操作都打包了。只要进行move,便是点击了数码为2的小方块,前边的一雨后春笋操作都造成了。

布局写完了,今后我们为游戏编写样式,使得它更优质。在这一步,大家就能够团结自由发挥了,你能够写出本人的作风,让游玩更能够。也能够增进越来越多的因从来装饰你的娱乐。不过注意了,游戏
DIV 的大小假若更换了,一定要记得修改 js 代码,稍后大家会详细批注。

puzzle.css

*{ padding: 0; margin: 0; border: 0;}/* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */body{ width: 100%; height: 100%;}/* 给body设置100%的高度和宽度,这样就会根据浏览器屏幕大小自动适配 */#container{ position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px;}/* 这是包裹所有元素的DIV,给他设置620px的宽和450px的高,这个大小可以设置为更大,但是不能小,至少要能包含里面所有的元素 */#game{ position: absolute; width: 450px; height: 450px; border-radius: 5px; display: inline-block; background-color: #ffe171; box-shadow: 0 0 10px #ffe171;}/* 这是游戏区的DIV,这个大小是计算出来的,取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px,所以这个大小是150px*3,为450px */#game div{ position: absolute; width: 149px; height: 149px; box-shadow: 1px 1px 2px #777; background-color: #20a6fa; color: white; text-align: center; font-size: 150px; line-height: 150px; cursor: pointer; -webkit-transition: 0.3s;/*浏览器前缀,兼容其他浏览器 chrome*/ -moz-transition: 0.3s;/*firefox*/ -ms-transition: 0.3s;/*ie*/ -o-transition: 0.3s;/*opera*/ transition: 0.3s;}/* 这就是小方块的大小了,定位为绝对定位,这样改变位置不会影响其他元素的位置。宽高都是149px。注意了,我们还设置了box-shadow:1px 1px 2px #777 ;它还有边框阴影,所以149px 加上边框1px,它的总宽度是150px 下面的transition:0.3s是设置过渡时间,这是css3的属性,它会让属性改变呈现过渡动画,所以当我们改变方块的位置时,它会有一个动画,我们不必自己编写动画函数,这回让你疯狂*/#game div:hover{ color: #ffe171;}/*给方块设置鼠标悬停动画,当鼠标悬停在元素上面时,会用这里的属性替换上面的属性,移开后又会变为原来的,这里我们是把字体颜色改变*/#control{ width: 150px; height: 450px; display: inline-block; float: right;}/*控制区,display:inline-block会让元素呈现块状元素的特性,使得可以改变大小,同时也会具有行内元素的特性,使得不会占据一行空间,float:right让元素浮动到右边*/#control rowspan{ height: 25px; font-size: 20px; color: #222; margin-top: 10px;}/*设置控制区按钮的共同样式*/#start{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer;}/*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状,pointer是手型*/#reset{ display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/ border-radius: 5px;/*圆角属性*/ box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/ text-align: center;/*文字居中*/ cursor: pointer;}/*给Reset按钮设置属性*/#d1{ left: 0px;}#d2{ left: 150px;}#d3{ left: 300px;}#d4{ top: 150px;}#d5{ top: 150px; left: 150px;}#d6{ top: 150px; left: 300px;}#d7{ top: 300px;}#d8{ left: 150px; top: 300px;}/*这是预先给每个小方块按照顺序排好位置*/

好了,样式也编写制定好了。最终再编辑四个 js
调节代码,大家的拼图就能够用了。编写样式的时候大家要么先依据本身这边的来,等实现了百分之百游戏,驾驭游戏逻辑的时候你们再自个儿发挥想象力去改造样式,不然恐怕会出现未知的失实。

成就那步,张开 puzzle.html 应该能收看上面包车型地铁效力了:

皇家赌场手机版 8

有关调控代码是哪些编写的吧,点击就可以查看了~

  • 假设您想要学习越来越多前端开采,上实验楼,前端教程+在线开荒情状等您来学;
  • 您也足以点击学习路线,跟着路线零基础入门前端开采;

Leave a Comment.