PDA

View Full Version : JavaScript Game



scorch
10-03-2007, 12:08 AM
Hi everyone,

I have a homework assignment for JavaScript that I need some help with:


Create a game using the following rules:
Two players play the game. Each player takes a turn that lasts 30 seconds. On each turn, the player is to "tag" an asterisk(*) on the screen that starts on the left-hand side of the screen and travels across the screen and back. The asterisk begins at the far left of the screen and travels across ten different points on the screen until it rach the far right side of the screen, then return to the left of the screen. The player "tags" the asterisk by clicking a button or clicking text "Tag". The further the asterisk is to the right of the screen, the more points are scored when a player "tags" the asterisk. When the asterisk is "tagged" the player receives the point value associated with the position on the screen. Each point value shoul dbe clearly displayed next to its position.

The game is started when a "start" button or text(as in a P tag) is clicked. The game should go for 5 turns each player, then end and display the winner. It should be clear at all times whose turn it is: player 1 or player 2. You can restart the game by either refreshing the browser, or clicking a "new game" button, then clicking "start".

When the browser loads, the asterisks will start at the left-hand side of the screen and travel 10 positions to the right and then travels 10 positions back. Position 1 is worth 1 point, poistion 2 is worth 2 points, etc. up to position 10 which is worth 10 points. The player must click the "Tag" button to get points, so it is worth more point to click the button the further to the right the asterisk is. The goal is to get the most points within 30 seconds.

Hints:

* Use a one second timer to count down the game time(30 seconds per turn)
* Use a faster timer to change the position of the asterisks
* Use P tag or DIV tags to hold and update the score for each player

Optional (worth 25 points of Extra Credit each)

* Allow the players to set the difficulty level from one to three, which controls the speed of the asterisks
* Allow the players to select normal play - or random play, in which the asterisk is randomly positioned across the screen.

So far I have written this:


<HTML>
<HEAD>
<TITLE>Homework Assignment #6 Part 2 - Game</TITLE>

<SCRIPT LANGAUGE = "JavaScript">

function moveAsterisk()
{
asterisk.style.left += 50;
}

function start()
{
window.setInterval("moveAsterisk()", 100);
}



</SCRIPT>

</HEAD>
<BODY ONLOAD = "start()">
<Div ID = "asterisk" STYLE = "position: absolute; left: 0px, top: 200px">*</div>
<font color = "red"><P><strong><em><br><br><br>Click Refresh on the Browser or Press F5 to run the script again.</em></strong></P></font>
</BODY>
</HTML>

But the timer only goes through one loop, then gets an error....but I have no idea why!

Any help is appreciated :)

tech_support
10-03-2007, 12:20 AM
Try this:



var upto=0;
function moveAsterisk()
{
asterisk.style.left = upto+"px";
upto=upto+50;
}

function start()
{
window.setInterval("moveAsterisk()", 100);
}

scorch
10-03-2007, 12:23 AM
thank you :)

scorch
10-03-2007, 12:24 AM
oh and just so you guys know, I am mainly a VB programmer, but I am just now taking JavaScript in college (last test Thursday!), and will be taking C# starting next week

but anywho, I like this place, so I plan to hang out a bit here and there :)

scorch
10-03-2007, 12:26 AM
and remind me how I can break out of a function? or end a timer?

tech_support
10-03-2007, 12:36 AM
and remind me how I can break out of a function? or end a timer?



var upto=0;
function moveAsterisk()
{
asterisk.style.left = upto+"px";
upto=upto+50;
}
var mytimer; //Preset the variable
function start()
{
mytimer = window.setInterval("moveAsterisk()", 100); //Associate the timer with a variable
}
function stop()
{
clearInterval(mytimer); //Stop the timer
}

scorch
10-03-2007, 12:42 AM
clearInterval

that's it!

scorch
10-03-2007, 01:14 AM
but I still can't find how to exit a fuction

my function keeps looping, even if I end the timer

tech_support
10-03-2007, 01:29 AM
Try removing the start() function and only putting the setInterval, like this:


