Remplacer une couleur de fond par une image

chriszabeille Messages postés 4 Date d'inscription lundi 5 janvier 2015 Statut Membre Dernière intervention 19 janvier 2015 - 5 janv. 2015 à 09:59
chriszabeille Messages postés 4 Date d'inscription lundi 5 janvier 2015 Statut Membre Dernière intervention 19 janvier 2015 - 19 janv. 2015 à 11:28
Bonjour à tous,
J'ai réaliser un petit jeux de bimaru que vous pouvez voir ici : http://informatique.zabeille.org/
La partie tirage au sort de la grille est réalisée en php.
Pour ce qui concerne la coloration des cases, l'affichage de la solution et l'annonce de la partie résolue est en javascript.
Je cherche désespérément une solution pour remplacer les cases grise, représentant une case d'un bateau, par une petite image (avec l'arrondi en haut, ou en bas, ou à gauche, ou à droite, ou un carre noir si c'est dans le corps du bateau. Un rond si c'est un bateau d'une case) lorsque le bateau est totalement entouré d'eau ou que les 3 côtés sont bleu si on est dans un bord.
Cette action doit se produire même si la solution proposée par le joueur est fausse
J'ai fait de nombreux essai en partant de la var solutionJoueur (visible dans la console) mais je n'arrive à rien.
Une dernière chose, avant de me lancer dans la réalisation de ce jeux, j'étais tout juste capable de colorer une ligne sur deux avec jquery... Alors ne tapez pas trop fort. ;-)
Merci d'avance à ceux qui prendront la peine de me lire et de me donner un coup de main.

3 réponses

cgandco Messages postés 219 Date d'inscription mercredi 26 octobre 2011 Statut Membre Dernière intervention 22 juin 2017 9
5 janv. 2015 à 16:35
Bonjour,

pour moi le plus facile est de créer une image qui contient tous les images possible (vide , rond , carré ,...)
de placer un ID pour chaque TD par exemple CASE11, CASE12, Caselignecolonne

de créer une collection pour y enregister l'indice du dessin affiché dans chaque case avec la clef = id de la case. par exemple MyCollection[ID]=0 = vide, 1 = rond , ...)

et a chaque clic récupérer l'id de la case, récupérer l'indice de l'image, et l'incrémenter, ensuite modifier le style background-position pour voir la partie de l'image pour ton indice (taille de l'image * taille de la case

avec l'avantage que ton image n'est chargée qu'une fois.



bonne journée
0
chriszabeille Messages postés 4 Date d'inscription lundi 5 janvier 2015 Statut Membre Dernière intervention 19 janvier 2015
6 janv. 2015 à 16:35
Merci cgandco, l'idée des sprites et bonnes je n'y avais pas pensé. Je verrai cela lorsque la "mécanique" du jeux sera au point. Mais pour le moment j'aimerais vraiment me concentrer sur ce problème qui consiste à changer la couleur grise en une image seulement quand le bateau est entouré... Et inversement. Si le joueur change sa solution remettre la couleur grise à la place de l'image
0
chriszabeille Messages postés 4 Date d'inscription lundi 5 janvier 2015 Statut Membre Dernière intervention 19 janvier 2015
Modifié par chriszabeille le 7/01/2015 à 14:46
après de multiple tentative. C'est toujours le néant :-)
La seule piste que j'aie est p'têtre que si je parviens à trier un tableau qui resemble à ça:
[1, 3, 4, 8, 10, 11, 21, 27, 28, 30,31, 43, 43, 45, 71, 73, 74, 75, 80, 81, 90, 91]

et à le transformer en
[[1, 11, 21,31] [3, 4] [8] [10] [27, 28] [30] [43,44,45] [71] [73, 74, 75] [80,90] [81, 91]]

La première séquence 1,11,21,31 représente un bateau vertical. la suivante 3,4 un bateau horizontal.
Je pourrais avancer dans la résolution de mon problème
0
cgandco Messages postés 219 Date d'inscription mercredi 26 octobre 2011 Statut Membre Dernière intervention 22 juin 2017 9
15 janv. 2015 à 13:53
Bonjour,

J'ai travaillé un peu sur ton problème, pour moi en javascript il faut avant de mettre en place le remplacement couleur => "image" ou l'inverse, empêcher le joueur de placer des "gris" si un gris ou une image est déjà présente sur un de ses angles (une des règles du jeu). et également l'empêcher si un des adjacents est placé d'office au départ et est une fin de bateau.

dans ces conditions, l'analyse des transformation à faire sera plus facile. plus besoin de vérifier si les gris sont bien placés par rapport à la règle, et pas de bateau en coin.

je reviens vers toi dés que possible avec un peu de code.
0
chriszabeille Messages postés 4 Date d'inscription lundi 5 janvier 2015 Statut Membre Dernière intervention 19 janvier 2015
Modifié par chriszabeille le 19/01/2015 à 11:30
merci de continuer à cogiter ;-)
Mais le joueur doit pouvoir faire des erreurs Hi!Hi!Hi!
De mon côté j'ai réaliser un script de test avec un tableau fictif == soluce qui me donne satisfaction, mais maintenant je dois l'intégrer au script de base et je vais développer cela ces prochains jours. Je te mets ma tartine :-))
function lignee(param){
var lig=Math.ceil(param/10);

return lig;
}
function colonne(param){
var colonne=Math.ceil(param%10);
colonne = (colonne===0) ?10 :colonne;

return colonne;
}

//--- retourne un bateau vertical
function bateauV(){
var lebateau = [];
for(i=0;i<5;i++){
if(lesGris.indexOf(premierGris+(i*10)) !== -1){
// var longB=lebateau.length;
if(i==0 || premierGris+(i*10)-lebateau[lebateau.length-1] === 10 ) {
lebateau.push(premierGris+(i*10));
}
}
}
return lebateau;
}//--- fin fn

//--- retourne un bateau horizontal !!!!!!!!!!!!!!!!!!!!!!!! cela ne fonctione pas dans tpus les cas
function bateauH(){
var lebateau = [];
var lignePrim = lignee(premierGris);

for(i=0;i<5;i++){
var ligneSuivante = lignee(premierGris+i);

if(lesGris.indexOf(premierGris+i) !== -1 && lignePrim==ligneSuivante){
// var longB=lebateau.length;
if(i==0 || premierGris+i-lebateau[lebateau.length-1] === 1 ) {
lebateau.push(premierGris+i);
}
}
}

return lebateau;
}//--- fin fn

function bateauUn(){
var lebateau = [premierGris];
return lebateau;
}
//--- Je transforme la nouvelle solution du joueur en tableau multidimetionnel
//--- je crée une copie pour garder la solution du joueur intact pour les verifs de partie gagnée
function soluceMod(){
var solReduit=soluce;
var tabMulti=new Array();
var t=0;
for(i=0;i<10;i++){
tabMulti[i]=new Array;
for(j=0;j<10;j++){
tabMulti[i][j] = solReduit[t];
t++;
}
}

return tabMulti;
}
//--- je crée une copie pour garder la solution du joueur intact pour les verifs de partie gagnée
//--- j'enlève la première valeur de la solution du joueur elle complique la vie pour apès
//--- on récupère les gris
function tabGris(){
var solGris=soluce;
solGris.shift();
var lesGris= [];
for(i=0;i<solGris.length;i++){
if(solGris[i]==='gris'){
lesGris.push(i+1);
}
}

return lesGris;
}
//--- verifie la ou les cases de droite
//!!!!! il faut enlever 1 pour cibler la bonne colonne ou la bonne ligne
//--- pour verifier la case de droite utile dans le cas d'un bateau horizontal
//--- on passe un entier(la longueur du bateau)
//--- pour verifier toutes les case de droite dans le cas d'un bateau vertical
//--- on passe une array(toutes les cases du bateau)
function verifCaseDroite(longBateau){
var soluceMulti=soluceMod();
if(!isNaN(longBateau)){
//pour gerer un bateau qui commence à l'avant dernière colonne
if((col-1)+longBateau-1!==9){
if(soluceMulti[lig-1][(col-1)+longBateau] !== 'bleu'){
return false;
}
}
}else{
// si on passe une array en paramètre
for(i=0;i<leBateau.length;i++){
//--- si une case est indéfinie cela met fin à la fonction
if(soluceMulti[(lig-1)+i][col] !== 'bleu'){
return false;
}
}
}
//--- si toute la ou les cases de droite sont 'bleu' la fonction retourne vrai
return true;
}//--- fin fn

//--- verifie la ou les cases de droite
//!!!!! il faut enlever 1 pour cibler la bonne colonne ou la bonne ligne
//--- pour verifier la case de droite utile dans le cas d'un bateau horizontal
//--- on passe un entier(la longueur du bateau)
//--- pour verifier toutes les case de droite dans le cas d'un bateau vertical
//--- on passe une array(toutes les case du bateau)
function verifCaseGauche(longBateau){
var soluceMulti=soluceMod();
// console.log(longBateau);
if(!isNaN(longBateau)){
if(soluceMulti[lig-1][col-2] !== 'bleu'){
return false;
}
}else{
// si on passe une array en paramètre
for(i=0;i<leBateau.length;i++){
//--- si une case est indéfinie cela mais fin à la fonction
if(soluceMulti[(lig-1)+i][col-2] !== 'bleu' ){
return false;
}
}
}
//--- si toute la ou les cases de droite sont 'bleu' la fonction retourne vrai
return true;
}//--- fin fn

