Masquer le contenu pour éviter de tricher dans le jeu JavaScript

Je sais qu'il est impossible d'empêcher complètement les utilisateurs de tricher et/ou de fendre une application Web, mais ce trou est si facile à trouver qu'il devrait être branché.Masquer le contenu pour éviter de tricher dans le jeu JavaScript

https://mcthompsonatl.github.io/

Je ne fait pas de code tout cela. On m'a donné ce très basique "trouver tous les 6 objets" (dans ce cas, les clés) devinant le jeu qu'un ancien employé, qui n'était pas un programmeur par métier, a écrit pour une promotion pour un de nos clients. La logique est saine, et il faut un peu de mise en forme, mais en testant en mode développeur, il m'a fallu très peu de temps pour trouver que le jeu peut facilement être gagné simplement en inspectant chaque <div> de la classe card. Parce que cela est utilisé pour un concours promotionnel, j'ai essayé de trouver un moyen de masquer ou de changer le code de jeu à l'endroit où inspecter l'une des cartes en mode développeur ne révèle aucun indice.

La seule solution que j'ai pu trouver consistait à changer les éléments de la carte en plusieurs éléments HTML5 Canvas. Les deux problèmes avec cela est 1. Je n'ai aucune expérience de travail avec Canvas et 2. Même si je l'ai fait, cela semble être une tâche extrêmement longue et douloureuse, et je ne suis pas sûr si je vais avoir le temps je ' d besoin d'apprendre juste assez pour remédier au problème. Est-ce quelque chose qui peut être caché avec PHP? Je suis un peu perplexe ici pour trouver une solution raisonnable. Toute aide est appréciée.

Source

2017-07-19 mthomp81

Je suggère de faire un appel de procédure à distance chaque fois que l'utilisateur interagit avec une carte, que ce soit avec ajax ou sur websockets. Rien n'empêche les utilisateurs d'inspecter le code côté client; alors gardez ce côté serveur d'information jusqu'à ce que ce soit nécessaire. –

Actuellement votre jeu est similaire à un ticket de loterie à gratter où les valeurs réelles sont prédéterminées mais cachées. Idéalement, vous ferez quelque chose comme @DaveSnyder recommande, un clic génère un appel à un serveur qui vous dit ce qu'il y a derrière la carte, et ensuite vous l'affichez.Cependant, une approche js-only plus basique pourrait être de donner à chaque carré cliqué un pourcentage de chances d'avoir un gagnant derrière lui, qui n'est pas déterminé jusqu'à ce qu'il soit cliqué. Cela a ses propres défauts, car signaler une victoire au serveur est encore facilement usurpable (contournant complètement le jeu). – James

Utilisez-vous jquery? Je travaille sur quelque chose et je veux savoir si vous l'utilisez afin que je puisse l'utiliser dans ma solution. – MJoraid

Trop long pour un commentaire. D'après ce que j'ai compris du jeu.

Vous avez 36 cases, vous devez cliquer sur des cases aléatoires. Si vous cliquez sur le nombre X des bonnes cases, vous gagnez.

J'ai été capable de tricher en inspectant le code HTML et en recherchant l'image qui indique la clé gagnante. Le nom de l'image était images/keytowin/frontImage.png

Une solution peut être de ne pas pré-affecter l'image qui indique un choix "correct" à la div HTML. Au lieu de cela, affectez l'image uniquement après avoir cliqué dessus. Cela rendra plus difficile à trouver puisque le HTML seul ne le donnera pas.

L'idée ici est Random. En utilisant Javascript, générez 3 nombres aléatoires entre 1 et 36. Ces trois nombres aléatoires indiquent les cases gagnantes. Si l'utilisateur clique sur une case, et qu'il a le même numéro (j'ai remarqué que les div sont numérotés data-id="1"), alors utilisez JS pour ajouter une image à la div interne à la volée.

Les trois nombres aléatoires, cependant, seront déterminés au début de la partie. Par conséquent, obscurcir les variables est important.

J'ai fourni un exemple de code pour illustrer le concept.

var luckyNumbers = getUniqueNumbers(); 
 
var winImg = "<img src='https://mcthompsonatl.github.io/images/keytowin/frontImage.png' alt='X LOGO'>"; 
 
var loseImg = "<img src='https://mcthompsonatl.github.io/images/keytowin/TryAgain.png' alt='X LOGO'>"; 
 

 
console.log(luckyNumbers); 
 

 
$(".card").on("click", function() { 
 

 
    if (!$(this).hasClass("clicked")) { 
 
    $(this).addClass("clicked"); 
 

 
    selected = Number($(this).attr("data-id")); 
 
    if (luckyNumbers.indexOf(selected) > -1) { 
 
     //code to put a key image  
 
     $(this).find(".back").append(winImg); 
 
    } else { 
 
     console.log("wrong: " + selected); 
 
     //code to put not-winning image  
 
     $(this).find(".back").append(loseImg); 
 
    } 
 

 
    } 
 

 
}); 
 

 

 

 
function getUniqueNumbers() { 
 
    var arr = [] 
 
    while (arr.length < 3) { 
 
    var someRand = Math.ceil(Math.random() * 36) 
 
    if (arr.indexOf(someRand) > -1) continue; 
 
    arr[arr.length] = someRand; 
 
    } 
 
    return arr; 
 
}

img { 
 
    width: 50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta content="width=device-width" name="viewport"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="game"> 
 

 

 
    <div class="card" data-id="5"> 
 
     <div class="inside"> 
 
     <div class="front"> 
 
      <img src="image/someimage.jpg" alt="keytowin"> 
 
     </div> 
 
     <div class="back"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card" data-id="6"> 
 
     <div class="inside"> 
 
     <div class="front"> 
 
      <img src="image/someimage.jpg" alt="keytowin"> 
 
     </div> 
 
     <div class="back"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="card" data-id="7"> 
 
     <div class="inside"> 
 
     <div class="front"> 
 
      <img src="image/someimage.jpg" alt="keytowin"> 
 
     </div> 
 
     <div class="back"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js"> 
 
    </script> 
 
</body> 
 

 
</html>

Source

2017-07-19 22:27:34 MJoraid

Merci, je suis juste en train de me débrouiller, mais ce projet a été mis sur le backburner (pas mon appel). Cependant, je projette sur un projet personnel pour un jeu de correspondance de mémoire qui est assez semblable, et il semble être une très bonne solution. – mthomp81

@ mthomp81 ce genre de choses m'intéresse en fait. Voulez-vous travailler ensemble? – MJoraid

Masquer le contenu pour éviter de tricher dans le jeu JavaScript

Répondre

Questions connexes