首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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制作经典传统的拼图游戏

- Author -

码马

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
微信小程序 POST请求（网络请求）详解及实例代码
Nov 16 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
并发(8) SingleFlight(2) pip(1) set(1) frozenset(1) 字典(3) Counter(1) Xpath(1) most_common(1) Next.js(1)
You might like
php字符串截取中文截取2，单字节截取模式
2007/12/10 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php搜索文件程序分享
2015/10/30 PHP
yii添删改查实例
2015/11/16 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
2016/02/16 Javascript
利用JS实现数字增长
2016/07/28 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
js实现抽奖效果
2017/03/27 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
Python模拟登陆实现代码
2017/06/14 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python中类的属性和方法介绍
2018/11/27 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
基层工作经历证明
2014/01/13 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年财务科工作总结
2014/11/11 职场文书