基于javascript制作经典传统的拼图游戏


Posted in Javascript onMarch 22, 2016

本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下

效果图:

拼出你喜欢的白雪公主和七个小矮人

基于javascript制作经典传统的拼图游戏

实现代码:

<!DOCTYPE html>
<html>
 <head>
  <title>pingtu.html</title>
   
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=gb2312">
   
  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   
  <style type="text/css">
*{ margin-bottom:0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 0px;
}
  
#box{    
       
      position:absolute;
      top:0px;
      left:0px;
      width: 300px;
      height: 300px;
      border: 1px solid red;
}
 
#box img{
  float:left;
  width: 100px;
  height: 100px;
}
 
 
#box .pj,#box .p2,#box .p3,#box .p4,#box .p5,#box .p6,#box .p7,#box .p8,#box .p9{
  position: absolute;
}
 
#box .pj,#box .p2,#box .p3{
  top:0px;
}
 
#box .p4,#box .p5,#box .p6{
  top:100px;
}
 
#box .p7,#box .p8,#box .p9{
  top:200px;
}
 
#box .pj,#box .p4,#box .p7{
left:0px;
}
 
#box .p2,#box .p5,#box .p8{
left:100px;
}
 
#box .p3,#box .p6,#box .p9{
left:200px;
}
 
#button{
 font-size:25px;
 font-weight:20px;
 float: left;
 position: absolute;
 top:400px;
 left:100px;
}
 
#output{
  position:absolute;
  width: 270px;
  height: 170px;
  top:130px; 
  left: 350px;
}
 
#output img{
 height: 170px;
 width:170px;
 float: right;
}
 
#notice{
 position: absolute;
 left: 650px;
 top:150px;
 width: 150px;
 height: 120px;
 border: 1px solid blue;
 font-size: 15px;
}
 
 </style>
 </head>
  
 <body>
 <div id="box">
  
 <img class="pj" src="img1/pj.png">
  <img class="p2" src="img1/p2.png">
   <img class="p3" src="img1/p3.png">
    <img class="p4"  src="img1/p4.png">
      <img class="p5" src="img1/p5.png">
       <img class="p6" src="img1/p6.png">
         <img class="p7" src="img1/p7.png">
          <img class="p8" src="img1/p8.png">
            <img class="p9" src="img1/p9.png">
 </div>
  
 <div id="output">
 目标图形:
 <img alt="" src="img1/output.jpg">
 </div>
 
 <div id="notice">
 游戏提示:<br>
 <br>
 点击“开始新游戏”开始游戏。鼠标点击黑色方块周围的方块时,即可移动方块。。
</div>
  
  
 <input type="button" id="button" value="开始新游戏">
  
  
  
 <script type="text/javascript">
 var times=0;
 var src= Array();
           src.push("img1/pj.png");
           src.push("img1/p2.png");
            src.push("img1/p3.png");
            src.push("img1/p4.png");
             src.push("img1/p5.png");
             src.push("img1/p6.png");
              src.push("img1/p7.png");
              src.push("img1/p8.png");
               src.push("img1/p9.png");
               
  
  function addLoadEvent(func) {
  
      //为window添加新事件函数
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        };
      }
    }
     
    function getInfor(){
       var ps=document.getElementById("box");
       var Arrps=ps.getElementsByTagName("img");
       
       for(var i=0;i<Arrps.length;i++){
          Arrps[i].onclick=function(){
          if (this.getAttribute("src")=="img1/pj.png");
          changeP(this,Arrps);
         };
       }
    }
     
     
   function tostar(){
       var butt=document.getElementById("button");
       butt.onclick=function(){
       toST();
       times=0;
       getInfor();
       };
   }
    
    
    function changeP(ob,Arrps){
           var Ni=0;
           var Nj=0;
          for(var i=0;i<Arrps.length;i++){
           if(Arrps[i]==ob)
            Ni=i;
          if(Arrps[i].getAttribute("src")=="img1/pj.png")
            Nj=i;
           }
           
           if(Math.abs(Ni-Nj)==3)
           {
              var temperOb=ob.getAttribute("src"); 
              ob.setAttribute("src","img1/pj.png");
              Arrps[Nj].setAttribute("src",temperOb);
              times++;
              ifright();
              
             }else if((Ni-Nj)==1&&(Ni%3)!=0){
             var temperOb=ob.getAttribute("src"); 
              ob.setAttribute("src","img1/pj.png");
              Arrps[Nj].setAttribute("src",temperOb);
              times++;
              ifright();
              
             }else if((Ni-Nj)==-1&&(Ni%3)!=2){
              var temperOb=ob.getAttribute("src"); 
              ob.setAttribute("src","img1/pj.png");
              Arrps[Nj].setAttribute("src",temperOb);
              times++;
              ifright();
             }
              
              
              
          }
          
          function ifright(){
          
          var ps=document.getElementById("box");
          var Arrps=ps.getElementsByTagName("img");
           for(var i=0;i<src.length;i++){
            if(src[i]!=Arrps[i].getAttribute("src")) return;
           }
            
           if(times<50)
            
           alert("恭喜,你成功了。。"+"\n"+"仅用了"+times+"步哦");
           else  alert("恭喜,你成功了。。"+"\n"+"用了"+times+"步");
          }
          
     function toST(){
     
        var srcUsing= new Array();
         for(var p=0; p<src.length;p++){
         srcUsing[p]=src[p];
         }
          var ps=document.getElementById("box");
          var Arrps=ps.getElementsByTagName("img");
           
           
          var newArry= new Array();
          for(var i=0;i<Arrps.length;i++){
             newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
           }     
           
           
          for(var j=0;j<newArry.length;j++) {
            
           
           //var newarrValue=newArry[j];
            Arrps[j].setAttribute("src",String(newArry[j]));
            
          }
           
    }   
     
    addLoadEvent(tostar);
 </script>
 </body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助,让大家动手亲自实现自己最喜爱的游戏——拼图。

Javascript 相关文章推荐
js创建表单元素并使用submit进行提交
Aug 14 Javascript
简单的jQuery入门指引
Jul 28 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
RequireJS使用注意细节
May 15 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
如何选择适合你的JavaScript框架
Nov 20 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 #Javascript
JS中多种方式创建对象详解
Mar 22 #Javascript
基于jquery实现无限级树形菜单
Mar 22 #Javascript
javascript的几种继承方法介绍
Mar 22 #Javascript
基于javascript实现文字无缝滚动效果
Mar 22 #Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
微信小程序progress组件使用详解
2018/01/31 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
学生实习推荐信范文
2013/11/26 职场文书
国家助学金获奖感言
2014/01/31 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
公司户外活动总结
2014/07/04 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
初中教师个人总结
2015/02/10 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
未中标通知书
2015/04/17 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
KTV员工管理制度
2015/08/06 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript