js物件導向之如何實現拼圖遊戲
這篇文章主要介紹了js物件導向之如何實現拼圖遊戲,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
一、html程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图小游戏</title>
<style>
body,td { margin:0; padding:0; }
#begin { display:block; margin:20px auto; }
table { margin:80px auto; background:#fff; border:10px solid pink; }
td { width:100px; height:100px; border:1px solid #ccc; cursor:pointer; background:url(img.jpg) no-repeat; }
</style>
<script src="js.js"></script>
<script>
window.onload = function(){
var thisGame = new PinTuGame('begin');
}
</script>
</head>
<body>
<button id="begin">开始</button>
</body>
</html>二、js程式碼
function PinTuGame(id){
var that = this;
this.oBtn = document.getElementById(id);
this.oTable = document.createElement('table');
this.oTbody = document.createElement('tbody');
this.aTd = null;
this.aTdMsg = []; //用于存储每个图片的信息
this.num = 0; //用于判断拼图是否完成
this.oTable.cellSpacing = '0';
this.createElem(); //初始化游戏界面
this.oBtn.onclick = function(){
for(var i = 0; i<that.aTd.length; i++){
that.aTd[i].style.opacity = 1;
}
this.innerHTML = '重新开始';
that.aTd[that.aTd.length-1].style.opacity = 0;
var iAlpha = 100;
var sp = -10;
var timer = setInterval(function(){
iAlpha += sp;
that.oTbody.style.opacity = iAlpha / 100;
if(iAlpha <=0) { sp = -sp; that.randomElem();}
if(iAlpha > 100) {clearInterval(timer) };
},15);
that.beginGame();
}
}
PinTuGame.prototype = { //初始化游戏界面
createElem: function(){
for(var i =0; i<4; i++){
var oTr = document.createElement('tr');
for(var j =0; j<4; j++){
var oTd = document.createElement('td');
this.num ++;
var tdMsg = {
seq: this.num,
bgPosition: -100*j+'px '+ -100*i+'px'
};
this.aTdMsg.push(tdMsg);
oTr.appendChild(oTd);
}
this.oTbody.appendChild(oTr);
}
this.oTable.appendChild(this.oTbody);
document.body.appendChild(this.oTable);
this.aTd = this.oTbody.getElementsByTagName('td');
for(var i = 0; i<this.aTd.length; i++){
this.aTd[i].json = this.aTdMsg[i];
this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
}
},
randomElem: function(){ //随机排序图片
this.aTdMsg.sort(function (){
return Math.random()-0.5;
});
for(var i=0;i<this.aTd.length;i++){
this.aTd[i].json = this.aTdMsg[i];
this.aTd[i].style.backgroundPosition = this.aTd[i].json.bgPosition;
}
},
beginGame: function(){ //开始游戏
var that = this;
var rows = this.oTbody.rows;
for(var i =0; i<4; i++){
for(var j =0; j<4; j++){
rows[i].cells[j].Y = i;
rows[i].cells[j].X = j;
rows[i].cells[j].onclick = function(){
var arr = [ //获取该图片的上右下左，四个方向的坐标
[this.Y-1, this.X],
[this.Y, this.X+1],
[this.Y+1, this.X],
[this.Y, this.X-1]
];
for(var i = 0; i<arr.length; i++){
if( arr[i][0]<0 || arr[i][1]<0 || arr[i][0]>3 || arr[i][1]>3)continue;
if( rows[arr[i][0]].cells[ arr[i][1] ].style.opacity == '0' ){
rows[arr[i][0]].cells[ arr[i][1] ].style.opacity = 1;
this.style.opacity=0;
//与隐藏的td交换json对象
var thisJson = this.json;
this.json = rows[arr[i][0]].cells[ arr[i][1]].json;
rows[arr[i][0]].cells[arr[i][1]].json = thisJson;
//与隐藏的td交换bakcground-position
this.style.backgroundPosition=this.json.bgPosition;
rows[arr[i][0]].cells[arr[i][1]].style.backgroundPosition=rows[arr[i][0]].cells[arr[i][1]].json.bgPosition;
}
}
that.checkWin();
};
}
}
},
checkWin: function(){ //检测游戏是否完成
var aJson = [];
for(var i = 0; i<this.aTd.length; i++){
aJson.push(this.aTd[i].json.seq);
}
for(var i = 0; i<aJson.length-1; i++){
if(aJson[i]>aJson[i+1])return;
}
for(var i = 0; i<this.aTd.length; i++){
this.aTd[i].style.opacity = 1;
}
alert('恭喜，胜利啦！');
location.reload();
}
}二、遊戲圖片素材
以上是js物件導向之如何實現拼圖遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
探索Go語言中的物件導向編程
Apr 04, 2024 am 10:39 AM
Go語言支援物件導向編程，透過型別定義和方法關聯實作。它不支援傳統繼承，而是透過組合實現。介面提供了類型間的一致性，允許定義抽象方法。實戰案例展示如何使用OOP管理客戶訊息，包括建立、取得、更新和刪除客戶操作。
PHP高階特性：物件導向程式設計的最佳實踐
Jun 05, 2024 pm 09:39 PM
PHP中OOP最佳實務包括命名約定、介面與抽象類別、繼承與多型、依賴注入。實戰案例包括：使用倉庫模式管理數據，使用策略模式實現排序。
Golang中有類似類別的物件導向特性嗎？
Mar 19, 2024 pm 02:51 PM
在Golang（Go語言）中並沒有傳統意義上的類別的概念，但它提供了一種稱為結構體的資料類型，透過結構體可以實現類似類別的物件導向特性。在本文中，我們將介紹如何使用結構體實現物件導向的特性，並提供具體的程式碼範例。結構體的定義和使用首先，讓我們來看看結構體的定義和使用方式。在Golang中，結構體可以透過type關鍵字定義，然後在需要的地方使用。結構體中可以包含屬
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
Go語言的物件導向特性解析
Apr 04, 2024 am 11:18 AM
Go語言支援物件導向編程，透過struct定義對象，使用指標接收器定義方法，並透過介面實現多態。物件導向特性在Go語言中提供了程式碼重用、可維護性和封裝，但也存在缺乏傳統類別和繼承的概念以及方法簽章強制型別轉換的限制。
PHP物件導向程式設計的深入理解：物件導向程式設計的除錯技巧
Jun 05, 2024 pm 08:50 PM
透過掌握追蹤物件狀態、設定斷點、追蹤異常和利用xdebug擴展，可以有效調試PHP物件導向程式碼。 1.追蹤物件狀態：使用var_dump()和print_r()檢視物件屬性和方法值。 2.設定斷點：在開發環境中設定斷點，偵錯器會在執行到達斷點時暫停，以便檢查物件狀態。 3.追蹤異常：使用try-catch區塊和getTraceAsString()取得異常發生時的堆疊追蹤和訊息。 4.利用偵錯器：xdebug_var_dump()函數可在程式碼執行過程中檢查變數的內容。
一甜相機怎麼拼圖 設定拼圖的方法
Mar 25, 2024 pm 12:50 PM
一甜相機下載安裝最新版2023是一款大家人手必備的拍照神器，其中的拍照功能非常先進，隨時隨地想拍就拍非常方便，各種風格的主題背景、精美貼紙等等都可以免費下載使用，拍照方式非常簡單，一鍵美顏讓你的皮膚更加細膩，每天都有非常多熱門流行的拍照風格都可以在線嘗試，讓你分分鐘變成美美噠的男女神，還能拍攝視頻，接續記錄下生活中最美好的瞬間，接下來小編在線詳細為一甜相機夥伴們推送設定拼圖的方法。 1先進入到軟體介面，點選【範本】進入 2進入介面中點選【拼圖】進入 3最後進入到介面點選【拼圖】即可
