篇文章給大家帶來的內容是關于使用javascript中canvas實現拼圖小游戲 ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
如果您想要綜合使用javascript中canvas、原生拖拽、本地存儲等多種技術完成一個有趣的項目,那么這篇文章將非常適合您
該項目中的拼圖小游戲使用javascript原創,相比于網站上類似的功能,它使用到的技術點更先進豐富,功能更強大,還包含程序開發中更多先進的思想理念,從該項目中您將能學到:
項目源碼-github
下面是游戲界面的示例圖:
根據游戲界面圖我們可以將完成這么一個小游戲分為以下幾步來實現:
從以上對小游戲制作過程的分析來看,第4步是程序功能實現的重點和難點,在以上的每個步驟中都有很多小細節需要注意和探討,下面我就詳細分析一下每個步驟的實現細節,說的不好的地方,歡迎大家留言指正。
3.1 圖片內容讀取和加載
在游戲開發第1步中,我們將圖片拖拽到指定區域后,程序是怎樣得到圖片內容信息的呢?fileReader對象又是怎樣將圖片信息轉化為base64字符串內容的?Image對象拿到圖片的base64內容之后,又是怎樣初始化加載的?帶著這些疑問,我們來研究一下實現項目中實現了第一步的關鍵代碼。
var droptarget=document.getElementById("droptarget"),
output=document.getElementById("ul1"),
thumbImg=document.getElementById("thumbimg");
//此處省略相關代碼........
function handleEvent(event) {
var info="",
reader=new FileReader(),
files, i, len;
EventUtil.preventDefault(event);
localStorage.clear();
if (event.type=="drop") {
files=event.dataTransfer.files;
len=files.length;
if (!/image/.test(files[0].type)) {
alert('請上傳圖片類型的文件');
}
if (len > 1) {
alert('上傳圖片數量不能大于1');
}
var canvas=document.createElement('canvas');
var context=canvas.getContext('2d');
var img=new Image(), //原圖
thumbimg=new Image(); //等比縮放后的縮略圖
reader.readAsDataURL(files[0]);
reader.onload=function (e) {
img.src=e.target.result;
}
//圖片對象加載完畢后,對圖片進行等比縮放處理。縮放后最大寬度為三百像素
img.onload=function () {
var targetWidth, targetHeight;
targetWidth=this.width > 300 ? 300 : this.width;
targetHeight=targetWidth / this.width * this.height;
canvas.width=targetWidth;
canvas.height=targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
context.drawImage(img, 0, 0, targetWidth, targetHeight);
var tmpSrc=canvas.toDataURL("image/jpeg");
//在本地存儲完整的縮略圖源
localStorage.setItem('FullImage', tmpSrc);
thumbimg.src=tmpSrc;
}
//此處省略相關代碼......
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);
}
這段代碼的思路就是首先獲得拖拽區域目標對象droptarget,為droptarget注冊拖拽監聽事件。代碼中用到的EventUtil是我封裝的一個對元素添加事件、事件對象的兼容處理等常用功能的簡單對象,下面是其添加注冊事件的簡單簡單代碼,其中還有很多其他的封裝,讀者可自行查閱,功能比較簡單。
var EventUtil={
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type]=handler;
}
},
//此處省略代......
}
當用戶將圖片文件拖放到區域目標對象droptarget時,droptarget的事件對象通過event.dataTransfer.files獲取到文件信息,對文件進行過濾(限制只能為圖片內容,并且最多只能有一張圖片)。拿到文件內容以后,使用FileReader對象reader讀取文件內容,使用其readAsDataURL方法讀取到圖片的base64內容,賦值給Image對象img的src屬性,就可以等到img對象初始化加載完畢,使canvas對img進行下一步的處理了。這里有一個重點的地方需要說明:一定要等img加載完成后,再使用canvas進行下一步的處理,不然可能會出現圖片損壞的情況。原因是:當img的src屬性讀取圖片文件的base64內容時,可能還沒有將內容加載到內存中時,canvas就開始處理圖片(此時的圖片是不完整的)。所以我們可以看到canvas對圖片的處理是放在img.onload方法中進行的,程序后邊還會有這種情況,之后就不再贅述了。
3.2 圖片等比縮放和本地存儲
在第一步中我們完成了對拖拽文件的內容讀取,并將其成功加載到了Image對象img中。接下來我們使用canvas對圖片進行等比縮放,對圖片進行等比縮放,我們采取的策略是限制圖片的最大寬度為300像素,我們再來看一下這部分代碼吧:
img.onload=function () {
var targetWidth, targetHeight;
targetWidth=this.width > 300 ? 300 : this.width;
targetHeight=targetWidth / this.width * this.height;
canvas.width=targetWidth;
canvas.height=targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
context.drawImage(img, 0, 0, targetWidth, targetHeight);
var tmpSrc=canvas.toDataURL("image/jpeg");
//在本地存儲完整的縮略圖源
localStorage.setItem('FullImage', tmpSrc);
thumbimg.src=tmpSrc;
}
確定了縮放后的寬度targetWidth和高度targetHeight之后,我們使用canvas的drawImage方法對圖像進行壓縮,在這之前我們最好先使用畫布的clearRect對畫布進行一次清理。對圖片等比縮放以后,使用canvas的toDataURL方法,獲取到縮放圖的base64內容,賦給新的縮放圖Image對象thumbimg的src屬性,待縮放圖加載完畢,進行下一步的切割處理。縮放圖的base64內容使用localStorage存儲,鍵名為"FullImage"。瀏覽器的本地存儲localStorage是硬存儲,在瀏覽器刷新之后內容不會丟失,這樣我們就可以在游戲過程中保持數據狀態,這點稍后再詳細講解,我們需要知道的是localStorage是有大小限制的,最大為5M。這也是為什么我們先對圖片進行壓縮,減少存儲數據大小,保存縮放圖base64內容的原因。關于開發過程中存儲哪些內容,下一小節會配有圖例詳細說明。
3.3 縮略圖切割
生成縮略圖之后要做的工作就是對縮略圖進行切割了,同樣的也是使用canvas的drawImage方法,而且相應的處理必須放在縮略圖加載完成之后(即thumbimg.onload)進行處理,原因前面我們已經說過。下面我們再來詳細分析一下源代碼吧:
thumbimg.onload=function () {
//每一個切片的寬高[切割成3*4格式]
var sliceWidth, sliceHeight, sliceBase64, n=0, outputElement='',
sliceWidth=this.width / 3,
sliceHeight=this.height / 4,
sliceElements=[];
canvas.width=sliceWidth;
canvas.height=sliceHeight;
for (var j=0; j < 4; j++) {
for (var i=0; i < 3; i++) {
context.clearRect(0, 0, sliceWidth, sliceHeight);
context.drawImage(thumbimg, sliceWidth * i, sliceHeight * j, sliceWidth, sliceHeight, 0, 0, sliceWidth, sliceHeight);
sliceBase64=canvas.toDataURL("image/jpeg");
localStorage.setItem('slice' + n, sliceBase64);
//為了防止圖片三像素問題發生,請為圖片屬性添加 display:block
newElement="<li name=\"" + n + "\" style=\"margin:3px;\"><img src=\"" + sliceBase64 + "\" style=\"display:block;\"></li>";
//根據隨機數打亂圖片順序
(Math.random() > 0.5) ? sliceElements.push(newElement) : sliceElements.unshift(newElement);
n++;
}
}
//拼接元素
for (var k=0, len=sliceElements.length; k < len; k++) {
outputElement +=sliceElements[k];
}
localStorage.setItem('imageWidth', this.width + 18);
localStorage.setItem('imageHeight', this.height + 18);
output.style.width=this.width + 18 + 'px';
output.style.height=this.height + 18 + 'px';
(output.innerHTML=outputElement) && beginGamesInit();
droptarget.remove();
}
上面的代碼對于大家來說不難理解,就是將縮略圖分割成12個切片,這里我給大家解釋一下幾個容易困惑的地方:
for (var j=0; j < 4; j++) {
for (var i=0; i < 3; i++) {
//此處省略邏輯代碼
}
}
這個問題大家仔細想一想就明白了,我們將圖片進行切割的時候,要記錄下來每一個圖片切片的原有順序。在程序中我們使用 n 來表示圖片切片的原有順序,而且這個n記錄在了每一個圖片切片的元素的name屬性中。在后續的游戲過程中我們可以使用元素的getAttribute('name')方法取出 n 的值,來判斷圖片切片是否都被拖動到了正確的位置,以此來判斷游戲是否結束,現在講起這個問題可能還會有些迷惑,我們后邊還會再詳細探討,我給出一張圖幫助大家理解圖片切片位置序號信息n:
序號n從零開始是為了和javascript中的getElementsByTagName()選擇的子元素坐標保持一致。
(Math.random() > 0.5) ? sliceElements.push(newElement) : sliceElements.unshift(newElement);
我們知道Math.random()生成一個[0, 1)之間的數,所以再canvas將縮略圖裁切成切片以后,根據這些切片生成的web節點順序是打亂的。打亂順序以后重新組裝節點:
//拼接元素
for (var k=0, len=sliceElements.length; k < len; k++) {
outputElement +=sliceElements[k];
}
然后再將節點添加到web頁面中,也就自然而然出現了圖片切片被打亂的樣子了。
下面的一行代碼,雖然簡單,但是用的非常巧妙:
(output.innerHTML=outputElement) && beginGamesInit();
有開發經驗的同學都知道 && 和 || 是短路運算符,代碼中的含義是:只有當切片元素節點都添加到
WEB頁面之后,才會初始化為這些節點綁定事件。
3.4 本地信息存儲
代碼中多次用到了本地存儲,下面我們來詳細解釋一下本游戲開發過程中都有哪些信息需要存儲,為什么要存儲?下面是我給出的需要存儲的信息圖示例(從瀏覽器控制臺獲取):
瀏覽器本地存儲localStorage使用key:value形式存儲,從圖中我們看到我們本次存儲的內容有:
保存FullImage縮略圖的信息是當游戲結束后顯示源縮略圖時,根據FullImage中的內容展示圖片。而imageWidth,imageHeight,slice*,nodePos是為了防止瀏覽器刷新導致數據丟失所做的存儲,當刷新頁面的時候,瀏覽器會根據本地存儲的數據加載沒有完成的游戲內容。其中nodePos是在為縮略圖切片發生拖動時存入本地存儲的,并且它隨著切片位置的變化而變化,也就是它追蹤著游戲的狀態,我們在接下來的代碼功能展示中會再次說到它。
3.5 拖拽事件注冊和監控
接下來我們要做的事才是游戲中最重要的部分,還是先來分析一下代碼,首先是事件注冊前的初始化工作:
//游戲開始初始化
function beginGamesInit() {
aLi=output.getElementsByTagName("li");
for (var i=0; i < aLi.length; i++) {
var t=aLi[i].offsetTop;
var l=aLi[i].offsetLeft;
aLi[i].style.top=t + "px";
aLi[i].style.left=l + "px";
aPos[i]={left: l, top: t};
aLi[i].index=i;
//將位置信息記錄下來
nodePos.push(aLi[i].getAttribute('name'));
}
for (var i=0; i < aLi.length; i++) {
aLi[i].style.position="absolute";
aLi[i].style.margin=0;
setDrag(aLi[i]);
}
}
可以看到這部分初始化綁定事件代碼所做的事情是:記錄每一個圖片切片對象的位置坐標相關信息記錄到對象屬性中,并為每一個對象都注冊拖拽事件,對象的集合由aLi數組統一管理。這里值得一提的是圖片切片的位置信息index記錄的是切片現在所處的位置,而我們前邊所提到的圖片切片name屬性所保存的信息n則是圖片切片原本應該所處的位置,在游戲還沒有結束之前,它們不一定相等。待所有的圖片切片name屬性所保存的值和其屬性index都相等時,游戲才算結束(因為用戶已經正確完成了圖片的拼接),下面的代碼就是用來判斷游戲狀態是否結束的,看起來更直觀一些:
//判斷游戲是否結束
function gameIsEnd() {
for (var i=0, len=aLi.length; i < len; i++) {
if (aLi[i].getAttribute('name') !=aLi[i].index) {
return false;
}
}
//后續處理代碼省略......
}
下面我們還是詳細說一說拖拽交換代碼相關邏輯吧,拖拽交換的代碼如下圖所示:
//拖拽
function setDrag(obj) {
obj.onmouseover=function () {
obj.style.cursor="move";
console.log(obj.index);
}
obj.onmousedown=function (event) {
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
obj.style.zIndex=minZindex++;
//當鼠標按下時計算鼠標與拖拽對象的距離
disX=event.clientX + scrollLeft - obj.offsetLeft;
disY=event.clientY + scrollTop - obj.offsetTop;
document.onmousemove=function (event) {
//當鼠標拖動時計算p的位置
var l=event.clientX - disX + scrollLeft;
var t=event.clientY - disY + scrollTop;
obj.style.left=l + "px";
obj.style.top=t + "px";
for (var i=0; i < aLi.length; i++) {
aLi[i].className="";
}
var oNear=findMin(obj);
if (oNear) {
oNear.className="active";
}
}
document.onmouseup=function () {
document.onmousemove=null; //當鼠標彈起時移出移動事件
document.onmouseup=null; //移出up事件,清空內存
//檢測是否普碰上,在交換位置
var oNear=findMin(obj);
if (oNear) {
oNear.className="";
oNear.style.zIndex=minZindex++;
obj.style.zIndex=minZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index], function () {
gameIsEnd();
});
//交換index
var t=oNear.index;
oNear.index=obj.index;
obj.index=t;
//交換本次存儲中的位置信息
var tmp=nodePos[oNear.index];
nodePos[oNear.index]=nodePos[obj.index];
nodePos[obj.index]=tmp;
localStorage.setItem('nodePos', nodePos);
} else {
startMove(obj, aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;//低版本出現禁止符號
}
}
這段代碼所實現的功能是這樣子的:拖動一個圖片切片,當它與其它的圖片切片有碰撞重疊的時候,就和與其左上角距離最近的一個圖片切片交換位置,并交換其位置信息index,更新本地存儲信息中的nodePos。移動完成之后判斷游戲是否結束,若沒有,則期待下一次用戶的拖拽交換。
下面我來解釋一下這段代碼中比較難理解的幾個點:
//碰撞檢測
function colTest(obj1, obj2) {
var t1=obj1.offsetTop;
var r1=obj1.offsetWidth + obj1.offsetLeft;
var b1=obj1.offsetHeight + obj1.offsetTop;
var l1=obj1.offsetLeft;
var t2=obj2.offsetTop;
var r2=obj2.offsetWidth + obj2.offsetLeft;
var b2=obj2.offsetHeight + obj2.offsetTop;
var l2=obj2.offsetLeft;
`if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2)` {
return false;
} else {
return true;
}
}
這段代碼看似信息量很少,其實也很好理解,判斷兩個圖片切片是否發生碰撞,只要將它們沒有發生碰撞的情形排除掉就可以了。這有點類似與邏輯中的非是即否,兩個切片又確實只可能存在兩種情況:碰撞、不碰撞。圖中的這段代碼是判斷不碰撞的情況:if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2),返回false, else 返回true。
2.碰撞檢測完成了之后,圖片切片之間又是怎樣尋找左上角定點距離最近的元素呢?
代碼是這個樣子的:
//勾股定理求距離(左上角的距離)
function getDis(obj1, obj2) {
var a=obj1.offsetLeft - obj2.offsetLeft;
var b=obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
//找到距離最近的
function findMin(obj) {
var minDis=999999999;
var minIndex=-1;
for (var i=0; i < aLi.length; i++) {
if (obj==aLi[i]) continue;
if (colTest(obj, aLi[i])) {
var dis=getDis(obj, aLi[i]);
if (dis < minDis) {
minDis=dis;
minIndex=i;
}
}
}
if (minIndex==-1) {
return null;
} else {
return aLi[minIndex];
}
}
因為都是矩形區塊,所以計算左上角的距離使用勾股定理,這點相信大家都能明白。查找距離最近的元素原理也很簡單,就是遍歷所有已經碰撞的元素,然后比較根據勾股定理計算出來的最小值,返回元素就可以了。代碼中也是使用了比較通用的方法,先聲明一個很大的值最為最小值,當有碰撞元素比其小時,再將更小的值最為最小值,遍歷完成后,返回最小值的元素就可以了。
答案是回調函數,圖片切片交換函數通過回調函數來判斷游戲是否已經結束,游戲是否結束的判斷函數前面我們已經說過。圖片切片交換函數就是通過添加gameIsEnd作為回調函數,這樣在每次圖片切片移動交換完成之后,就判斷一下游戲是否結束。圖片切片的交換函數還是比較復雜的,有興趣的同學可以研究一下,下面是其實現代碼,大家重點理解其中添加了回調函數監控游戲是否結束就好了。
//通過class獲取元素
function getClass(cls){
var ret=[];
var els=document.getElementsByTagName("*");
for (var i=0; i < els.length; i++){
//判斷els[i]中是否存在cls這個className;.indexOf("cls")判斷cls存在的下標,如果下標>=0則存在;
if(els[i].className===cls || els[i].className.indexOf("cls")>=0 || els[i].className.indexOf(" cls")>=0 || els[i].className.indexOf(" cls ")>0){
ret.push(els[i]);
}
}
return ret;
}
function getStyle(obj,attr){//解決JS兼容問題獲取正確的屬性值
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function gameEnd() {
alert('游戲結束!');
}
function startMove(obj,json,fun){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var isStop=true;
for(var attr in json){
var iCur=0;
//判斷運動的是不是透明度值
if(attr=="opacity"){
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
var ispeed=(json[attr]-iCur)/8;
//運動速度如果大于0則向下取整,如果小于0想上取整;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
//判斷所有運動是否全部完成
if(iCur!=json[attr]){
isStop=false;
}
//運動開始
if(attr=="opacity"){
obj.style.filter="alpha:(opacity:"+(json[attr]+ispeed)+")";
obj.style.opacity=(json[attr]+ispeed)/100;
}else{
obj.style[attr]=iCur+ispeed+"px";
}
}
//判斷是否全部完成
if(isStop){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},30);
}
4.1 游戲中值得完善的功能
我認為該游戲中值得優化的地方有兩個:
這些功能感興趣的小伙伴可以嘗試一下。
相關推薦:
用javascript實現web拼圖游戲
H5的canvas實現貪吃蛇小游戲
以上就是使用javascript中canvas實現拼圖小游戲的詳細內容,更多請關注其它相關文章!
更多技巧請《轉發 + 關注》哦!
Canvas是一個矩形區域的畫布,可以用JavaScript在上面繪畫;
我們今天的目標是使用HTML5畫布技術制作一款拼圖小游戲,要求將圖像劃分為3*3的9塊方塊并打亂排序,用戶可以移動方塊拼成完整圖片。
效果如下所示:
<div id="container">
<!--頁面標題-->
<h3>HTML5畫布綜合項目之拼圖游戲</h3>
<!--水平線-->
<hr />
<!--游戲內容-->
<!--游戲時間-->
<div id="timeBox">
共計時間:<span id="time">00:00:00</span>
</div>
<!--游戲畫布-->
<canvas id="myCanvas" width="300" height="300" style="border:1px solid">
對不起,您的瀏覽器不支持HTML5畫布API。
</canvas>
<!--游戲按鈕-->
<div>
<button onclick="restartGame()">
重新開始
</button>
</div>
</div>
效果如下所示:
我們可以看到頁面的大致結構是已經顯現出來了,就是骨架已經搭建好了,現在我們要使用css強化樣式;
整體背景設置
body {
background-color: silver;/*設置頁面背景顏色為銀色*/
}
游戲界面樣式設置
#container {
background-color: white;
width: 600px;
margin: auto;
padding: 20px;
text-align: center;
box-shadow: 10px 10px 15px black;
}
游戲時間面板樣式設置
#timeBox {
margin: 10px 0;
font-size: 18px;
}
游戲按鈕樣式設置
button {
width: 200px;
height: 50px;
margin: 10px 0;
border: 0;
outline: none;
font-size: 25px;
font-weight: bold;
color: white;
background-color: lightcoral;
}
鼠標懸浮時的按鈕樣式設置
button:hover {
background-color: coral;
}
設置好界面整體樣式之后我們得到完整的界面,如下所示:
可以看到整體的靜態界面已經搭建出來了
目標對象的獲取
var c=document.getElementById('myCanvas'); //獲取畫布對象
var ctx=c.getContext('2d'); //獲取2D的context對象
聲明拼圖的圖片素材來源
var img=new Image();
img.src="image/pintu.jpg";
img.onload=function() { //當圖片加載完畢時
generateNum(); //打亂拼圖的位置
drawCanvas(); //在畫布上繪制拼圖
}
定義初始方塊位置
var num=[[00, 01, 02], [10, 11, 12], [20, 21, 22]];
打亂拼圖的位置
function generateNum() { //循環50次進行拼圖打亂
for (var i=0; i < 50; i++) {
//隨機抽取其中一個數據
var i1=Math.round(Math.random() * 2);
var j1=Math.round(Math.random() * 2);
//再隨機抽取其中一個數據
var i2=Math.round(Math.random() * 2);
var j2=Math.round(Math.random() * 2);
//對調它們的位置
var temp=num[i1][j1];
num[i1][j1]=num[i2][j2];
num[i2][j2]=temp;
}
}
繪制拼圖
自定義名稱的drawCanvas()方法用于在畫布上繪制亂序后的圖片;
function drawCanvas() {
//清空畫布
ctx.clearRect(0, 0, 300, 300);
//使用雙重for循環繪制3x3的拼圖
for (var i=0; i < 3; i++) {
for (var j=0; j < 3; j++) {
if (num[i][j] !=22) {
//獲取數值的十位數,即第幾行
var row=parseInt(num[i][j] / 10);
//獲取數組的個位數,即第幾列
var col=num[i][j] % 10;
//在畫布的相關位置上繪圖
ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w); // w:300 / 3=100(小圖寬度)
}
}
}
}
如下所示:
監聽鼠標監聽事件
c.onmousedown=function(e) {
var bound=c.getBoundingClientRect(); //獲取畫布邊界
var x=e.pageX - bound.left; //獲取鼠標在畫布上的坐標位置(x,y)
var y=e.pageY - bound.top;
var row=parseInt(y / w); //將x和y換算成幾行幾列
var col=parseInt(x / w);
if (num[row][col] !=22) { //如果當前點擊的不是空白區域
detectBox(row, col); //移動點擊的方塊
drawCanvas(); //重新繪制畫布
var isWin=checkWin(); //檢查游戲是否成功
if (isWin) { //如果游戲成功
clearInterval(timer); //清除計時器
ctx.drawImage(img, 0, 0); //繪制完整圖片
ctx.font="bold 68px serif"; //設置字體為加粗、68號字,serif
ctx.fillStyle="red"; //設置填充色為紅色
ctx.fillText("游戲成功!", 20, 150); //顯示提示語句
}
}
}
點擊方塊移動
function detectBox(i, j) {
//如果點擊的方塊不在最上面一行
if (i > 0) {
//檢測空白區域是否在當前方塊的正上方
if (num[i-1][j]==22) {
//交換空白區域與當前方塊的位置
num[i-1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//如果點擊的方塊不在最下面一行
if (i < 2) {
//檢測空白區域是否在當前方塊的正下方
if (num[i+1][j]==22) {
//交換空白區域與當前方塊的位置
num[i+1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//如果點擊的方塊不在最左邊一列
if (j > 0) {
//檢測空白區域是否在當前方塊的左邊
if (num[i][j - 1]==22) {
//交換空白區域與當前方塊的位置
num[i][j - 1]=num[i][j];
num[i][j]=22;
return;
}
}
//如果點擊的方塊不在最右邊一列
if (j < 2) {
//檢測空白區域是否在當前方塊的右邊
if (num[i][j + 1]==22) {
//交換空白區域與當前方塊的位置
num[i][j + 1]=num[i][j];
num[i][j]=22;
return;
}
}
}
游戲成功判定與顯示效果的實現
function restartGame() {
clearInterval(timer); //清除計時器
s=0; //時間清零
m=0;
h=0;
getCurrentTime(); //重新顯示時間
timer=setInterval("getCurrentTime()", 1000);
generateNum(); //重新打亂拼圖順序
drawCanvas(); //繪制拼圖
}
靜態效果如上所示,至于游戲成功這里伙計們可以自行操作;
本次案例我們使用HTML5的新特性canvas畫布標簽打造了簡單的9宮格拼圖游戲,總體來說沒有特別的復雜,主要是圖片的分割方塊移動事件的綁定,以及重新游戲的初始化操作,明確了游戲邏輯之后其實代碼的編寫其實不難。感興趣的小伙伴可以去嘗試一下。
TML5 CSS3 3D魔方拼圖在線益智小游戲網頁開發。一款基于HTML5和CSS3的3D立方體拼圖應用,一共有8個小立方體組成的3D拼圖,我們可以點擊立方體或者方向鍵完成拼圖,同時我們也可以讓立方體保持旋轉。采用響應式設計,自適應手機移動端,用戶體驗友好。
ps:推薦一下我的微細公眾號:webqiand,學習前端有不懂的(學習方法,學習路線,如何學習有效率的問題)可以關一下,公眾號有不錯的學習教程,開發工具、電子書籍分享。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 CSS3 3D魔方拼圖在線益智小游戲網頁開發</title> <meta name="keywords" content="HTML5,CSS3,3D魔方,拼圖,在線益智小游戲,網頁開發" /> <meta name="description" content="HTML5 CSS3 3D魔方拼圖在線益智小游戲網頁開發。一款基于HTML5和CSS3的3D立方體拼圖應用,一共有8個小立方體組成的3D拼圖,我們可以點擊立方體或者方向鍵完成拼圖,同時我們也可以讓立方體保持旋轉。采用響應式設計,自適應手機移動端,用戶體驗友好。" /> <link rel='stylesheet prefetch' > <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="body-wrapper"> <div class="cubetwo-help-component"> <div class="cubetwo-row"> <div class="cubetwo-device-info"> <i class="material-icons"> touch_app </i> <div> tap or swipe with fingers </div> </div> <div class="cubetwo-device-info"> <i class="material-icons"> mouse </i> <div> click or swipe with mouse </div> </div> <div class="cubetwo-device-info cubetwo-device-info--keyboard"> <i class="material-icons"> keyboard </i> <div> keyboard keys </div> <div class="cubetwo-device-info-groups"> <div class="cubetwo-device-info-group"> <div> <i class="material-icons"> keyboard_tab </i> <i class="material-icons"> keyboard_arrow_up </i> </div> <div> <i class="material-icons"> keyboard_arrow_left </i> <i class="material-icons"> keyboard_arrow_down </i> <i class="material-icons"> keyboard_arrow_right </i> </div> </div> <div class="cubetwo-device-info-group"> <div> <span> q </span> <span> w </span> <span> e </span> </div> <div> <span> a </span> <span> s </span> <span> d </span> </div> <div> <span> x </span> <span> y </span> <span> z </span> </div> </div> </div> </div> </div> <a target="_blank" class="cubetwo-github-link"> github project </a> </div> <div class="cubetwo-menu-component"> <div class="cubetwo-row"> <button class="cubetwo-js cubetwo-btn cubetwo-btn-scramble"> scramble </button> <button class="cubetwo-js cubetwo-btn cubetwo-btn-spin"> spin </button> <button class="cubetwo-js cubetwo-btn cubetwo-btn-solve"> solve </button> </div> </div> <div class="cubetwo-component" id="cubetwo-component-1"> <div class="cubetwo-rotation-view"> <div class="cubetwo-cube-group cubetwo-cube-group--1"> <div class="cubetwo-cube-1" tabindex="0" data-type="cubetwo"> <div class="cubetwo-cube" data-type="cubetwo-display" data-index="1"> <div data-type="front"> <div> front </div> </div> <div data-type="up"> <div> up </div> </div> <div data-type="right"> <div> right </div> </div> <div data-type="back"> <div> back </div> </div> <div data-type="down"> <div> down </div> </div> <div data-type="left"> <div> left </div> </div> </div> <div class="cubetwo-cube" data-type="cubetwo-touch"> <div data-type="front"> touch front </div> <div data-type="up"> touch up </div> <div data-type="left"> touch left </div> </div> </div> <div class="cubetwo-cube-2" tabindex="0" data-type="cubetwo"> <div class="cubetwo-cube" data-type="cubetwo-display" data-index="2"> <div data-type="front"> <div> front </div> </div> <div data-type="up"> <div> up </div> </div> <div data-type="right"> <div> right </div> </div> <div data-type="back"> <div> back </div> </div> <div data-type="down"> <div> down </div> </div> <div data-type="left"> <div> left </div> </div> </div> <div class="cubetwo-cube" data-type="cubetwo-touch"> <div data-type="front"> touch front </div> <div data-type="up"> touch up </div> <div data-type="right"> touch right </div> </div> </div>
需要這個項目css、js代碼、圖片的可以找我免費領取。如果大家不怕麻煩可以關注我后私信我“前端學習資料”幾個字 找我領取 24小時在線!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。