Search jQuery

jQuery Forum

Using jQuery

flashingm..

using jquery functions, combining sliding and clicking

in Using jQuery • 11 years ago

Hi all,

I guess I'm having some trouble with combining regular OOP javascript and jQuery.

Here I'm trying to make a simple molewhacking game with jQuery. Somehow the click() method doesn't work anymore when I use my (strangely and unexpectedly working...) slideDown and UP combination-loop. Probably the approach I'm taking is very wrong. Should I put $ before all functions? I just dunno.

Can somebody take a look at the code below and pinpoint me to the solutions and best practices?

thx!

<html >
<head>
<title>Whack moles</title>
<style type="text/css">
#gamebox{width:400px; height:300px; overflow:hidden; margin:0 auto; background-color:#669900;position:relative;}
#hole1{position:absolute; bottom:40px;left:40px;}
#hole2{position:absolute; bottom:80px;left:160px;}
#hole3{position:absolute; bottom:40px;right:40px;}
.hole{
width:80px;
height:100px;
background-color:#33CCFF;
}
.hole .hole_img, .hole .hole_img2{
width:80px;
position:absolute;
bottom:0;
}
.hole .hole_img{
height:20px;
background-color:#333;
}
.hole .hole_img2{
height:14px;
background-color:#000;
}
.hole a{
display:block;
width:80px;
height:100px;
background-color:#FC0;
position:absolute;
bottom:0;
display: none;
}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
//sorry for sloppy code! This is my third attempt at jquery and i'm still figuring out best practices...
//Moose
$(document).ready(function(){
//count holes
//var holesN=
var molescore=0;
var slideTime=200;
var hiddenTimeMax=4000;
var hiddenTimeMin=2000;
var showingTimeMax=4000;//200;
var showingTimeMin=2000;//80;
moveRandom();
//show random moles:
function moveRandom(num){
var hiddenTime=Math.round(Math.random()*(hiddenTimeMax-hiddenTimeMin))+hiddenTimeMin;
var showingTime=Math.round(Math.random()*(showingTimeMax-showingTimeMin))+showingTimeMin;
$('#hole'+num+' a').slideUp(slideTime).delay(hiddenTime).slideDown(slideTime).delay(showingTime).slideUp(slideTime,moveRandom(Math.ceil(Math.random()*3)));//this kinda works; but why?
};
//click: doesn't work if moveRandom(); is activated (and display:none is in css)...
//when moveRandom() is activated i cannot click/mouseEvent on anything...
$(".hole a").click(function(){
molescore = molescore+1;
$("#ScoreString").val(molescore);
});
//temporary, just to make sure there's nothing i can click:
$("#gamebox").click(function(){
molescore = molescore+1;
$("#ScoreString").val(molescore);
});
});
</script>
</head>
<body>
<div id="gamebox">
Score: <input type="text" readonly="readonly" id="ScoreString" value="0" size="4">
<div id="hole1" class="hole">
<div class="hole_img"></div>
<a href="javascrip:addScore()">R</a>
<div class="hole_img2"></div>
</div>
<div id="hole2" class="hole">
<div class="hole_img"></div>
<a href="javascript:void(0)">R</a>
<div class="hole_img2"></div>
</div>
<div id="hole3" class="hole">
<div class="hole_img"></div>
<a href="javascript:void(0)">R</a>
<div class="hole_img2"></div>
</div>
</div>
</body>
</html>

Replies(1)

kbwood.au

Re: using jquery functions, combining sliding and clicking

11 years ago

The problem is that you are passing the result of moveRandom to the slideUp function, instead of a reference to the function itself. Try calculating the mole number within moveRandom so that it doesn't need any parameters:

<script>
$(function() { // Shorthand for $(document).ready(function() {
var molescore=0;
var slideTime=200;
var hiddenTimeMax=4000;
var hiddenTimeMin=2000;
var showingTimeMax=4000;
var showingTimeMin=2000;
moveRandom();
//show random moles:
function moveRandom() {
var num = Math.ceil(Math.random() * 3);
var hiddenTime = Math.round(Math.random() * (hiddenTimeMax - hiddenTimeMin)) +
hiddenTimeMin;
var showingTime = Math.round(Math.random() * (showingTimeMax - showingTimeMin)) +
showingTimeMin;
$('#hole' + num + ' a').slideUp(slideTime).delay(hiddenTime).
slideDown(slideTime).delay(showingTime).slideUp(slideTime, moveRandom);
};
$('.hole a').click(function() {
molescore++;
$('#ScoreString').val(molescore);
});
});
</script>

Top Reply

Response title

Attachments

jQuery Forum

using jquery functions, combining sliding and clicking

Replies(1)

Re: using jquery functions, combining sliding and clicking

Statistics

Tags

Actions