本文章將分享一個來自前端菜鳥突發奇想的拼圖游戲制作方法以及實現過程。
話不多說，先上圖。
首先我們需要寫好網頁的基本布局（此處涉及簡單的HTML和CSS知識）。
網頁一共分為三個區域，左側時間顯示區，中間主要游戲區和右側按鈕菜單區。
通過三個DIV設置其style為float:left使三個div同行顯示。
<div class="main"> <div class="left"> <!-- 左側區域 --> </div> <div class="center"> <!-- 中間區域 --> </div> <div class="right"> <!-- 右側區域 --> </div> </div>
然后我們分別在三個div中添加不同的內容。
由於本篇文章主要講js的設計思路，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內容 --> <div class="left"> <h3>目標圖</h3> <div class="pic" id="mainpic"></div> <br><br> <h3>所用時間</h3> <p id="timer">0分0秒</p> </div> <!-- 中間div內容 --> <div class="center"> <table class="picbox" cellspacing="0" cellpadding="1"> <tbody id="picbox"> </tbody> </table> </div> <!-- 右側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> <!-- 勝利時需要彈出的界面 start --> <div class="wingame"> <h2>恭喜你完成拼圖！</h2> <div class="pic pic2"></div> <p>完成耗時：<b id="timer2">0分0秒</b></p> </div> <!-- 勝利時需要彈出的界面 end --> </body> </html>
好吧，還是給大家講解一下html頁面構成，
左側通過id="mainpic"顯示當前所要完成的拼圖。id="timer"是一個計時器通過setTimeout()遞歸來實現計時。
中間區域時一個表格，通過給表格賦予不同的背景圖來使表格組成一張大的圖片，再通過背景圖的替換實現挪移效果。
具體代碼稍后我們會詳細講到。
至於為什么沒有tr和td。我們通過js動態生成，用參數的形式，這樣就可以很輕松的實現四階五階等更復雜的拼圖。
右側為幾個按鈕，具體用來實現不同頁面的跳轉和游戲的開始。
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);
}
小弟奉上css部分代碼。
PS：博主菜鳥一個大神勿噴，不過接受教育批評。
歡迎大家留言討論更好的方法。
勿噴，勿噴，勿噴。
鏈接: https://pan.baidu.com/s/1nVfFD6zviIQmY3xRYeiD7Q 提取碼: ci4g