Question

i already gone through other web game cheating question on this forum but i did not get answer for my problem that’s why i am posting it under a similar title.

Here is the issue:

i am developing a web -based game in which three similar boxes are shown on the web page by using simple html.

<img src="box.jpg" />
<img src="box.jpg" />
<img src="box.jpg" />

now with use of jquery.path plugin i am rotating these boxes on random path and as per game requirements at the end of the animation a user need to identify the position of the middle box by clicking on of the three boxes.

but if a user using firebug or chrome web developer tools then by just inspecting the dom’s elements he/she can easily identify the position of the middle box.

so please give me suggestion to resolve this issue.

P.S.

i am mainly using simple jquery animations because i want to make game compatible to older browser also,so is it better to use canvas or css3 animation in my situation?will they resolve this kind of cheating issue?

Answer 1

try considering the use if javascript closures. Although it can be tracked by a JS debugger, learning to use the debugger would be a higher level knowledge than just peering into the source or the DOM tree.

build an object that has a private scope. using that object, create the 3 images you need. assign these 3 images to 3 private variables in that object. only that object knows which image is which. you don’t even need to give them distinction in it’s attributes since you can track them in the object using those 3 private variables.

In my example, i’m using the $.data() which is viewable. although they can know the ID of the box, they don’t know the value of the target variable inside the closure.

consider randomizing the target value instead and place whatever box that has that value in the middle. that way, they won’t be tracking, the same box all the time.

var game = (function(){

    //set which box is the target
    //they will never know this value
    //i sugest including this in randomizing
    var target = 1;

    //storage variable for the boxes
    var boxes = {};

    //retrieve data stored and check with target
    var check = function(element){
        var boxID = $(element).data('boxID');

        //check if a match
        if(boxID === target){
            alert('got me!');
        } else {
            alert('not me!!!');
        }

    }

    //create 3 boxes and store them in boxes object
    for(var i = 0; i < 3 ; i++){

         //create box HTML and store it in a variable
         //notice that all boxes will have this very same HTML
         var box = $('<img src="box.jpg" />');

         //store the box identifier using $.data()
         //at least in this manner, you are not storing 
         //the id as an attribute
         box.data('boxID',i);

         //if your plugin looks like "element.path()"
         //plug it to every box created
         box.path({
             options:value....
         });

         //add handler for checking
         box.on('click',function(){
             check(this);
         });

         //store in the private variable
         boxes['box'+ i] = box

         //append box to the display, in this case, the body.
         $('body').append(box);
    }

    //your "pathing" function
    var randomize = function(){
        //do your random path stuff here
        //access boxes using: boxes.box1, boxes.box2 and so on...
        //they are jQuery objects already so you can use jQuery functions on them
    };

    //return public accessible methods and functions
    return {
        randomize : randomize //expose the randomize function
    }

}());

after this, just call game.randomize() to do your path stuff (since only randomize is available publicly in the code)

tried logging the game object as well as the divs, no sign of the real target.