基于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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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
ThinkPHP中关联查询实例
2014/12/02 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python新手实现2048小游戏
2015/03/31 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python打包成so文件过程解析
2019/09/28 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
八年级数学教学反思
2014/01/31 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
党支部对转正的意见
2015/06/02 职场文书
作文之亲情600字
2019/09/23 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android