Comment implémenter un puzzle en js orienté objet
Cet article présente principalement comment implémenter des puzzles en js orientés objet. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur
1. Code 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>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. Matériel d'image du jeu
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Explorez la programmation orientée objet dans Go
Apr 04, 2024 am 10:39 AM
Le langage Go prend en charge la programmation orientée objet via la définition de type et l'association de méthodes. Il ne prend pas en charge l'héritage traditionnel, mais est mis en œuvre par composition. Les interfaces assurent la cohérence entre les types et permettent de définir des méthodes abstraites. Des cas pratiques montrent comment utiliser la POO pour gérer les informations client, notamment la création, l'obtention, la mise à jour et la suppression d'opérations client.
Analyse des fonctionnalités orientées objet du langage Go
Apr 04, 2024 am 11:18 AM
Le langage Go prend en charge la programmation orientée objet, définissant des objets via des structures, définissant des méthodes à l'aide de récepteurs de pointeurs et implémentant le polymorphisme via des interfaces. Les fonctionnalités orientées objet assurent la réutilisation, la maintenabilité et l'encapsulation du code dans le langage Go, mais il existe également des limitations telles que le manque de concepts traditionnels de classes et d'héritage et de conversions de signatures de méthodes.
Fonctionnalités avancées PHP : meilleures pratiques en matière de programmation orientée objet
Jun 05, 2024 pm 09:39 PM
Les meilleures pratiques de POO en PHP incluent les conventions de dénomination, les interfaces et les classes abstraites, l'héritage et le polymorphisme, ainsi que l'injection de dépendances. Les cas pratiques incluent : l'utilisation du mode entrepôt pour gérer les données et l'utilisation du mode stratégie pour mettre en œuvre le tri.
Existe-t-il des fonctionnalités orientées objet de type classe dans Golang ?
Mar 19, 2024 pm 02:51 PM
Il n'y a pas de concept de classe au sens traditionnel dans Golang (langage Go), mais il fournit un type de données appelé structure, à travers lequel des fonctionnalités orientées objet similaires aux classes peuvent être obtenues. Dans cet article, nous expliquerons comment utiliser les structures pour implémenter des fonctionnalités orientées objet et fournirons des exemples de code concrets. Définition et utilisation des structures Examinons d'abord la définition et l'utilisation des structures. Dans Golang, les structures peuvent être définies via le mot-clé type, puis utilisées si nécessaire. Les structures peuvent contenir des attributs
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
Comment créer un puzzle avec Yitian Camera ? Comment configurer un puzzle ?
Mar 25, 2024 pm 12:50 PM
Téléchargez et installez la dernière version de Yitian Camera 2023. C'est un outil d'appareil photo indispensable pour tout le monde. La fonction d'appareil photo est très pratique pour prendre des photos à tout moment et n'importe où. . peut être téléchargé gratuitement. La façon de prendre des photos est très simple. L'embellissement en un clic rendra votre peau plus délicate. Il existe de nombreux styles de photos populaires que vous pouvez essayer en ligne tous les jours. belle déesse en quelques minutes, et vous pouvez également filmer des vidéos. En continuant à enregistrer les plus beaux moments de la vie, l'éditeur fournira des détails sur la façon de configurer des puzzles pour les partenaires de caméra Yitian en ligne. 1. Entrez d'abord dans l'interface du logiciel et cliquez sur [Modèle] pour entrer. 2. Entrez dans l'interface et cliquez sur [Puzzle] pour entrer. 3. Enfin, entrez dans l'interface et cliquez sur [Puzzle].
Compréhension approfondie de la programmation orientée objet PHP : techniques de débogage pour la programmation orientée objet
Jun 05, 2024 pm 08:50 PM
En maîtrisant le suivi de l'état des objets, la définition de points d'arrêt, le suivi des exceptions et l'utilisation de l'extension xdebug, vous pouvez déboguer efficacement le code de programmation orienté objet PHP. 1. Suivez l'état de l'objet : utilisez var_dump() et print_r() pour afficher les attributs de l'objet et les valeurs des méthodes. 2. Définir un point d'arrêt : définissez un point d'arrêt dans l'environnement de développement et le débogueur se mettra en pause lorsque l'exécution atteint le point d'arrêt, ce qui facilitera la vérification de l'état de l'objet. 3. Tracez les exceptions : utilisez les blocs try-catch et getTraceAsString() pour obtenir la trace de la pile et le message lorsque l'exception se produit. 4. Utilisez le débogueur : La fonction xdebug_var_dump() peut inspecter le contenu des variables pendant l'exécution du code.
