网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于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 src="img1/pj.png">
      <img src="img1/p2.png">
       <img src="img1/p3.png">
        <img  src="img1/p4.png">
          <img src="img1/p5.png">
           <img src="img1/p6.png">
             <img src="img1/p7.png">
              <img src="img1/p8.png">
                <img src="img1/p9.png">
     </div>
     <div id="output">
     目标图形：
     <img 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程序设计有所帮助，让大家动手亲自实现自己最喜爱的游戏——拼图。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 15:40:56