HTML+Javascript製作拼圖小遊戲詳解（終）
阿新 • • 發佈：2018-11-20
上次我們已經講解了製作的原理，並且展示了主要程式碼。
這次我將完整的程式碼給大家，僅供參考。
HTML部分如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拼圖遊戲——初級</title> <link rel="stylesheet" href="css/button.css"> <script src="js/jquery.js"></script> <script src="js/level1.js"></script> </head> <body> <div class="main"> <div class="left"> <h3>目標圖</h3> <div class="pic" id="mainpic"></div> <br><br> <h3>所用時間</h3> <p id="timer">0分0秒</p> </div> <div class="center"> <table class="picbox" cellspacing="0" cellpadding="1"> <tbody id="picbox"> </tbody> </table> </div> <div class="right"> <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">開始</a> <a href="level1.html"class="btn btn-sm animated-button victoria-two">初級</a> <a href="level2.html" class="btn btn-sm animated-button victoria-three">中級</a> <a href="level3.html" class="btn btn-sm animated-button victoria-four">高階</a> </div> </div> <div class="wingame"> <h2>恭喜你完成拼圖！</h2> <div class="pic pic2"></div> <p>完成耗時：<b id="timer2">0分0秒</b></p> </div> </body> </html>
CSS程式碼如下
body { background-color: #E8E8E8; } .main { margin:0 auto; width: 1250px; height: 720px; } .left { width: 300px; height: 700px; float: left;; } .center { width: 700px; height: 700px; float: left; } .right { width: 250px; height: 700px; color: red; float: right; } .picbox { margin: 0 auto; border: 1px solid black; width: 650px; height: 650px; } .picbpx td { padding: 0; } .border_bg { background-image:url(../img/border_bg.jpg); width: 100px; height: 100px; background-repeat: repeat; } .left h3 { text-align: center;; } #timer { color: #D24D57; text-align: center; font-size:23px; font-weight: bold; } .pic { margin: 20px auto; background-size: cover; width: 270px; height: 250px; border: 2px solid #FFF; } .wingame { display: none; width: 600px; height: 300px; background-color: rgba(80,100,120,0.5); position: fixed; top:25vh; left: 32vw; } .pic2 { width: 150px; height: 150px; } .pic2:hover { cursor:pointer; } .wingame h2 { text-align: center; } .wingame p { font-size: 20px; text-align: center; } .wingame p b { color: rgb(200,60,60); } /*按鈕美化*/ a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size:14px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; border-radius: 0; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button:link:after, a.animated-button:visited:after { content: ""; position: absolute; height: 0%; left: 50%; top: 50%; width: 150%; z-index: -1; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } a.animated-button:link:hover, a.animated-button:visited:hover { color: #FFF; text-shadow: none; } a.animated-button:link:hover:after, a.animated-button:visited:hover:after { height: 450%; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #000; font-size:25px; border-radius: 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } /* Victoria Buttons */ a { width: 200px; height: 50px; } a.animated-button.victoria-one { border: 2px solid #D24D57; } a.animated-button.victoria-one:after { background: #D24D57; -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg); transform: translateX(-50%) translateY(-50%) rotate(-25deg); } a.animated-button.victoria-two { border: 2px solid #D24D57; } a.animated-button.victoria-two:after { background: #D24D57; -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg); transform: translateX(-50%) translateY(-50%) rotate(25deg); } a.animated-button.victoria-three { border: 2px solid #D24D57; } a.animated-button.victoria-three:after { background: #D24D57; opacity: .5; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.animated-button.victoria-three:hover:after { height: 140%; opacity: 1; } a.animated-button.victoria-four { border: 2px solid #D24D57; } a.animated-button.victoria-four:after { background: #D24D57; opacity: .5; -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg); -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg); transform: translateY(-50%) translateX(-50%) rotate(90deg); } a.animated-button.victoria-four:hover:after { opacity: 1; height: 600% !important; } a.animated-button.victoria-five { border: 2px solid red; } a.animated-button.victoria-five:after { background: #D24D57; -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg); transform: translateX(-50%) translateY(-50%) rotate(-25deg); }
最後式Js程式碼：
var picnum=5; var picData=[]; var a_num=[]; var level="level1"; var isstart=false; $(document).ready(function(){ showpicmain();//顯示需要拼的目標圖 for(var i=0;i<picnum;i++)//建立拼圖表格的行 { $('#picbox').append("<tr></tr>"); } for(var i=0;i<picnum;i++)//建立拼圖表格的列 { $('#picbox').children().append("<td></td>"); } $('#startgame').attr("onclick","startgame()");//開始按鈕監聽事件 var tds=$('#picbox').children().children();//獲得td的陣列 //console.log(tds.length); for(var i=0;i<tds.length;i++)//為每個td加id和點選事件 { id=i+1; tds[i].setAttribute("id",id); tds[i].setAttribute("onclick","movepic("+id+")") } init(); saveData(); setBorder(); setendpic(); }); function setendpic()//加入最後一張圖片 { temp=picnum*(picnum-1)-1; $('#'+temp).css("background-image","url(img/"+level+"/_0"+(picnum-2)*(picnum-2)+".jpg)") } function iskong(id)//判斷改標籤是否為空 { var bg=$('#'+id).css("background-image"); if(bg=="none"){ return true; }else { return false; } } function movepic(id)//移動圖片 { if(iskong(id-picnum)) { //alert("moveup"); move(id,id-picnum); } else if(iskong(id+picnum)) { //alert("movedown"); move(id,id+picnum); } else if(iskong(id-1)) { //alert("moveleft"); move(id,id-1); } else if(iskong(id+1)) { //alert("moveright"); move(id,id+1); } if(isstart) { isWin(); } } function setBorder()//設定邊界 { for(var i=0;i<=picnum;i++) { $("#"+i).attr({"onclick":null,"class":"border_bg"}); $("#"+i).css("height","1px"); } for(var i=1;i<=picnum*picnum;i+=picnum) { $("#"+i).attr({"onclick":null,"class":"border_bg"}); $("#"+i).css("width","1px"); } for(var i=picnum*(picnum-1)+1;i<=picnum*picnum;i++) { $("#"+i).attr({"onclick":null,"class":"border_bg"}); $("#"+i).css("height","1px"); } for(var i=picnum;i<=picnum*picnum;i+=picnum) { $("#"+i).attr({"onclick":null,"class":"border_bg"}); $("#"+i).css("width","1px"); } } function move(id,target)//移動 { //var temp=$('#'+id).css("background-image"); //temp=$('#'+id).css("background-image",""); $('#'+target).css("background-size","cover"); $('#'+target).css("background-image",$('#'+id).css("background-image")); $('#'+id).css("background-image","none"); } var pic=1; function init()//初始化圖片 { for(var i=1;i<picnum-1;i++) { for(var id=1;id<picnum*picnum;id++) { if(id>picnum*i+1&&id<picnum*(i+1)) { $('#'+id).css("background-size","cover"); $('#'+id).css("background-image","url(img/"+level+"/_0"+pic+".jpg)"); if(id==((picnum-1)*picnum)-1) { $('#'+id).css("background-image","none"); } pic++; //console.log(pic); } } } } function saveData()//儲存初始資料 { for(var i=1;i<picnum-1;i++) { for(var id=1;id<picnum*picnum;id++) { if(id>picnum*i+1&&id<picnum*(i+1)) { var temp=$('#'+id).css("background-image"); picData.push(temp); } } } } function startgame()//開始遊戲，打亂圖片順序 { clearTimeout(timer); times=0;timem=0; isstart=true; var k=0;times=0;timem=0; var temp=[]; for(var i=1;i<(picnum-2)*(picnum-2);i++) { temp[i-1]=i; } a_num=getnum(temp); for(var i=1;i<picnum-1;i++) { for(var id=1;id<picnum*picnum;id++) { if(id>picnum*i+1&&id<picnum*(i+1)) { var temp=$('#'+id).css("background-image","url(img/"+level+"/_0"+a_num[k]+".jpg)"); k++; } } } var temp=picnum*(picnum-1)-1; $('#'+temp).css("background-image","none"); gotime(); } function getnum(array) //打亂順序函式 { var tmp, current, top =array.length; if(top) while(--top){ current =Math.floor(Math.random() * (top + 1)); tmp =array[current]; array[current] =array[top]; array[top] = tmp; } return array; } function isWin()//判斷是否勝利 { k=0; for(var i=1;i<picnum-1;i++) { for(var id=1;id<picnum*picnum;id++) { if(id>picnum*i+1&&id<picnum*(i+1)) { var temp=$('#'+id).css("background-image"); if(temp==picData[k]) { k++; } } } } if(k==(picnum-2)*(picnum-2)) { clearTimeout(timer); windo(); } } var timem=0; var times=0; var timer=null; function gotime()//開始計時 { timer=setTimeout(function(){ times++; if(times>59) { timem++; times=0; } $('#timer').text(timem+"分"+times+"秒"); gotime(); },1000); } function showpicmain()//顯示樣本圖 { $('.pic').css("background-image","url(img/"+level+"/main.jpg)"); } function windo() { $('.wingame').css("display","block"); $('.pic2').click(function(){ $('.wingame').css("display","none"); startgame(); }); $('#timer2').text($('#timer').text()); }
OK，就這樣吧，不懂得小夥伴看前面兩篇文章。
歡迎學習交流。
by 本該如此