jquery game looping logic

Question

1.00/5 (1 vote)

See more:

Hey everyone I wrote this code this picks a random value like shown and then accordinly adds a class to that specific element. Now when the user clicks that element the class that was added gets removed (the score counter increases by '1') and the program goes back to the start and picking a random number and assigning the class. The code for this has been written below, but I am not able to loop loop the game. After the user click the forst element the whole mechanism does not repeat well and nor does the score increase. What should I do?

JavaScript

$(document).ready(function start(){

  var items = Array(11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44);
  var random = items[Math.floor(Math.random()*items.length)];
  $('.c'+random).addClass('mole');


	$("body").click(function(e) {
    	    if ($(e.target).hasClass("sq-color")) 
        	{ 
            	if ($(e.target).hasClass("mole")) 
        		{ 
            		hit.playclip();
            		$('.c'+random).removeClass('mole');
            		
            		var scoreCounter = $("b[id=show-score]").html();
                    var updateScore = eval(scoreCounter)+ eval(1);
                    $("b[id=show-score]").html(updateScore);
            		
        		}	 
        		else
        		{
            		alert("MISS");
            	}	
        	} 
        
    	});




});

EDIT: bold removed

Posted 10-Nov-12 18:28pm

Member 9589729

Updated 10-Nov-12 23:12pm

enhzflep

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 11-Nov-12 1:05am

There is not a loop in your code, so it's hard to see what's your problem. It looks like you are trying to get away creating no functions at all; are you serious?
--SA

Member 9589729 11-Nov-12 1:45am

Please view line #18. I did this to loop the function. But it does not work. Instead it calls the function the second time but on clicking the element in the second instance the class 'mole' gets added to 3 elements. These increases to 5 in the next instance. I dont know how else I can loop this code and get my scoring to take place correctly.

$(document).ready(function start(){
[Rest of the code removed; OP should use "Improve question" instead -- SA]
...

Sergey Alexandrovich Kryukov 11-Nov-12 1:58am

Excuse me, do you think I should count your lines to see what you are talking about? Ever heard of such feature as code comment?
Thank you,
--SA

enhzflep 11-Nov-12 5:17am

:-D :grins:
I think that perhaps "eval(1)" says it all?

Sergey Alexandrovich Kryukov 11-Nov-12 12:19pm

What have you done?! I was trying hard to avoid looking at it. And what should I do now? Memory bleach? How can I unsee it? :-)
And this is not just being a beginner. This is the attitude: have no idea what to write but still writing.
--SA

enhzflep 11-Nov-12 12:49pm

Hehe hehe hehe. Laughs and runs for cover.
Can't disagree with anything there. But, if it's the start of a new, better approach by 958729, then I guess something's been gained. Whether or not it was worth permanent retina/cornea damage is another matter. :runs away chuckling: - Personally, I think that one should get their JavaScript 'license' before being permitted to use jQuery. I see car-wrecks like this all the time at StackOverflow.

Sergey Alexandrovich Kryukov 11-Nov-12 22:40pm

The only problem here is the lack of possibility to arrest for driving without a license... :-)
--SA

enhzflep 11-Nov-12 22:43pm

Yup, that and working out how I'm going to explain to everyone here what I just found so hilarious. :~)

Member 9589729 11-Nov-12 10:04am

Well I am sorry. But I am new to all this. I just wanted to let you know that I did try looping the code myself but it did not work. Hence I needed to know how I could fix my code. I really want to do this right. Been struggling with my code, and now I really do't know what I should do next to get it to work the way I want it to. If you can let me know anything that you believe would aid me in this that would be great.

Sergey Alexandrovich Kryukov 11-Nov-12 12:18pm

Just formulate everything in a comprehensive way. Imagine that you are the one who is going to help another member -- what information would you need then? And refer to the lines of code by commenting those lines properly and referring to the comment in the text of the question. And so one. Software developers don't say "did not work", they provide comprehensive issue report.
--SA

Member 9589729 11-Nov-12 21:22pm

I have commented my code. In short I am trying to create a grid based whack a mole game. It is not looping correctly. As the looping is not occurring. Hope my comments help.

Member 9589729 11-Nov-12 21:22pm

[Code removed. A note to OP: please always put all the code the body of the question where it can be properly formatted, use "Improve question" -- SA]

enhzflep 11-Nov-12 22:35pm

You appear not to have noticed, but comments are limited in length. Your code has been truncated in 2 of your 3 comments..

The appropriate place for them is inside the original question. You should edit it and include the pasted code in a single block. Once done, delete the 3 comments.