var upto=0;
function moveAsterisk()
{
asterisk.style.left = upto+"px";
upto=upto+50;
}
var mytimer = window.setInterval("moveAsterisk()", 100); //Associate the timer with a variable
function stop()
{
clearInterval(mytimer); //Stop the timer
}

Oh, and remove the onload attribute in the <body> tag as well.

scorch
10-03-2007, 01:57 AM
is there a way to exit a function?

djr33
10-03-2007, 02:10 AM
return FALSE;


We're here to help, but this is homework. Usually not our policy to do it for you.

It's ok that you don't understand it yet... that's why you're learning :)

Twey
10-03-2007, 12:30 PM
To simply break out of a function you don't need to return a value: just say return;. Also, Javascript is case-sensitive, and boolean values are lower-case (return FALSE; will throw an error 'undefined variable "FALSE".').
Don't pass a string to setInterval()/setTimeout(), pass a function.
You'd probably be better off using a makeAsterisk() function that sets everything up and contains within its scope some 'static' variables and the functions you're going to attach to the asterisk.

scorch
10-03-2007, 10:57 PM
return FALSE;


We're here to help, but this is homework. Usually not our policy to do it for you.

It's ok that you don't understand it yet... that's why you're learning :)


I understand. I do.

This syntax is killing.

I have been programming VB since I was 17 (27 now) and this is my first class of going back to college. Already have my associates, but am now pursuing a bachelors.

The book can be confusing, because it covers many languages, so when you look something up, you end up finding it in another language.

Anywho, thanks for the help. I am still working on it, and hope to finish tonight!

scorch
10-03-2007, 11:03 PM
Here is what I have so far. And for the life of me, I can't stop this asterisk from moving.

It needs to stop after 30 seconds (but I am using 3 seconds to test it).

So I try to call a function to stop the timer after 3 seconds. I've tried several flavors, but not seem to work.

This one returns an error.

Now it seems that an earlier revision I did last night, I tried removing the start function from the onload (which I really don't understand why this would be any different, but maybe its another syntax/format thing). So I am going to try that on my next try here.


<HTML><HEAD>
<TITLE>Homework Assignment #6 Part 2 - Game</TITLE>

<SCRIPT LANGAUGE = "JavaScript">

var loopBack = false, // Variable used to turn cursor around
stop = false, // Variable used to stop asterisk from moving
speed = 0, // Variable used to control the speed
ms = 1000, // Variable used to control the speed
counter = 0, // Variable used to track number of loops
score1 = 0, // Variable used to keep the score for Player 1
score2 = 0, // Variable used to keep the score for Player 1
turnVar = 1, // Variable used to keep track of whose turn it is
timer, // Variable used for the timer
upTo = 0; // Variable used to move asterisk


function moveAsterisk()
{
asterisk.style.left = upTo + "px";

if (loopBack == true)
upTo = upTo - 50;
else
upTo = upTo + 50;

if (upTo == 500){
loopBack = true;
counter += 1;
}

if (upTo == 0)
loopBack = false;

// Trying real hard to stop this timer
if ( stop == true)
return false;


}

function start()
{
do {
speed = parseInt ( window.prompt ( "Select the Difficulty level.\n0 - Easy, 1 - Normal, 2 - Hard","0"));

if ( speed == 0 )
ms = 1000;

if ( speed == 1 )
ms = 500;

if ( speed == 2 )
ms = 100;

} while ( speed < 0 || 2 < speed );

timer = window.setInterval("moveAsterisk()", ms); // setup the timer
timer = window.setTimeout("stop()", 3000); // setup the timer
}

function stop()
{
//clearInterval(timer); //Stop the timer
stop = true; // Set stop variable to true
}

function tag()
{

//If ( turnVar == 1)
// window.alert ("YES");

// Gives Player 1 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
score1 = score1 + upTo;
document.game.P1.value = score1;


//If ( document.game.turn.value == 2){
// Gives Player 2 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
score2 = score2 + upTo;
document.game.P2.value = score2;
//}
/*
If ( document.game.turn.value == 1)
document.game.turn.value = 2;
else
If ( document.game.turn.value == 2)
document.game.turn.value = 1;
else
document.game.turn.value = 1;
*/
document.game.turn.value = 2;
}


</SCRIPT>

</HEAD>
<BODY ONLOAD = "start()">
<Div ID = "asterisk" STYLE = "position: absolute; left: 0px; top: 200px">*</div>

<FORM NAME = "game">
<INPUT TYPE = "button" VALUE ="Tag Asterisk" ONCLICK = "tag()"><br><br><br>

Player 1
<INPUT TYPE = "text" NAME = "P1">
&nbsp &nbsp &nbsp &nbsp
Player 2
<INPUT TYPE = "text" NAME = "P2">

<br><br><br>

Current Player's Turn
<INPUT TYPE = "text" NAME = "turn" VALUE = "1">

</FORM>

<font color = "red"><P><strong><em><br><br><br><br><br><br>Click Refresh on the Browser or Press F5 to run the script again.</em></strong></P></font>
</BODY>
</HTML>

p.s. I have my own site at www.internet-messiah.com if anyone is interested. I do really enjoy learning this, but I am under the gun here and sweating bullets!

scorch
10-03-2007, 11:06 PM
I think I am coming to find out that using the word "start" as a function name is a bad idea...

I WILL FIGURE THIS OUT TONIGHT!

:)

