Construire un jeu Connect Four comme mon premier projet js. Mon jeu a une photo d'arrière-plan d'un plateau de jeu Connect Four et un tableau HTML sur le dessus pour contenir les jetons. Les jetons sont des images que je vais faire glisser sur le plateau.
Jusqu'à présent, j'ai le code (ci-dessous) qui me permet de faire glisser les jetons sur le plateau de jeu.
var dragYellow = document.getElementById('yellowToken1');
var dragRed = document.getElementById('redToken1');
var dropLoc = [];
function locOnDrop(e) {
e.preventDefault();
e.currentTarget.appendChild(
document.createElement('img')
).src = document.getElementById(
e.dataTransfer.getData('key')
).src;
}
gameGrid = [ [1, 2, 3, 4, 5, 6, 7],
[8, 9, 10, 11, 12, 13, 14],
[15, 16, 17, 18, 19, 20, 21],
[22, 23, 24, 25, 26, 27, 28],
[29, 30, 31, 32, 33, 34, 35],
[36, 37, 38, 39, 40, 41, 42],
];
for(var i = 0; i < gameGrid.length; i++){
for(var j = 0; j < gameGrid[i].length; j++){
dropLoc[gameGrid[i][j]] = document.getElementById(gameGrid[i][j].toString());
dropLoc[gameGrid[i][j]].ondrop = locOnDrop;
dropLoc[gameGrid[i][j]].ondragover = function(e) {
e.preventDefault();
}
}
}
Il existe de nombreux exemples de «vérification du gagnant», mais ils sont tous basés sur des jeux utilisant des tableaux au lieu de tableaux. La plus proche que j'ai trouvée était cette question posée en 2012 (voir ci-dessous). La meilleure réponse suggérée n'était PAS d'utiliser le DOM transversal, mais plutôt un tableau 2D. Je suis d'accord avec cela, mais comment pourrais-je faire en sorte que ma table "communique avec le tableau? Si je glisse et dépose les pièces dans une table, comment vais-je connecter ces mouvements avec le tableau?
algorithme connect quatre javascript
Pas pour compliquer les choses, mais pour la fin résultat Je veux simplement déposer les jetons en haut de chaque colonne et les laisser tomber à la position la plus basse disponible, comme dans le jeu réel. Je ne le mentionne qu'au cas où cela affecterait la réponse à ma première question. p >
Merci!
3 Réponses :
La façon dont vous communiquez consiste à vous assurer (comme la réponse mentionnée) que votre table n'est que JUSTE une représentation visuelle de vos données qui, dans ce cas, seraient stockées dans un tableau 2D.
Vous devez donc concevoir votre code pour qu'il ne coule pas
-> du HTML au JS mais
-> du JS au HTML
Je veux dire par là, au lieu de penser à quoi la voiture devrait ressembler, puis de construire votre moteur en fonction de cela, déterminez comment le moteur tournera en premier, puis construisez votre voiture autour de lui.
Dans ce cas, la réponse à l'autre question Stack donne un bon pointeur pour cela.
Si je devais essayer de résoudre ce problème, je le ferais (sans ordre particulier):
Il se peut qu'il y en ait d'autres qui se présentent et tout, mais c'est juste pour vous donner un exemple. Vous voyez que beaucoup de choses qui se produisent ici sont toutes basées sur des calculs ou des algorithmes qui se produisent à l'intérieur du JS et il y a très peu d'interaction avec le DOM réel.
Le seul que j'ai répertorié ici est d'ajouter un jeton. Vous avez toutes les informations dont vous avez besoin sur votre jeu stockées dans votre tableau 2D pour que ces fonctions fonctionnent. C'est UNIQUEMENT lorsque quelque chose doit être physiquement modifié que votre application dit au DOM: "Hé, ajoutez un jeton jaune à cet endroit" et ainsi de suite.
Ensuite, bien sûr, ces fonctions créées différemment. Ces fonctions peuvent être mappées à votre DOM en attachant un gestionnaire d'événements, etc ... mais j'espère que vous comprenez.
Bien que vous puissiez faire quelque chose pour déterminer la position d'une cellule donnée dans la ligne et la position de la ligne dans le tableau (par exemple, lorsque vous cliquez sur un TD ou autre), le moyen le plus simple est probablement de construire réellement les données dans la table.
Par exemple, si votre tableau HTML ressemble à:
<tr data-row='1'><td data-column='1'> </td><!-- rest of the cells --></tr>
Il devient assez simple d'utiliser jquery ou similaire pour trouver la bonne position qui correspond aux informations du tableau. Pour cette question, si chaque cellule a un numéro unique (comme le suggère votre exemple), vous pouvez même simplement stocker ces informations dans chaque TD sous la forme data-position = "12" ou similaire et effectuer la requête encore plus facile.
Dans jquery, vous pouvez simplement utiliser $ ('td [data-position = 12]') pour saisir directement l'élément.
par requête @Alireza Fattahi
https://jsfiddle.net/lgehrig4/thg468ex/ a>
ce que mon code accomplit jusqu'à présent 1. visuels (arrière-plan, plateau de jeu, jetons) 2. Saisissez les noms des joueurs (2 joueurs uniquement. Pas contre l'ordinateur) 3. Choisit au hasard un joueur pour commencer 4. Peut faire glisser et déposer des jetons sur le tableau
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Connect Four</title> <link rel="stylesheet" type="text/css" href="connect.css"> </head> <body> <!-- Banner --> <div id="banner"> </div> <!-- Player One's name and score --> <div id="playerOne"> <div id="yellowPlayer"></div> <!-- <input id="yellowPlayer" type="text" name="playerOneName" maxlength="15" value="Player One Name"> --> <h3>WINS</h3> <div id="playerOneWins"> </div> </div> <!-- Player Two's name and score --> <div id="playerTwo"> <div id="redPlayer"></div> <!-- <input id="redPlayer" type="text" name="playerTwoName" maxlength="15" value="Player Two Name"> --> <h3>WINS</h3> <div id="playerTwoWins"> </div> </div> <!-- New Game / --> <button id="btn" onclick="setStart()">New Game</button> <!--Main Board --> <div id="game"> <table id="gameBoard"> <tr id="row1"> <td id="1"></td> <td id="2"></td> <td id="3"></td> <td id="4"></td> <td id="5"></td> <td id="6"></td> <td id="7"></td> </tr> <tr id="row2"> <td id="8"></td> <td id="9"></td> <td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13"></td> <td id="14"></td> </tr> <tr id="row3"> <td id="15"></td> <td id="16"></td> <td id="17"></td> <td id="18"></td> <td id="19"></td> <td id="20"></td> <td id="21"></td> </tr> <tr id="row4"> <td id="22"></td> <td id="23"></td> <td id="24"></td> <td id="25"></td> <td id="26"></td> <td id="27"></td> <td id="28"></td> </tr> <tr id="row5"> <td id="29"></td> <td id="30"></td> <td id="31"></td> <td id="32"></td> <td id="33"></td> <td id="34"></td> <td id="35"></td> </tr> <tr id="row6"> <td id="36"></td> <td id="37"></td> <td id="38"></td> <td id="39"></td> <td id="40"></td> <td id="41"></td> <td id="42"></td> </tr> </table> <!-- Mouse Down / Mouse Up event --> <div id="yellow"> <img src="img/yellow.png" id="yellowToken1" class="image" draggable="true"> </div> <div id="red"> <img src="img/red.png" id="redToken1" class="image" draggable="true" > </div> </div> <!-- ondrop="dragDrop(event)" ondragover="allowDrop(event)" --> <script src="connect.js"></script> </body> </html>
* {
margin: 0;
padding: 0;
}
body {
background: url("img/table.jpg") no-repeat;
background-size: cover;
background-position: bottom;
}
#game {
background: url("img/background1.png");
position: relative;
width: 700px;
height: 700px;
margin-left: 260px;
margin-top: 120px;
/*z-index: -1;*/
}
table {
position: absolute;
right: 117px;
top: 120px;
border-spacing: 0px;
z-index: 2;
}
td {
width: 66px;
height: 59px;
text-align: center;
}
#yellow {
position: absolute;
width: 50px;
height: 50px;
left: 220px;
top: 520px;
z-index: 3;
}
#red {
position: absolute;
width: 130px;
height: 50px;
left: 341px;
top: 520px;
z-index: 3;
}
.image {
position: relative;
width: 50px;
height: 50px;
}
button {
position: relative;
width: 200px;
height: 50px;
left: 1100px;
top: 700px;
border: 2px solid black;
border-radius: 15px;
background-color: green;
color: white;
font-family: monospace;
font-weight: bold;
font-size: 2em;
text-transform: uppercase;
}
button:hover {
background-color: lightgreen;
color: black;
}
/*player one div*/
#playerOne {
position: relative;
width: 165px;
height: 110px;
left: 1120px;
top: 475px;
}
/*player two div*/
#playerTwo {
position: relative;
width: 165px;
height: 110px;
left: 1120px;
top: 510px;
}
/*player one name*/
#yellowPlayer {
width: 160px;
height: 25px;
background-color: yellow;
border: 2px solid black;
border-radius: 15px;
text-align: center;
text-transform: uppercase;
font-family: monospace;
font-size: 15px;
}
/*player two name*/
#redPlayer {
width: 160px;
height: 25px;
background-color: red;
border: 2px solid black;
border-radius: 15px;
text-align: center;
text-transform: uppercase;
font-family: monospace;
font-size: 15px;
}
h3 {
text-align: center;
}
#playerOneWins {
width: 50px;
height: 50px;
border: 2px solid black;
border-radius: 50px;
margin: auto;
}
#playerTwoWins {
width: 50px;
height: 50px;
border: 2px solid black;
border-radius: 50px;
margin: auto;
}
//SETUP
var button = document.getElementById("setStart");
var gameActive = false;
//GRAB PLAYER NAMES / CHOOSE FIRST MOVE /RESET BOARD
function setStart() {
if (gameActive == false) {
playerOne = prompt("Player One(yellow) please enter your name");
playerTwo = prompt("Player Two(red) please enter your name");
document.getElementById("yellowPlayer").innerHTML = playerOne;
document.getElementById("redPlayer").innerHTML = playerTwo;
gameActive = true;
}
players = [playerOne, playerTwo];
if (gameActive == true) {
first = Math.floor(Math.random() * 2);
alert(players[first] + " you go first");
}
}
//MOVE TOKENS TO BOARD
var dragYellow = document.getElementById('yellowToken1');
var dragRed = document.getElementById('redToken1');
var dropLoc = [];
function locOnDrop(e) {
e.preventDefault();
e.currentTarget.appendChild(
document.createElement('img')
).src = document.getElementById(
e.dataTransfer.getData('key')
).src;
}
gameGrid = [ [1, 2, 3, 4, 5, 6, 7],
[8, 9, 10, 11, 12, 13, 14],
[15, 16, 17, 18, 19, 20, 21],
[22, 23, 24, 25, 26, 27, 28],
[29, 30, 31, 32, 33, 34, 35],
[36, 37, 38, 39, 40, 41, 42],
];
for(var i = 0; i < gameGrid.length; i++){
for(var j = 0; j < gameGrid[i].length; j++){
dropLoc[gameGrid[i][j]] = document.getElementById(gameGrid[i][j].toString());
dropLoc[gameGrid[i][j]].ondrop = locOnDrop;
dropLoc[gameGrid[i][j]].ondragover = function(e) {
e.preventDefault();
}
}
}
dragYellow.ondragstart = function(evt) {
evt.dataTransfer.setData('key', 'yellowToken1');
dragRed.ondragstart = function(evt) {
evt.dataTransfer.setData('key', 'redToken1');
}
Modifiez votre question et ajoutez-y le html au lieu d'envoyer une réponse
Pouvez-vous nous donner un exemple de travail complet?
Je ne sais pas comment je ferais cela. Les images d'arrière-plan, de plateau de jeu et de jetons sont enregistrées sur mon ordinateur. Je peux également publier les fichiers HTML et CSS si cela aide?
voici le HTML
@JeffS pour obtenir la meilleure réponse ici, essayez d'ajouter votre code à jsfiddle.net ou codepen.io . Ensuite, liez votre code ici. Comme votre projet est html + js + css, vous n'aurez aucun problème. Les gens peuvent vous aider beaucoup plus lorsqu'ils peuvent voir et exécuter votre code