You're far, _far_ more likely to get a good answer if you do so. Incomplete, non syntax-highlighted code is unfriendly to read. :)

Sergey Alexandrovich Kryukov 11-Nov-12 22:48pm

I removed the code, and would advice to do the same in similar situations. OP has the code anyway, so nobody is to be hurt if you remove excessive code from comments, especially OP's comments.
--SA

Member 9589729 11-Nov-12 23:08pm

Ok. Do you want me to further explain my code. Or rewrite it if its still not clear. Please do let me know. Thanks.

Sergey Alexandrovich Kryukov 11-Nov-12 23:35pm

I'm not sure. Normally, you would need to start with the goals, explain how a game should be played, etc. But the code shows that you are not ready for such tasks. You probably need to understand more of general programming and how Web works, starting from simpler problems. The use of Eval shows that you have no idea on what you are writing. And, for another example, the immediate constant 'mole' should never be repeated in the whole code...
--SA

Member 9589729 11-Nov-12 21:23pm

[Code removed. A note to OP: please always put all the code the body of the question where it can be properly formatted, use "Improve question" -- SA]

Member 9589729 11-Nov-12 21:26pm

[Code removed. A note to OP: please always put all the code the body of the question where it can be properly formatted, use "Improve question" -- SA]

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

deepak.m.shrma · Accepted Answer · 2012-11-11T20:55:00

Watch this code. i think you want to do something like this.

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .score
    {
        background-color: #3399ff;
        color:White;
        width:800px;
        height:200px;
        font-family: 'Comic Sans MS';
        font-size: xx-large;
        font-weight: bold;
        text-align: center;
        margin:0 auto;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 3px solid;
    }
    body
    {
    background-color: #000000;
    }
    .reset
    {
        background-color: #000000;
        color:White;
        font-family: 'Comic Sans MS';
        font-size: xx-large;
        font-weight: bold;
        width:300px;
        height:100px;
        margin:0 auto;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 3px solid;
        text-align:center;
    }
    div img
    {
    width:100px;
    height:100px;
    }

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function start() {
        var random = -1;
        playclip();


        $("body").click(function (e) {
            if (e.target.nodeName.toLowerCase() == "img") {
                var scoreCounter = $("b[id='click-score']").html();
                var updateScore = eval(scoreCounter) + eval(1);
                $("b[id='click-score']").html(updateScore);

            }
            if ($(e.target).hasClass("sq-color")) {
                if ($(e.target).hasClass("mole")) {
                    // hit.playclip(); i dont knw wat method do here.
                    $('.c' + random).removeClass('mole');

                    var scoreCounter = $("b[id='show-score']").html();
                    var updateScore = eval(scoreCounter) + eval(1);
                    $("b[id='show-score']").html(updateScore);
                    $(e.target).animate({ height: 300 }, "slow");
                    $(e.target).animate({ height: 100 }, "slow");
                    $(e.target).animate({ width: 300 }, "slow");
                    $(e.target).animate({ width: 100 }, "slow");
                    playclip();


                }
                else {
                    var scoreCounter = $("b[id='miss-score']").html();
                    var updateScore = eval(scoreCounter) + eval(1);
                    $("b[id='miss-score']").html(updateScore);
                    alert("MISS");
                }
            }
            if ($(e.target).closest("div").hasClass("reset")) {
                $("b[id='show-score']").html(0);
                $("b[id='miss-score']").html(0);
                $("b[id='click-score']").html(0);
            }
        });

        function playclip() {
            var items = Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
            var items2 = items.slice();
            var count = 0;
            $(".container").html("");
            for (count = 0; count < items.length; count++) {
                var myImag = $("<img></img>");
                var myRandom = Math.floor(Math.random() * items2.length);
                var slicedItem = items2.splice(myRandom, 1);
                myImag.attr("src", "http://flickholdr.com/200/200/" + slicedItem);
                myImag.attr("class", "c" + slicedItem + " sq-color");

                $(".container").append(myImag);
            }
            random = items[Math.floor(Math.random() * items.length)];
            $('.c' + random).addClass('mole');

        }


    });

</script>
</head>

<body>
    <div class="container">

   </div>
    <div class="score">
    Score is here:<br />
    Click: <b id="click-score" >0</b><br />
    Hit: <b id="show-score" >0</b><br />
    Miss: <b id="miss-score">0</b><br />
    </div>
    <div class="reset">
    <h2 >Reset</h2>
    </div>
</body>
</html>

jquery game looping logic

1 solution

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us