scorch
10-03-2007, 11:13 PM
BTW - I am using Notepad ++

Should I be using anything else?

scorch
10-04-2007, 12:07 AM
I am getting closer, now I just need to figure out the turns. Decided to throw in a time elapsed as well.


<HTML>
<HEAD>
<TITLE>Homework Assignment #6 Part 2 - Game</TITLE>

<SCRIPT LANGAUGE = "JavaScript">

var loopBack = false, // Variable used to turn cursor around
stopTimer = false, // Variable used to stop asterisk from moving
speed = 0, // Variable used to control the speed
ms = 1000, // Variable used to control the speed
counter = 0, // Variable used to track number of loops
score1 = 0, // Variable used to keep the score for Player 1
score2 = 0, // Variable used to keep the score for Player 1
turnVar = 1, // Variable used to keep track of whose turn it is
timerME, // Variable used for the timer
upTo = 0; // Variable used to move asterisk


function moveAsterisk()
{
if (stopTimer == false){

asterisk.style.left = upTo + "px";

if (loopBack == true)
upTo = upTo - 50;
else
upTo = upTo + 50;

if (upTo == 500){
loopBack = true;
counter += 1;
}
if (upTo == 0)
loopBack = false;

//if ( speed == 0 )
document.game.timeElapsed.value = counter;
}

if (stopTimer == true){

/*
If ( document.game.turn.value == 1)
document.game.turn.value = 2;
else
If ( document.game.turn.value == 2)
document.game.turn.value = 1;
else
document.game.turn.value = 1;
*/

document.game.turn.value = 2;


}

}

function startME()
{
// reset variables as function will be re-used
startTimer = false;
document.game.timeElapsed.value = 0;
counter = 0;
do {
speed = parseInt ( window.prompt ( "Select the Difficulty level.\n0 - Easy, 1 - Normal, 2 - Hard","0"));

if ( speed == 0 )
ms = 1000;

if ( speed == 1 )
ms = 500;

if ( speed == 2 )
ms = 100;

} while ( speed < 0 || 2 < speed );

timerME = window.setInterval("moveAsterisk()", ms); // setup the timer
timerME = window.setTimeout("stopME()", 3000); // setup the timer
}

function stopME()
{
//clearInterval(timerME); //Stop the timer
stopTimer = true; // Set stop variable to true
}

function tag()
{

// Gives Player 1 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
score1 = score1 + upTo;
document.game.P1.value = score1;


//If ( document.game.turn.value == 2){
// Gives Player 2 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
score2 = score2 + upTo;
document.game.P2.value = score2;
}


</SCRIPT>

</HEAD>
<BODY>
<Div ID = "asterisk" STYLE = "position: absolute; left: 0px; top: 250px">*</div>

<FORM NAME = "game">

<INPUT TYPE = "button" VALUE ="Start Game" ONCLICK = "startME()"><br><br><br>

