javascript实现拼图游戏


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了javascript实现拼图游戏的具体代码,供大家参考,具体内容如下

<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>

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:

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();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 #Javascript
Javascript实现打鼓效果
Jan 29 #Javascript
JS实现点击掉落特效
Jan 29 #Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
理解Javascript闭包
2013/11/01 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
200行python代码实现2048游戏
2019/07/17 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python实现元素等待代码实例
2019/11/11 Python
python实现低通滤波器代码
2020/02/26 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
同居协议书范本
2014/04/23 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2014年超市工作总结
2014/11/19 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
英语辞职信怎么写
2015/02/28 职场文书