|
JavaScript - Help Creating A Pop-up Message When A Game Is Submitted
hello there
im unsure if this is the correct place to post this so if its not im sorry what im trying to do is make a javascript pop-up message in real time alerting members who are online at that time to a game submitted i help run a fifa10 online league site and we are venturing into the 2v2 part of the site. now when a player goes to the 2v2 page they are presented with a submit button to submit a 2v2 game to the system. then this already shows up on the pagebut what we are after is a little pop up box which after the game button is pressed to submit the game the pop-up shows to the whole site that a 2v2 game has been submitted for playing. we want this so you dont have to sit on the 2v2 page to wait for a submitted game. does anybody have any ideas on how we would go about this?? thanks for your time and i hope some1 can help - even if its just in the slightest Similar TutorialsCreate a game where 6 dice are 'rolled' by you and 6 dice are 'rolled' by the player (simulated by the click of a button). Add up both rolls. The goal is to come as close to a score of 100 as possible, without passing 100. Have a STOP button to signify when you are ready to stop rolling and compute the winner. The highest score under 100 wins. Display the number of times you win and the number of times the computer wins using javascript. So far I have the following code, however, my dice images are not working(they display as little broken symbols when I run the game). The game itself is running just fine but I can't figure out how to get the game to do the "Add up both rolls" step and beyond. If anyone can help it would be much appreciated. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dice Game</title>
<link href="Dicegame.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id='human' class='playerArea'>
<h3>Human</h3>
<div id='humanDice'>
</div>
<p id='humanTotal' class='total'></p>
</div>
<div id='computer' class='playerArea'>
<h3>Computer</h3>
<div id='computerDice'>
</div>
<p id='computerTotal' class='total'></p>
</div>
<div id='roll'>
<a href='#' onclick='play(); return false;'>Roll</a>
</div>
<script type='text/javascript' src='lib.js'></script>
<script type='text/javascript' src='dicegame.js'></script>
</body>
</html>
*the external links are as follows* *Dicegame.css* body { background-color: #004400; } div.playerArea { position: absolute; top: 100px; bottom: 200px; width: 300px; background-color: #0996FF; border: 3px solid #0027C6; padding: 0 1em; } div#human { left: 100px; } div#computer { right: 100px; } div#roll { position: absolute; bottom: 50px; left: 100px; right: 100px; height: 100px; background-color: #FFFF00; border: 3px solid #FFBE00; } div#roll:hover { background-color: #FFFF99; } div#roll a { display: block; position: absolute; top: 0px; bottom: 0px; width: 100%; color: #004400; text-align: center; font-size: 90px; text-decoration: none; } div#roll a:hover { color: #FF0000; } p.total { margin: 10px; font-weight: bold; font-size: 8em; text-align: center; } p.winner { color: #00CC00; } p.loser { color: #CC0000; }[/CODE] *dicegame.js* Code: window.onload=function(){
Nifty("div.playerArea", "big");
}
function roll()
{
var result = 0;
result = Math.floor((Math.random() * 6) + 1);
return result;
}
function play()
{
// create dice array
var humanDice = new Array();
var computerDice = new Array();
// totals
var humanTotal = 0;
var computerTotal = 0;
// output
var out = "";
// roll the dice
for (var i = 0; i < 6; i++)
{
humanDice[i] = roll();
humanTotal += humanDice[i];
computerDice[i] = roll();
computerTotal += computerDice[i];
}
// display human dice
out = displayDice(humanDice);
document.getElementById('humanDice').innerHTML = out;
// display computer dice
out = displayDice(computerDice);
document.getElementById('computerDice').innerHTML = out;
document.getElementById('humanTotal').innerHTML = humanTotal;
document.getElementById('computerTotal').innerHTML = computerTotal;
if (humanTotal > computerTotal)
{
document.getElementById('humanTotal').className = 'total winner';
document.getElementById('computerTotal').className = 'total loser';
}
else if (computerTotal > humanTotal)
{
document.getElementById('humanTotal').className = 'total loser';
document.getElementById('computerTotal').className = 'total winner';
}
else
{
document.getElementById('humanTotal').className = 'total';
document.getElementById('computerTotal').className = 'total';
}
}
function displayDice(dice)
{
var out = "";
for (var i = 0; i < dice.length; i++)
{
out += "<img src='die" + dice[i] + ".png'/>";
}
return out;
}
*lib.js* Code: function output(text, tag)
{
document.write("<" + tag + ">" + text + "</" + tag + ">");
}
Hi there, basically i have created a simple card game, i have one html page with 6 decks of cards. The decks are just images that when clicked display 6 other cards on another html page. What i want to do is that when i click a card on the second page i want the card to be removed, so that when i go back the first page and select the same deck again, the second page opens and the card i had selected before is still removed? Is this possible with javascript please i am totally new to it. Please could someone give me some direction? Thanks
Hi, I am working on a simple javascript craps game program. I need some advice since it won't display who the winner is, keep tally of who wins/loses, and the number of total games played. After using the error console there's an error with document.forms[0].thrower.value not being defined. Can anyone help me with this? PHP Code: <html> <head> <title> JavaScript Craps Game</title> <script type="text/javascript"> <!-- var n,die_1,die_2,total,h_won,c_won, flag, point,winner; function get_num() { var max = 6; var number=Math.random()*max + 1; var result=Math.floor(number); return result; } function roll_dice() { die_1 = get_num(); die_2 = get_num(); total= die_1 + die_2; // Insert the results of the dice into the appropriate fields document.getElementById("die1").innerHTML= die_1; document.getElementById("die2").innerHTML= die_2; document.getElementById("total").innerHTML= total; //document.forms[0].die1.value = die_1; //document.forms[0].die2.value = die_2; //document.forms[0].tot.value = total; //Subtracting 0 from these values forces them to be typed as numbers if (flag){ //This means we rolled something other than 2,3,7,11, or 12 so we have a point var th = document.forms[0].thrower.value; if (total == point) { //X wins winner = "x"; calculate_winnings(th,winner); flag = 0; //document.forms[0].flag.value="0"; game_count(); } else if (total == 7){ //Y wins winner = "y"; calculate_winnings(th,winner); flag = 0; //document.forms[0].flag.value="0"; game_count(); } } else{ var thwr = document.forms[0].thrower.value; if (total == 7 || total == 11) { //X wins document.getElementById("winner").innerHTML= "X Wins!"; //document.forms[0].winner.value= "X Wins!"; winner = "x"; calculate_winnings(thwr,winner); game_count(); } else if (total == 2 || total == 3 || total == 12){ //document.forms[0].winner.value= "Y Wins!"; document.getElementById("winner").innerHTML= "Y Wins!"; winner = "y"; calculate_winnings(thwr,winner); game_count(); } else { point = total; document.getElementById("winner").innerHTML= "Waiting for a 7 or a " + point; // document.forms[0].winner.value="Waiting for a 7 or a " + point; flag = 1; //document.forms[0].flag.value="1"; } } } function game_count() { //for keeping track of games if (n){ n = n + 1; } else { n = 1; } document.forms[0].totalgames.value = n; //return n; } function calculate_winnings(thrower,winner) { var button = document.forms[0].thrower.checked; if (button) { if (winner == 'x') { //computer was thrower and X won //document.forms[0].winner.value="Computer Wins!"; document.getElementById("winner").innerHTML= "Computer Wins."; add_to_computer_win(); } else { //computer was thrower and Y won //document.forms[0].winner.value="You win!"; document.getElementById("winner").innerHTML= "You win!"; add_to_human_win(); } } else { if (winner == 'x') { //human was thrower and X won //document.forms[0].winner.value="You Win!"; document.getElementById("winner").innerHTML= "You Win!"; add_to_human_win(); } else { //human was thrower and Y won //document.forms[0].winner.value="Computer Wins!"; document.getElementById("winner").innerHTML= "Computer Wins."; add_to_computer_win(); } } thrower = 0; } function add_to_human_win(){ if (h_won){ h_won = h_won + 1; } else { h_won = 1; } document.forms[0].human_won.value=h_won; } function add_to_computer_win(){ if (c_won){ c_won = c_won + 1; } else { c_won = 1; } document.forms[0].computer_won.value=c_won; } --> </script> </head> <body> <h1> <center> Craps Game </center></h1> <hr> <form> <table border="1"> <tr> <td width="45%" align="center"> <center><b><font size="4">Play!</font></b></center> <p><input type="button" name="roll" value="Roll Dice!" onclick="roll_dice()"></p> <table border="1"> <tr> <td>Die #1</td><td>Die #2</td><td>Total</td> </tr> <tr> <td><div id="die1"></div></td> <td><div id="die2"></div></td> <td><div id="total"></div></td> </tr> </table> <p>Result of roll: <div id="winner"></div></p> <!--<input type="text" size="30" name="winner" value=""></p>--> <p> </p> </td> <td width="35%"> <table border="1" cellspacing="7"> <tr> <th colspan="2" ><font size="4">Statistics:</font><br> <input type="text" size="2" name="totalgames" value="0"> total games played</th> </tr> <tr> <td align="center">Your wins</td><td>Computer wins</td> </tr> <tr> <td align="center"><input type="text" size="2" name="human_won" value="0"></td> <td align="center"><input type="text" size="2" name="computer_won" value="0"></td> </tr> </table> </td><td width="20%" align="center"> This will clear your statistics and start a new game<br> <input type="submit" name="startover" value="New Game"> </td></tr></table> <hr> <h3><a name="Help">Help</a></h3> <pre> The game of craps is a dice game played by two players, You and The House. First you toss the pair of dice. If the sum of the dice is 7 or 11, you win the game. If the sum is 2, 3, or 12, the house wins. Otherwise, the sum is designated as the "point," to be matched by another toss. So if neither player has won on the first toss, then the dice are tossed repeatedly until either the point or a 7 comes up. If a 7 comes up first, the house wins. Otherwise, you win when the point comes up. </body> </html> Ok so I'm in college and I'm taking my first web development class online. Unfortunate my teacher is awful. We have already "covered" html and some css and done a bit of java such as creating a prompt and a super simple calculator. However, for the final I have to make a 2 player game with at least 30 spaces and dice (random number generator). More importantly our "learn javascript in 24 hours" book doesn't cover this at all and my teacher is MIA like always. So, I have come to you all for help. I found a sample script that is almost exactly what I need for this project but it needs a bit of tweaking http://javascript.internet.com/games...ders-game.html I need to add 5 additional spaces and I wanted to add a ladder from space 24-27 and change the chute from 16-6 to 25-6. Unfortunately I'm kind of clueless on how to do this and make sure everything works properly.... Here is an image I made real quick of what I want it to look like And this is the requirements for the project. * Minimum Requirements for a C: o 2 players o 20 steps on the board o Random number generator o Game displays the location of each player on the board * Minimum Requirements for a B: o Everything above plus o Attractive user interface. o 30 steps on the board o Graphical random number generator (Example: Display the number as a dice image) * Minimum Requirements for an A: o Everything above plus o Educational game that shows facts as the players move around the game. Any help at all would be amazing and greatly appreciated Hi all, new here. Hope this makes sense. In Salesforce, I am adding what they call an "S-Control" via HTML/JavaScript that will display an alert if certain field criteria are met. The alert would be a reminder to hit the "Submit for Approval" button if the Quote Estimate is equal to or greater than $50,000. For testing purposes I added another criteria, that the Opportunity name must = Test and Stage must = Proposal/Price Quote. Here's what I've come up with so far, taking from other examples, but I receive no alert, so I'm wondering where it went wrong. Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
// Begin by creating 3 variables for the criteria to be met.
var oppname = "{!Opportunity.Name}";
var isstatus = "{!Opportunity.StageName}";
var quoteest = "{!Opportunity.Quote_Estimate__c}"
// Now create a function which will decide if the criteria is met or not and throw alert message.
//var oppname= "Test"
//var quoteest >= "50000"
//var isstatus = "Proposal/Price Quote"
var msgg = "The quote estimate for this opportunity is equal to or greater than $50,000. Remember to submit this opportunity for approval. "
if ((oppname == "Test") && (quoteest >= 50000) && (isstatus == "Proposal/Price Quote"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
This is a simple basic game i want to make. Its a "What Am I" Riddle... The questions is (In HTML which i already know): I'm as light as a feather but no man can hold me for long. What am I? the answer is: Your Breath. (This is where the JAVASCRIPT comes in) Lets say they guess a rock, have a pop up say: Wrong Answer. Please try again. Lets say they guess Your breath -OR- Breath, have a pop up say: Correct! I want a text field where you can enter your answer, and if they choose ANYTHING but the 2 correct answers above, it will display please try again. Can anyone code this please? Thanks for reading. Ok so i want to work on an EASY basic game. As simple as Guess what number... But there are some twist... Ok So here is my example... (HTML, i know this.)I'm Guessing a number 1-99. What is it? (java) Lets say its 66 and they guess 53, have the text rusult be in a pop up window be: Too low! (java) Lets say they guess 78, have the text rusult be in a pop up window be: Too high! (java) Lets say they guess 100+, have the text rusult be in a pop up window be: Out of range! (java)But lets say they guess 66, have a text result be in a pop up window be: You've won! (java) I want a text field where you can enter your answer, and it will do the actions above. Can anyone code this? Thanks for reading! Hi all! I have a form called "theForm". How can I tell if the user has submitted the form or hit the submit button?? Is it.. Code: if(document.theForm.onsubmit()){
do something
}else{
}
Hey guys I've got a really simple form: Code: <form name="nextform" method="post" action="page2.php"> <input type="checkbox" name="accepted" />I have read and accept the <a href="tsandcs.php" target="_blank">terms and conditions</a><br /><br /> <input type="image" name="next" alt="Next" src="'.$imagefolder.'next.jpg" /> </form> What I need to do is have it so that the form won't submit unless the tick box has been ticked. If they haven't ticked the box, then a little alert prompting them to do so would be great. I want to use JavaScript to do this, but if someone doesn't have JS enabled, I would like the form to submit anyway. I don't really want to grey the button out a tad. Any ideas guys? Cheers Hi, I have a requirement. I have to submit a form [which will open a new window once it is submitted], and immediatly I have to close the orginal page. Currently I am using window.close() statement after formName.submit(). But it closes the window before submit completes. So I tried with window.setInterval("window.close()",1000); It worked for some time, but when the form submition takes long ... same old repeats Please let me know how to handle this? Below is the code snipet //lanuch_frm has the form and it submits to hidden frame 'lanuch_hidden' [CODE] <frameset rows='0%,*' frameborder="0" marginheight="0" border="0"> <frame name="launch_hidden" /> <frame name="launch_frm" src="<%=url%>" noresize="true" marginheight=0 scrolling="auto" leftmargin=0 topmargin="0" rightmargin="0" frameborder='2' /> </frameset> [CODE] Thanks, Mamidi Wasnt sure if I should post this in the JS or HTML forum. I am relatively new to web programming (1.5 years) and this question just occurred to me. I use jquery form validation to validate forms on my site. If my browser has javascript disabled, what is stopping someone from submitting crap through my form? I tried disabling javascript and submitting a form on my site and it posted. Is there a way to make it so if the user does not have javascript enabled the form cannot post? I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript? Thanks, Marcelo Brazil What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way? Code:
<div id="navBar">
<ul>
<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
</ul>
</div><!--end navBar -->
<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0" onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
<input type="text" class="customLink" size="15" name="link1" onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
<input type="text" class="customLink" size="15" name="link2" onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
<input type="text" class="customLink" size="15" name="link3" onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
<input type="text" class="customLink" size="15" name="link4" onblur="this.value=removeSpaces(this.value);" maxlength="8"/>
<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!" />
</form>
Code: <script>
var links = new Array("home", "portfolio", "stuff", "about me", "contact");
function replaceLinks(name){
for (var i=0; i<=4; i++) {
var linkPosition = "link"+i;
links[i] = name.linkPosition.value;
changeLink(i);
}
}
function changeLink(number) {
document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";
}
</script>
ANY HELP WOULD BE AWESOME!!! I just replaced the functions to look like this... Code: function replaceLinks(name){
for (var i=0; i<=4; i++) {
links[i] = name.linker+i.value;
changeLink(i);
}
}
function changeLink(linkNumber) {
document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";
}
Now the links are updating but I get NaN for each link. Hello, I have a form which asks for some user data and then submits this data and inserts into a mysql database. I wanted to know the best way to validate the form before the data is submittted to the action script. For example, checking form fields to see if they are empty and also making sure no special characters are inserted by the user. The code I have tried is: Code: function checkForm() {
var theForm = document.forms.feedback;
if (theForm.fname.value == "" || theForm.loc.value="" || theForm.com.value == "") {
alert("Please complete all of the form");
}
}
Working with this form: Code: <form id="feedback" name="feedback" action="php/phpcustom.php" method="POST">
<fieldset>
<legend>Gardenable.com Feedback</legend>
<p><label for="fname">Name:</label><input type="text" size="30" maxlength="40" id="fname" name="fname" /></p>
<p><label for="loc">Location:</label><input type="text" size="30" maxlength="40" id="loc" name="loc" /></p>
<p><label for="com">Comments:</label><textarea cols="40" rows="6" maxlength="300" id="com" name="com"></textarea></p>
<p><input type="submit" name="send" id="submitbutton" value="Submit" onclick="checkForm()" /><input type="reset" name="reset" value="Reset" /></p>
</fieldset>
</form>
I've added this function to the onclick attribute of the submit input button but it is just submitting the data and not executing. Just wondering if anyone could please explain how to stop the execution of the data being submitted and check the form before doing so. If not could you possibly advise any good sites/links for me to browse to achieve this. regards, LC. I'm using submodal-1.6 for popup. When the popup closes I wanted parent page to refresh.I've tried the following window.opener.location.load(); window.opener.location.load(true); location.load(); window.parent.location.reload(); All works for IE, but when coming to mozilla ,firefox the refresh is a step delayed, i.e when I open my popup to add an itme to my cart on parent page ,for the first time it does not show anything , but when I try to add another item , the first one shows. Any advice would be really great. Hello everyone! I hope you can help me. I am writing a submit form that has to have an indication if a form is missing information upon hitting the submit button. I have followed along the steps with my text and I can't seem to figure out what I am doing wrong. Can anyone help me? Here is my code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/htm14/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kudler Fine Foods Contact Page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<!---Kami Demnyan
21 December 2009-->
<script type="text/javascript">
/*<![CDATA[*/
<!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters-->
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert ("Please enter a numerical value");
return false;
}
}
<!--This code ensures that all of the fields contain text, its not functioning, I'm using page 263 in the text as my
guide-->
function submitForm() {
if (document.forms[0].name.value == ""
|| document.forms[0].address.value == ""
|| document.forms[0].city.value == ""
|| document.forms[0].state.value == ""
|| document.forms[0].zip.value == ""
|| document.forms[0].phone.value == ""
|| document.forms[0].email.value == "") {
window.alert("Please enter your missing information");
return false;
}
else
return true;
}
/*]]>*/
</script>
</head>
<body>
<h1> KUDLER FINE FOODS </h1>
<h2> JOIN OUR MAILING LIST</h2>
<!--This is where the user will input all of their information to join the mailing list-->
<form action="completeform.html" method="get" onsubmit="return onSubnit();"
enctype="application/x-www-form-urlencoded">
<p>Name<br />
<input type="text" name="name" size="50" /></p>
<p>Address<br />
<input type="text" name="address" size="50" /></p>
<p>City, State, Zip <br />
<input type="text" name="city" size="30" />
<input type="text" name="state" size="3" />
<input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p>
<p>Telephone<br />
<input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p>
<p>Email Address<br />
<input type="text" name="email" size="50" /></p>
<!--This is where the submit and reset buttons are located-->
<p><input type="submit" value="Submit Form" />
<p><input type="reset" value="Reset Form" />
</form>
</body>
</html>
ALSO: My instructor does not want me to use the onchange tag, is there a suitable replacement for that? Any help would be greatly appreciated, thank you. Kami I have a game page on my site and I am trying to protect direct access to it by .htaccess .htpasswd but is not accepting user name and password? .htaccess: AuthUserFile /home/vhosts/kandcoentertainment.freetzi.com/.htpasswd AuthType Basic AuthName "game1" <Files "cookietest.html"> Require valid-user </Files> .htpasswd test:8888 Any suggestions on why it is not working? What I would like to do is have apay and play once setup but as I am a novice and dont have a clue HELP PLEASE!!! What I have been told is - protect the files, add a client side cookie to game page then upon url payment return validate cookie giving single access and when played the user cannot replay by refresh or just typing in url because cookie expired ? I have tried to write the scripts up with no success. Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.
A newbie here can you please help me with my javascript game. I cant seem to make it work. Quote: <!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-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Play</title> <script type='text/javascript'> function win(x, z){ if(x == z) return "It's a draw"; draw.value++; { if(x == "Fire")&&(z == "Air") return "You Lose, Fire beats Air!"; loss.value++; else if(x == "Fire")&&(z == "Earth") return "It's a draw!"; draw.value++; else if(x == "Fire")&&(z == "Water") return "You Win, Fire is beaten by Water!"; win.value++; } { if(x == "Air")&&(z == "Earth") return "You win, Air beats Earth"; win.value++; else if(x == "Air")&&(z == "Water") return "It's a draw!"; draw.value++; else if(x == "Air")&&(z == "Fire") return "You lose, Air is beaten by Fire!") loss.value++ } { if(x == "Earth")&&(z == "Air") return "You Lose, Earth is beaten by Air" loss.value++; else if(x == "Earth")&&(z == "Water") return "You Win, Earth beats Water"; win.value++; else if(x == "Earth")&&(z == "Fire") return "It's a draw!"; draw.value++; } { if(x == "Water")&&(z == "Fire") return "You win, Water beats Fire"; win.value++; else if(x == "Water")&&(z == "Air") return "It's a draw!"; draw.value++; else if(x == "Water")&&(z == "Earth") return "You lose, Water is beaten by Earth" loss.value++; } } function ran(){ var gen = Math.random(); if(gen <= 0.25) var com = "Fire"; if((gen > 0.25)&&(gen<= 0.50)) var com = "Earth"; if(gen > 0.50)&&(gen<= 0.75)) var com = "Water"; if(gen > 0.75) var com = "Air"; if(document.c.game[0].checked) var use = "Fire"; if(document.c.game[1].checked) var use = "Earth"; if(document.c.game[2].checked) var use = "Water"; if(document.c.game[3].checked) var use = "Air"; alert ("The computer played: " + com +". You played: " + use + ". " + win(com,use)); } </script> <style type="text/css"> body {background-color:#7f9527;} .style1 { color: #FFFFFF; } .style2 { font-family: "After Disaster"; } .style3 { font-family: "After Disaster"; font-size: 30pt; color: #FFFFFF; margin-left: 160px; } .style4 { font-size: xx-large; } .style5 { color: #FFFFFF; font-size: large; } .style6 { color: #FFFFFF; font-family: "After Disaster"; font-size: large; } .style7 { margin-top: 0px; } .style8 { color: #FFFFFF; font-family: "After Disaster"; font-size: xx-large; margin-left: 280px; } .style9 { font-size: large; } .style10 { margin-top: 12px; } </style> </head> <body> <p class="style3" style="width: 581px">Avatar The Last Air bender: Element Fight</p> <p class="style8" style="width: 340px"> <img alt="" src="Avatar_Aang_by_Shira_chan.jpg" width="339" height="244" class="style7" /></p> <p class="style6">Select Your Attack</p> <form name="c" method="post" class="style2"> <span class="style4"><span class="style9"> <input name="game" type="radio" value="Fire" /></span></span><span class="style5">Fire</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Earth" /></span></span><span class="style5">Earth</span><span class="style9"><br /> </span><span class="style4"><span class="style9"> <input name="game" type="radio" value="Water" /></span></span><span class="style1"><span class="style9">Water<br /> <span class="style4"> <input name="game" type="radio" value="Air" /></span>Air</span><br /></span> <tr> <td colspan="4" align=center> <span class="style2"> <input type="text" name= "win" readonly="readonly" value="0" size="2"> Wins </input> <input type="text" name= "loss" readonly="readonly" value="0" size="2"> Losses</input> <input type="text" name= "draw" readonly="readonly" value="0" size="2"> Draws</input> </span> </td> </tr> </form> <form method="post"> <br /> <input name="Play" type="button" value="Play" onClick="ran()" style="width: 189px; height: 39px" /> <a href="Instructions.htm"> <input name="Button1" type="button" value="Instructions" style="width: 189px; height: 39px" class="style10" /></a></form> </body> </html> Hi, i made a game,where you controll a paddle to bounce back a ball and it hits the bricks on top. The problem is that my eventhandlers don't work after i've added delay function,to make a counter(counting from 3 to 1 before game starts). Any tips?Is it scope problem? Code: var ballx = 100;
var bally = 100; //coord x and y,radius of a ball
var ballr = 10;
var recx;
var recy; //coord x and y,width and height of a paddle
var recw = 100;
var rech = 15;
var dx = 2; //x coord step for animated movement of ball
var dy = 2; //y coord step for animated movement of ball
var rx = 5; //x coord step for animated movement of paddle
var WIDTH; //width of main canvas
var HEIGHT; //height of main canvas
var ctx; //drawn shape
var leftDown = false;
var rightDown = false; //keyboard arrow buttons
var upDown = false;
var downDown = false;
var mouseXmin;
var mouseXmax;
var intervalId;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var y=4;
window.addEventListener("load",init,false); //event for loading main func
window.addEventListener("keydown",buttonpressed,false); //event for checking if button is pressed
window.addEventListener("keyup",buttonreleased,false); //event to check if button is released
window.addEventListener("mousemove",mousemoved,false); //event for controlling paddle with mouse movement
function init_mouse(){ //initialize coord for mouse movement
mouseXmin = document.getElementById('can').offsetLeft;
mouseXmax = mouseXmin + (WIDTH-recw); //doesn't work that pretty...check?
}
function init_bricks(){ //initialize bricks
NROWS = 5;
NCOLS = 3;
BRICKWIDTH = (WIDTH/NCOLS) - 1;
BRICKHEIGHT = 15;
PADDING = 1;
bricks = new Array(NROWS);
for(i=0; i<NROWS; i++){
bricks[i] = new Array(NCOLS);
for(j=0; j<NCOLS; j++){
bricks[i][j] = 1;
}
}
}
function mousemoved(e){ //function that enables movement of paddle with mouse
if(e.pageX > mouseXmin && e.pageX < mouseXmax) recx = e.pageX ;//- mouseXmin; <---why would you need that?Movement is bugyy! FIX:)
}
function buttonpressed(e){ //to check if any of keyboard arrow buttons are pressed
if(e.which==37) { leftDown = true; }
if(e.which==39) { rightDown = true; }
if(e.which==40) { upDown = true; }
if(e.which==38) { downDown = true; }
}
function buttonreleased(e){ //function to check if button up,down,left or right is released
if(e.which==37) { leftDown = false; }
if(e.which==39) { rightDown = false; }
if(e.which==40) { upDown = false; }
if(e.which==38) { downDown = false; }
}
function clear(){ //function to clear the stage
ctx.clearRect(0,0,800,600);
}
function circle(x,y,r){ //function to draw circle shape
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function rect(x,y,w,h){ //function to draw rectangle shape
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function checkforCoallision(){ //checks for borders of main canvas and if ball hits the paddle
if(ballx + dx > WIDTH-ballr || ballx + dx < ballr) dx = -dx;
if(bally + dy < ballr ) dy = -dy;
else if (bally + dy > HEIGHT - ballr){
if(ballx + ballr > recx && ballx + ballr < recx + recw)
dy = -dy;
else {clearInterval(intervalId); alert('Game Over,Baby!');} bounce();}
}
function draw(){ //function that draws the desired shapes and animates them
clear(); //clears the main canvas,so the animation would look smooth
checkforCoallision(); //checks for borders of main canvas and if ball hits the paddle
if(leftDown) recx -= rx; //enables movement of paddle right and left
if(rightDown) recx += rx;
for(i=0; i<NROWS; i++){ //drawing bricks
for(j=0; j<NCOLS; j++){
if(bricks[i][j] == 1) { //checking if brick exists
rect(j * (BRICKWIDTH+PADDING)+PADDING,i * (BRICKHEIGHT+PADDING) + PADDING, BRICKWIDTH, BRICKHEIGHT)
}
}
}
//have we hit a brick?
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(bally/rowheight);
col = Math.floor(ballx/colwidth);
//if so, reverse the ball and mark the brick as broken
if (bally < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
}
circle(ballx,bally,ballr);
rect(recx,recy,recw,rech);
ballx += dx;
bally += dy;
}
/* function init(){
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;
} */
function delay() {
if(y<=0) {
document.getElementById('content2').innerHTML = "<canvas id='can' width='300' height='300'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>";
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;
}
else {
Object = document.getElementById('content2');
y = y - 1;
Object.innerHTML = "<div style='text-align:center;width:25em;margin: 0px auto;height:100px;position:absolute;top:50%;margin-top:-50px;'>"+y+"</div>";
setTimeout("delay()", 1000);}
}
|
|||||||