Player 1
<INPUT TYPE = "text" NAME = "P1">
&nbsp &nbsp &nbsp &nbsp
Player 2
<INPUT TYPE = "text" NAME = "P2">

<br><br><br>

Current Player's Turn
<INPUT TYPE = "text" NAME = "turn" VALUE = "1">

<INPUT TYPE = "button" VALUE ="Tag Asterisk" ONCLICK = "tag()"><br><br><br>

Time: <INPUT TYPE = "text" NAME = "timeElapsed" VALUE = "0" WIDTH = "3">

</FORM>

<font color = "red"><P><strong><em><br><br><br><br><br><br>Click Refresh on the Browser or Press F5 to Start a New Game! <br>After that, press the "Start Game" button to begin.</em></strong></P></font>
</BODY>
</HTML>

scorch
10-04-2007, 12:13 AM
I feel so dumb :(

I used the timeME variable for two different timers! DUH!

scorch
10-04-2007, 01:51 AM
Ok people. I did it!!!

I really feel like I have achieved something.

Here it is:


<HTML>
<HEAD>
<TITLE>Homework Assignment #6 Part 2 - Javascript Game</TITLE>

<SCRIPT LANGAUGE = "JavaScript">

var loopBack = false, // Variable used to turn cursor around
stopTimer = false, // Variable used to stop asterisk from moving
speed = 0, // Variable used to control the game speed
gameStyle = 0, // Variable used to control the game speed
randomNumber = 0, // Variable used to control the game speed
ms = 1000, // Variable used for the timer speed
score1 = 0, // Variable used to keep the score for Player 1
score2 = 0, // Variable used to keep the score for Player 1
turnVar = 1, // Variable used to keep track of whose turn it is
turns = 0, // Variable used to keep track of whose turn it is
timerME, // Variable used for the ME timer
timerYOU, // Variable used for the YOU timer
upTo = 0; // Variable used to move asterisk


function moveAsterisk()
{

//This if structure is used for the standard game style
if ( gameStyle == 0 ) {
asterisk.style.left = upTo + "px";

if (loopBack == true)
upTo = upTo - 50;
else
upTo = upTo + 50;

if (upTo >= 500){
loopBack = true;
}
if (upTo <= 0)
loopBack = false;
}

//This if structure is used for the standard game style
if ( gameStyle == 1 ) {

asterisk.style.left = upTo + "px";
randomNum = Math.floor ( 50 + Math.random() * 55 );

if (loopBack == true)
upTo = upTo - randomNum;
else
upTo = upTo + randomNum;

if (upTo >= 500){
loopBack = true;
}
if (upTo <= 0)
loopBack = false;
}

}

function startME()
{
stopTimer = false; // reset variable as function will be re-used
turns += 1; // keep track of number of turns
document.game.turnsNum.value = turns;

if ( turns < 11 ){ //stops after each player has had 5 turns
timerME = window.setInterval("moveAsterisk()", ms); // setup the ME timer to start the game
timerYOU = window.setTimeout("stopME()", 30000); // setup the YOU timer to stop the function after 30 seconds
}
else // This will alert the user that the game is over
alert("Game is over. Click refresh, and then the start button to start a new game.");
}

function stopME()
{
clearInterval(timerME); //Stop the timer
stopTimer = true; // Set stop variable to true

//This if structure is used to change the current players turn
if ( turnVar == 1){
turnVar = 2;
document.game.turn.value = turnVar;
}
else
if ( turnVar == 2 ){
turnVar = 1;
document.game.turn.value = turnVar;
}

//This will be used to display the winner
if ( turns == 10 ){
if ( score1 > score2 )
alert( "Game Over!\nPlayer 1 wins!");
if ( score1 < score2 )
alert( "Game Over!\nPlayer 2 wins!");
if ( score1 == score2 )
alert( "Game Over!\nIts a tie!");
}

}

function tag()
{
if ( stopTimer == false) { // Use this so that tag button only works when game is active

// Gives Player 1 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
if ( turnVar == 1){
score1 = score1 + (upTo / 50); //divide by 50 so that score is incremented by 1 per position
document.game.P1.value = score1;
}

// Gives Player 2 a score increase of the value equal to the position of the asterisk
//I made the increments this value as it was easier, and the Prof indicated that the score doesn't matter too much
if ( turnVar == 2){
score2 = score2 + (upTo / 50); //divide by 50 so that score is incremented by 1 per position
document.game.P2.value = score2;
}
}
}

function clearVariables() // Function called on page load, which basically resets the game
{
document.game.P1.value = 0;
document.game.P2.value = 0;
document.game.turn.value = 1;
document.game.turnsNum.value = 0;

//This do/while gets the speed variale
do {
speed = parseInt ( window.prompt ( "Select the Difficulty level.\n0 - Easy, 1 - Normal, 2 - Hard","0"));

if ( speed == 0 )
ms = 1000;

if ( speed == 1 )
ms = 500;

if ( speed == 2 )
ms = 100;

} while ( speed < 0 || 2 < speed );

//This do/while gets the standard/random gameStyle variale
do {
gameStyle = parseInt ( window.prompt ( "Select the Game Style.\n0 - Standard, 1 - Random","0"));

if ( speed == 0 )
ms = 1000;

if ( speed == 1 )
ms = 500;

if ( speed == 2 )
ms = 100;

} while ( gameStyle < 0 || 1 < gameStyle );

}

</SCRIPT>

</HEAD>
<BODY ONLOAD = "clearVariables()"> <!~~Clear Game Variables at page load~~!>

<!~~This section will be used to show the asterisks position~~!>
<P STYLE = "position: absolute; left: 0px; top: 200px">Playing Field Positions</P>
<P STYLE = "position: absolute; left: 0px; top: 225px">0</P>
<P STYLE = "position: absolute; left: 50px; top: 225px">1</P>
<P STYLE = "position: absolute; left: 100px; top: 225px">2</P>
<P STYLE = "position: absolute; left: 150px; top: 225px">3</P>
<P STYLE = "position: absolute; left: 200px; top: 225px">4</P>
<P STYLE = "position: absolute; left: 250px; top: 225px">5</P>
<P STYLE = "position: absolute; left: 300px; top: 225px">6</P>
<P STYLE = "position: absolute; left: 350px; top: 225px">7</P>
<P STYLE = "position: absolute; left: 400px; top: 225px">8</P>
<P STYLE = "position: absolute; left: 450px; top: 225px">9</P>
<P STYLE = "position: absolute; left: 500px; top: 225px">10</P>


<!~~This DIV is used for the asterisk vairable~~!>
<DIV ID = "asterisk" STYLE = "position: absolute; left: 0px; top: 250px">*</DIV>

<!~~This is the form used for the game~~!>
<FORM NAME = "game">


Player 1
<INPUT TYPE = "text" NAME = "P1">
&nbsp &nbsp &nbsp &nbsp
Player 2
<INPUT TYPE = "text" NAME = "P2">

<br><br><br>

Current Player's Turn
<INPUT TYPE = "text" NAME = "turn" VALUE = "1">

<INPUT TYPE = "button" VALUE ="Start Turn" ONCLICK = "startME()"><br><br><br>
<INPUT TYPE = "button" VALUE ="Tag Asterisk" ONCLICK = "tag()">&nbsp &nbsp
Current Turn #: <INPUT TYPE = "text" NAME = "turnsNum" VALUE = "0"><br><br><br>

</FORM>

<!~~This will display the instructions and rules of the game~~!>
<p>
<font color = "black"><strong><em><br><br><br><br><br><br>1.) Select Difficulty.<br>
2.) Select Game Style.<br>
3.) Click the "Start Turn" button to begin your turn.<br>
4.) After that press the "Tag" button to score. <br>
5.) Score is higher for the further to the right of the screen the asterisk is when the "Tag" button is clicked.<br>
6.) After the asterisk stops moving, it is the next players turn.<br>
7.) Each Player gets 5 turns then the game is over.<br>
8.) Player with the Highest Score Wins!!!<br><br><br></font>
<font color = "red">Click Refresh on the Browser or Press F5 to Start a New Game! <br>After that, press the "Start Game" button to begin.</em></strong></font>
</p>
</BODY>
</HTML>