So implementieren Sie ein Puzzle in js objektorientiert
In diesem Artikel wird hauptsächlich die objektorientierte Implementierung von Puzzles in js vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Schauen Sie sich den Editor an
1. HTML-Code
<!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>2 🎜>
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();
}
}2. Spielbildmaterialien
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Puzzle in js objektorientiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1381
52
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Entdecken Sie die objektorientierte Programmierung in Go
Apr 04, 2024 am 10:39 AM
Die Go-Sprache unterstützt die objektorientierte Programmierung durch Typdefinition und Methodenzuordnung. Es unterstützt keine traditionelle Vererbung, sondern wird durch Komposition implementiert. Schnittstellen sorgen für Konsistenz zwischen Typen und ermöglichen die Definition abstrakter Methoden. Praxisbeispiele zeigen, wie OOP zum Verwalten von Kundeninformationen verwendet wird, einschließlich Vorgängen zum Erstellen, Abrufen, Aktualisieren und Löschen von Kunden.
Analyse der objektorientierten Funktionen der Go-Sprache
Apr 04, 2024 am 11:18 AM
Die Go-Sprache unterstützt objektorientierte Programmierung, definiert Objekte über Strukturen, definiert Methoden mithilfe von Zeigerempfängern und implementiert Polymorphismus über Schnittstellen. Objektorientierte Funktionen ermöglichen die Wiederverwendung, Wartbarkeit und Kapselung von Code in der Go-Sprache, es gibt jedoch auch Einschränkungen wie das Fehlen traditioneller Konzepte von Klassen und Vererbung sowie Methodensignaturumwandlungen.
Erweiterte PHP-Funktionen: Best Practices in der objektorientierten Programmierung
Jun 05, 2024 pm 09:39 PM
Zu den OOP-Best Practices in PHP gehören Namenskonventionen, Schnittstellen und abstrakte Klassen, Vererbung und Polymorphismus sowie Abhängigkeitsinjektion. Zu den praktischen Fällen gehören: Verwenden des Lagermodus zum Verwalten von Daten und Verwenden des Strategiemodus zum Implementieren der Sortierung.
Gibt es in Golang klassenähnliche objektorientierte Funktionen?
Mar 19, 2024 pm 02:51 PM
In Golang (Go-Sprache) gibt es kein Konzept einer Klasse im herkömmlichen Sinne, es stellt jedoch einen Datentyp namens Struktur bereit, durch den objektorientierte Funktionen ähnlich wie Klassen erreicht werden können. In diesem Artikel erklären wir, wie Strukturen zur Implementierung objektorientierter Funktionen verwendet werden, und stellen konkrete Codebeispiele bereit. Definition und Verwendung von Strukturen Werfen wir zunächst einen Blick auf die Definition und Verwendung von Strukturen. In Golang können Strukturen über das Schlüsselwort type definiert und dann bei Bedarf verwendet werden. Strukturen können Attribute enthalten
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
Wie man mit der Yitian-Kamera ein Puzzle erstellt?
Mar 25, 2024 pm 12:50 PM
Laden Sie die neueste Version von Yitian Camera 2023 herunter und installieren Sie sie. Es ist ein unverzichtbares Kamera-Tool für jeden. Die Kamerafunktion ist sehr praktisch, um jederzeit und überall Bilder aufzunehmen . Die Möglichkeit, Fotos zu machen, ist sehr einfach. Es gibt viele beliebte und beliebte Fotostile, die Sie jeden Tag ausprobieren können Während Sie in wenigen Minuten die schönsten Momente im Leben festhalten, erfahren Sie, wie Sie online Rätsel für Yitian-Kamerapartner erstellen können. 1. Rufen Sie zunächst die Softwareoberfläche auf und klicken Sie zum Aufrufen auf [Vorlage]. 2. Rufen Sie die Schnittstelle auf und klicken Sie auf [Puzzle], um sie aufzurufen.
Vertieftes Verständnis der objektorientierten PHP-Programmierung: Debugging-Techniken für die objektorientierte Programmierung
Jun 05, 2024 pm 08:50 PM
Indem Sie das Verfolgen des Objektstatus, das Setzen von Haltepunkten, das Verfolgen von Ausnahmen und die Verwendung der xdebug-Erweiterung beherrschen, können Sie objektorientierten PHP-Programmiercode effektiv debuggen. 1. Objektstatus verfolgen: Verwenden Sie var_dump() und print_r(), um Objektattribute und Methodenwerte anzuzeigen. 2. Legen Sie einen Haltepunkt fest: Legen Sie einen Haltepunkt in der Entwicklungsumgebung fest. Wenn die Ausführung den Haltepunkt erreicht, wird der Debugger angehalten, sodass der Objektstatus einfacher überprüft werden kann. 3. Ausnahmen verfolgen: Verwenden Sie Try-Catch-Blöcke und getTraceAsString(), um den Stack-Trace und die Meldung abzurufen, wenn die Ausnahme auftritt. 4. Verwenden Sie den Debugger: Die Funktion xdebug_var_dump() kann den Inhalt von Variablen während der Codeausführung überprüfen.