//--- verifie la ou les cases du bas
//!!!!! il faut enlever 1 pour cibler la bonne colonne ou la bonne ligne
//--- pour verifier la case de bas utile dans le cas d'un bateau vertical
//--- on passe un entier(la longueur du bateau)
//--- pour verifier toutes les case du bas dans le cas d'un bateau horizontal
//--- on passe une array(toutes les cases du bateau)
function verifCaseBas(longBateau){
var soluceMulti=soluceMod();
if(!isNaN(longBateau)){
if((lig-1)+longBateau-1!==9){
if(soluceMulti[(lig-1)+longBateau][col-1] !== 'bleu'){
return false;
}
}
}else{
// si on passe une array en paramètre
for(i=0;i<leBateau.length;i++){
if(soluceMulti[lig][(col-1)+i] !== 'bleu'){
return false;
}
}
}
//--- si toute la ou les cases du bas sont 'bleu' la fonction retourne vrai
return true;
}//--- fin fn

//--- verifie la ou les cases du haut
//!!!!! il faut enlever 1 pour cibler la bonne colonne ou la bonne ligne
//--- pour verifier la case de haut utile dans le cas d'un bateau vertical
//--- on passe un entier(la longueur du bateau)
//--- pour verifier toutes les case du haut dans le cas d'un bateau horizontal
//--- on passe une array(toutes les cases du bateau)
function verifCaseHaut(longBateau){
var soluceMulti=soluceMod();
if(!isNaN(longBateau)){
if(soluceMulti[lig-2][col-1] !== 'bleu'){
return false;
}
}else{
// si on passe une array en paramètre
for(i=0;i<leBateau.length;i++){
if(soluceMulti[lig-2][(col-1)+i] !== 'bleu'){
return false;
}
}
}
//--- si toute la ou les cases du bas sont 'bleu' la fonction retourne vrai
return true;
}//--- fin fn

var soluce = ["bleu", "gris","bleu","bleu","gris","gris","gris","bleu","bleu","gris","bleu",
"bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu",
"bleu","bleu","bleu","bleu","gris","bleu","bleu","bleu","gris","gris",
"bleu","bleu","bleu","bleu","gris","bleu","bleu","bleu","bleu","bleu",
"gris","bleu","gris","bleu",undefined,"bleu","bleu",undefined,"bleu","bleu",
"bleu","bleu","bleu","bleu",undefined,"bleu","bleu",undefined,"bleu",undefined,
"bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu","bleu",
"bleu","bleu","bleu","bleu","gris","bleu","gris","bleu","bleu","bleu",
"gris","bleu","bleu","bleu","bleu","bleu","bleu","bleu","gris","bleu",
"gris","bleu","gris","gris","bleu",undefined,"bleu","bleu","bleu","bleu"];

var lesGris=tabGris();
//console.log(lesGris);

//---pour dev j'utilise ce système mais par la suite je pense utiliser shift
//---qui retire le premier élement du tableau et grisSuivant devient lesGris[0]
//for(i=0;i<lesGris.length;i++){
var test=lesGris.indexOf(25);
var test1=test+1;
var premierGris=lesGris[test];
var grisSuivant=lesGris[test1];
//console.log(premierGris);
//console.log(grisSuivant);

//--- j'extrais le coordonées du premierGris
var lig = lignee(lesGris[test]);
var col = colonne(lesGris[test]);

