基于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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python 负数取模运算实例
2020/06/03 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
倡议书格式
2014/04/14 职场文书
党性分析材料格式
2014/12/19 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
妇产科护理心得体会
2016/01/22 职场文书
python pygame入门教程
2021/06/01 Python
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android