Comments by Member 9589729

Member 9589729 12-Nov-12 8:14am View

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.

Member 9589729 11-Nov-12 23:08pm View

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

Member 9589729 11-Nov-12 21:26pm View

[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:23pm View

[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:22pm View

[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:22pm View

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:21pm View

Deleted

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.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<style>
.container /*This the whole game container*/
{
width:800px;
position:relative;
z-index:0;
margin:0 auto;
}
.main-game-space /*This the grid element*/
{
width:800px;
position:relative;
z-index:5;
margin:0 auto;
background-color:#1C0;
height:800px;
}
.score
{
height:30px;
font:Verdana,
font-size:14px;
line-height:1.45em;
font-weight:normal;
font-style:normal;
}
#my-timer
{
width: 200px;
text-align: center;
padding:5px 0px 5px 0px;
}
.row /*This the element that contains elements (cells) present in a given row*/
{
width:800px;
height:120px;
position:relative;
z-index:10;
border-color:#333;
border-width:1px;
}
.sq-color /*This is the class for all the elements (cells) present in the grid */
{
margin: 80px;
position:relative;
z-index:20;
width:40px;
height:40px;
float:right;
background-color:#6C0;
}
.mole /*This is the class that would be added to one of the randomly picked classes (cells) present in the grid */
{
background-color:#F09;
position:relative;
z-index:40000;
width:40px;
height:40px;
background-image:url(images.jpg);
}
</style>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

// Mouseover Click sound effect
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var moleswhacked = 0;

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

var settimmer = 0;
$(function(){ // this is the timmer function that displays the time for which for which the game should run
window.setInterval(function() {
var timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter)- eval(1);
$("b[id=show-time]").html(updateTime);

if(updateTime == 0){
alert('GAME OVER');
}
}, 1000);

});

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i

Member 9589729 11-Nov-12 21:17pm View

Deleted

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.

<pre>


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<style>
.container /*This the whole game container*/
{
width:800px;
position:relative;
z-index:0;
margin:0 auto;
}
.main-game-space /*This the grid element*/
{
width:800px;
position:relative;
z-index:5;
margin:0 auto;
background-color:#1C0;
height:800px;
}
.score
{
height:30px;
font:Verdana,
font-size:14px;
line-height:1.45em;
font-weight:normal;
font-style:normal;
}
#my-timer
{
width: 200px;
text-align: center;
padding:5px 0px 5px 0px;
}
.row /*This the element that contains elements (cells) present in a given row*/
{
width:800px;
height:120px;
position:relative;
z-index:10;
border-color:#333;
border-width:1px;
}
.sq-color /*This is the class for all the elements (cells) present in the grid */
{
margin: 80px;
position:relative;
z-index:20;
width:40px;
height:40px;
float:right;
background-color:#6C0;
}
.mole /*This is the class that would be added to one of the randomly picked classes (cells) present in the grid */
{
background-color:#F09;
position:relative;
z-index:40000;
width:40px;
height:40px;
background-image:url(images.jpg);
}
</style>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

// Mouseover Click sound effect
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var moleswhacked = 0;

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

var settimmer = 0;
$(function(){ // this is the timmer function that displays the time for which for which the game should run
window.setInterval(function() {
var timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter)- eval(1);
$("b[id=show-time]").html(updateTime);

if(updateTime == 0){
alert('GAME OVER');
}
}, 1000);

});

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i

Member 9589729 11-Nov-12 12:20pm View

Deleted

Thanks. Sure I will do that. I will formulate the things and post it shortly.

Member 9589729 11-Nov-12 10:04am View

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.

Member 9589729 11-Nov-12 1:45am View

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]
...

Comments by Member 9589729 (Top 11 by date)