//console.log(lig +'li');
//console.log(col +'co');
//------------------------------------------coin gauche haut
if(lig===1 && col === 1){
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite du bateau est bleu puis les cases en dessous
if(verifCaseDroite(leBateau.length) && verifCaseBas(leBateau)){
console.log(leBateau+' bateau horizontal');
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonnes');
}
}//--- Fin du bateau horizontal
//------------------------------------------------------bateau vertical
else if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//--- Si le control de la case en dessous du bateau est ok
//--- on control chaque case de droite
if(verifCaseBas(leBateau.length) && verifCaseDroite(leBateau) ){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}
}//--- Fin du bateau vertical
//------------------------------------------------------bateau d'une case
else{
var leBateau = bateauUn();
//--- On vérifie la case du bas et la case de droite
if(verifCaseBas(leBateau.length) && verifCaseDroite(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin coin gauche haut
//------------------------------------------coin droite haut
else if(lig === 1 && col === 10){
//------------------------------------------------------bateau vertical
if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//---On vérifie si la case en dessous du bateau est bleu
//---puis on control chaque case de droite
if(verifCaseBas(leBateau.length) && verifCaseGauche(leBateau)){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}
}//--- Fin du bateau vertical
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseBas(leBateau.length) && verifCaseGauche(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- fin coin droite haut
//------------------------------------------coin gauche bas
else if(lig === 10 && col === 1){
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite du bateau est bleu
//---puis on control chaque case en dessous du bateau
if(verifCaseDroite(leBateau.length) && verifCaseHaut(leBateau)){
console.log(leBateau+' bateau horizontal')
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonne');
}
}
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseDroite(leBateau.length) && verifCaseHaut(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//---Fin du coin gauche bas
//------------------------------------------coin droite bas
else if(lig===10 && col === 10){
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseGauche(leBateau.length) && verifCaseHaut(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin du coin droite bas
//------------------------------------------bord haut
else if(lig === 1 && col >1 && col < 10){
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite du bateau est bleu
//---puis on control chaque case en dessous du bateau
if( verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length)
&& verifCaseBas(leBateau)){
console.log(leBateau+' bateau horizontal')
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonne');
}
}
//------------------------------------------------------bateau vertical
else if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//---On vérifie si la case en dessous du bateau est bleu
//---puis on control chaque case de droite et de gauche
if(verifCaseBas(leBateau.length) && verifCaseDroite(leBateau) && verifCaseGauche(leBateau)){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}
}//--- Fin du bateau vertical
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
//--- on verifie la case du bas puis droite puis gauche
if(verifCaseBas(leBateau.length) && verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin du bord haut
//------------------------------------------bord bas
else if(lig==10 && col>1 && col <10){
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite et de gauche du bateau sont bleu
//---puis on vérifie chaque case en dessus du bateau
if(verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length) && verifCaseHaut(leBateau)){
console.log(leBateau+' bateau horizontal')
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonne');
}
}
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseHaut(leBateau) && verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin du bord bas
//------------------------------------------bord gauche
else if(col === 1 && lig >1 && lig<10){
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite du bateau est bleu
//---puis on vérifie les cases du bas et du haut
if(verifCaseDroite(leBateau.length) && verifCaseBas(leBateau) && verifCaseHaut(leBateau)){
console.log(leBateau+' bateau horizontal')
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonne');
}
}
//------------------------------------------------------bateau vertical
else if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//---On vérifie si la case en dessous et en dessus du bateau sont bleu
//---puis on control chaque case de droite
if(verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length) && verifCaseDroite(leBateau)){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}
}//--- Fin du bateau vertical
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length) && verifCaseDroite(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin du bord gauche
//------------------------------------------bord droite
else if(col === 10 && lig > 1 && lig<10){
//------------------------------------------------------bateau vertical
if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//---On vérifie si la case en dessous et en dessus du bateau sont bleu
//---puis on control les cases de gauche
if(verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length) && verifCaseGauche(leBateau) ){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}

}//--- Fin du bateau vertical
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if(verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length) && verifCaseGauche(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin du bord droite
//------------------------------------------toutes les autres poisitions
else{
//------------------------------------------------------bateau horizontal
if(grisSuivant-premierGris === 1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauH();
//---On vérifie si la case a droite et de gauche sont bleu
//---puis toutes les cases en dessous et en dessus du bateau
if( verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length)
&& verifCaseBas(leBateau) && verifCaseHaut(leBateau)){
console.log(leBateau+' bateau horizontal');
}else{
console.log('les cases autour d\'un bateau horizontal ne sont pas bonne');
}
}
//------------------------------------------------------bateau vertical
else if(lesGris.indexOf(premierGris+10) !== -1){
//---Reuni les case qui constituent un bateau
var leBateau = bateauV();
//---On control la cases du haut et la case du bas
//---puis toutes les cases de droite et de gauche
if( verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length)
&& verifCaseDroite(leBateau) && verifCaseGauche(leBateau)){
console.log(leBateau + ' bateau vertical');
}else{
console.log('les cases autour d\'un bateau vertical ne sont pas bonne');
}
}//--- Fin du bateau vertical
else{
//------------------------------------------------------bateau d'une case
var leBateau = bateauUn();
if( verifCaseBas(leBateau.length) && verifCaseHaut(leBateau.length) &&
verifCaseDroite(leBateau.length) && verifCaseGauche(leBateau.length)){
console.log(leBateau+' un');
}else{
console.log('le bateau de un n\'est pas entouré');
}
}//--- Fin bateau d'une case
}//--- Fin des autres positions
0
Rejoignez-nous