基于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自调用匿名函数具体实现
Feb 11 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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往XML中添加节点的方法
2015/03/12 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python字典排序的方法
2019/10/12 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
中考冲刺决心书
2014/03/11 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
大学课外活动总结
2014/07/09 职场文书
药店促销活动策划方案
2014/08/24 职场文书
党员个人剖析材料
2014/09/30 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
成事在人观后感
2015/06/16 职场文书
交通事故责任认定书
2015/08/06 职场文书