Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML jQuery
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?
 

 
$(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
Edited 10-Nov-12 23:12pm
enhzflep37.3K
v3
Comments
Sergey Alexandrovich Kryukov at 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 at 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 at 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 at 11-Nov-12 5:17am
   
:-D :grins:
I think that perhaps "eval(1)" says it all?
Sergey Alexandrovich Kryukov at 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 at 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 at 11-Nov-12 22:40pm
   
The only problem here is the lack of possibility to arrest for driving without a license... :-)
--SA
enhzflep at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Watch this code. i think you want to do something like this.
 
<!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>
  Permalink  
Comments
Member 9589729 at 12-Nov-12 8:14am
   
This code is similar to what I have in mind the only difference is that here all the classes(which are not the 'mole' element) have different background images, thus making it hard for a player to know where the mole is. All the classes that are not the 'mole' need to appear with the same bg color/ bg image.
deepak.m.shrma at 13-Nov-12 9:33am
   
you can modify yar.. :-) i just take your idea n make this one...you can simly hide or do any thing..i canc uplaod folder here so i have to take online image to show some animation...

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 888
1 OriginalGriff 420
2 CPallini 275
3 George Jonsson 226
4 Richard Deeming 145
0 OriginalGriff 5,450
1 CPallini 4,500
2 Sergey Alexandrovich Kryukov 4,272
3 George Jonsson 3,057
4 Gihan Liyanage 2,445


Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 12 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100