/    Sign up×
Community /Pin to ProfileBookmark

Dot Race

Copy linkTweet thisAlerts:
Mar 30.2007

My fraternity president wants me to design a web page for him for a drinking game idea that he has with the following javascript program. I am supposed to be designing a page that allows the user to simulate a race between two dots.
So like the page at the top will have a text box called Race Length where the user can enter the length for the race. Lower in the page will betwo text boxes, one for the red dot and one for the blue dot that show where the red dot and blue dot are location wise in the race. Lower in the page will be a button called Take A step. Each time the user clicks the button called Take a Step each dot should move forward a random amount (one, two or three). When one of the dots crosses the finish line meaning that it’s position is greater than or equal to the goal distance an alert box should appear to identify the winner. I also want the code to be able to recognize a tied race and display an appropriate message in the alert box.

Here is what I need help with:

I’ve been absent from class for 2 weeks with a very bad sinus infection so I’m really unsure on how to create a function that does this. Could anyone help me? I don’t need any help with the textboxes and buttons, just the function to make it happen. I’ve created a picture in paint just to show what I’m talking about a little easier. I appreciate any help that is given. Thanks in advance.
Here is the picture to what they layout will look like:
[URL=”http://img172.imageshack.us/img172/7623/dotracehz1.jpg”]http://img172.imageshack.us/img172/7623/dotracehz1.jpg[/URL]

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootMar 30.2007 — Ahem...

Not good for ones health, drinking games may be fun but recent incidents where young people have drunk themselves to death have cropped up in the media. Binge drinking, including drinking games is dangerous and people forget that alcohol is a controled substance, classed as a drug and as with any drug taken in excess, you could wind up dead.

Alcohol isnt a sociable drug in anycase, so promoting it is only adding to the social problems it causes.
Copy linkTweet thisAlerts:
@disgracianMar 30.2007 — I don't think this is the appropriate forum for climbing the soapbox, ..

Jama, do you actually want two physical dots moving across the screen? That would be more fun, I think.

Cheers,

D.
Copy linkTweet thisAlerts:
@rootMar 30.2007 — Soap box!

If the guy wants to drink him and his friends under the table, fine, IM merely pointing out that encouraging binge drinking is seriously dangerous.

Asking for a game to encourage it is irresponsible and offering help to writ it is even more irresponsible.

This is a forum to ask for help with programming, not to encourage binge drinking.
Copy linkTweet thisAlerts:
@disgracianMar 30.2007 — Having a few drinks over a Javascript game is not binge drinking, it's not even close. Your protests are noted though.

Cheers,

D.
Copy linkTweet thisAlerts:
@David_HarrisonMar 30.2007 — . I'm sure that he is aware of the dangers of drink, I'm sure everyone is. But he wants to make a drinking game, and it's not against the law, so just let it be.
Copy linkTweet thisAlerts:
@disgracianMar 30.2007 — Here you go, Jama, knock yourself out.
<html>
<head>
<title>Online Dot Racing</title>
<script type="text/javascript">
function validate(f){
var input=parseInt(f.value);
if(isNaN(input)||input>100||input<10)
document.getElementById("error").style.visibility="visible";
else{
document.getElementById("error").style.visibility="hidden";
startRace();
}
}
function startRace(){
var form=document.forms[0];
form.raceLength.disabled="disabled";
form.red.disabled=false;
form.red.value=0;
form.blue.disabled=false;
form.blue.value=0;
form.step.disabled=false;
}
function takeStep(){
var form=document.forms[0];
var theWin=form.raceLength.value;
form.red.value=advance()+parseInt(form.red.value);
form.blue.value=advance()+parseInt(form.blue.value);
checkForWin(parseInt(form.red.value),parseInt(form.blue.value),theWin);
}
function advance(){
return Math.ceil(Math.random()*3);
}
function checkForWin(red,blue,win){
if(red>=win && blue>=win){
stopRace("IT'S A DRAW!");
}else if(red>=win){
stopRace("RED WINS!");
}else if(blue>=win){
stopRace("BLUE WINS!");
}
}
function stopRace(result){
var form=document.forms[0];
alert(result);
form.raceLength.disabled=false;
form.raceLength.value="";
form.red.disabled="disabled";
form.red.value=0;
form.blue.disabled="disabled";
form.blue.value=0;
form.step.disabled="disabled";
}
</script>
<style type="text/css">
body,form{width:400px;margin-left:auto;margin-right:auto;text-align:center;}
fieldset{margin:10px;text-align:center;}
input{font-family:monospace;}
div#error{color:red;visibility:hidden;}
.red{color:red;}
.blue{color:blue;}
</style>
</head>
<body>
<h1>Online Dot Racing</h1>
<form>
<fieldset>
<legend>Race Length</legend>
<label for="raceLength">Length (10-100):</label>
<input type="text" name="raceLength" size="3" maxlength="3" onchange="validate(this);">
<div id="error"><small>Invalid length! Had too much to drink already?</small></div>
</fieldset>
<fieldset>
<legend>Race Progress</legend>
<label class="red" for="blue">Red:
<input class="red" type="text" name="red" size="3" readonly="readonly" disabled="disabled">
<label class="blue" for="blue">Blue:
<input class="blue" type="text" name="blue" size="3" readonly="readonly" disabled="disabled">
</fieldset>
<fieldset>
<legend>Game Controls</legend>
<input type="button" name="step" value="Take a Step" disabled="disabled" onclick="takeStep();">
</fieldset>
</form>
<hr>
<p>Javascript by disgracian, 2007</p>
</body>
</html>
Cheers,

D.
Copy linkTweet thisAlerts:
@Jama0604authorMar 30.2007 — Thank you very much guys. I really appreciate it. Haha, as for drinking, I personally do not enjoy partaking in it. I honestly think that I get allergic reactions to it, but if my "brothers" that are 21 want to drink they can do it. I've seen my roommates health gone from almost perfect to just horrible because of a drinking problem so it's not something that looks really fun to me. I'd rather play video games. >=)


Thanks for the help guys, I really appreciate it.
Copy linkTweet thisAlerts:
@disgracianMar 31.2007 — Version 2, where the dots actually run along the screen. Much more fun.
<html>
<head>
<title>Online Dot Racing v2.0</title>
<script type="text/javascript">
var form,length,red,blue,step;
var redValue=0,blueValue=0,theWin=0;

<i> </i> function validate(raceLength){
<i> </i> var input=parseInt(raceLength.value);
<i> </i> if(isNaN(input)||input&gt;100||input&lt;10)
<i> </i> document.getElementById("error").style.visibility="visible";
<i> </i> else{
<i> </i> document.getElementById("error").style.visibility="hidden";
<i> </i> startRace(input);
<i> </i> }
<i> </i> }
<i> </i> function startRace(raceLength){
<i> </i> form=document.forms[0];
<i> </i> red=form.red,blue=form.blue,step=form.step;
<i> </i> theWin=raceLength;
<i> </i> form.raceLength.disabled="disabled";
<i> </i> red.disabled=false;
<i> </i> red.value="*";
<i> </i> blue.disabled=false;
<i> </i> blue.value="*";
<i> </i> step.disabled=false;
<i> </i> }
<i> </i> function takeStep(){
<i> </i> redValue+=advance();
<i> </i> blueValue+=advance();
<i> </i> red.value=writeStep(redValue);
<i> </i> blue.value=writeStep(blueValue);
<i> </i> checkForWin(redValue,blueValue,theWin);
<i> </i> }
<i> </i> function advance(){
<i> </i> return Math.ceil(Math.random()*3);
<i> </i> }
<i> </i> function writeStep(x){
<i> </i> var ratio=parseInt(red.size)/theWin;
<i> </i> var shift=Math.ceil(x*ratio);
<i> </i> var newValue="";
<i> </i> for(var i=0;i&lt;shift;i++)
<i> </i> newValue+=" ";
<i> </i> newValue+="*";
<i> </i> return newValue;
<i> </i> }
<i> </i> function checkForWin(red,blue,win){
<i> </i> if(red&gt;=win &amp;&amp; blue&gt;=win){
<i> </i> stopRace("IT'S A DRAW!");
<i> </i> }else if(red&gt;=win){
<i> </i> stopRace("RED WINS!");
<i> </i> }else if(blue&gt;=win){
<i> </i> stopRace("BLUE WINS!");
<i> </i> }
<i> </i> }
<i> </i> function stopRace(result){
<i> </i> form.raceLength.disabled=false;
<i> </i> form.raceLength.value="";
<i> </i> red.disabled="disabled";
<i> </i> red.value="";
<i> </i> blue.disabled="disabled";
<i> </i> blue.value="";
<i> </i> step.disabled="disabled";
<i> </i> alert(result);
<i> </i> }
&lt;/script&gt;
&lt;style type="text/css"&gt;
body,form{
width:400px;margin-left:auto;margin-right:auto;
text-align:center;
}fieldset{
margin:10px;text-align:center;
}input{
font-family:monospace;
}div#error{
color:red;visibility:hidden;
}table{
margin-left:auto;margin-right:auto;
}td.red{
color:red;text-align:right;
}td.blue{
color:blue;text-align:right;
}input.red{
color:red;
}input.blue{
color:blue;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Online Dot Racing v2.0&lt;/h1&gt;
&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;Race Length&lt;/legend&gt;
&lt;label for="raceLength"&gt;Length (10-100):&lt;/label&gt;
&lt;input type="text" name="raceLength" size="3" maxlength="3" onchange="validate(this);"&gt;
&lt;div id="error"&gt;&lt;small&gt;Invalid length! Had too much to drink already?&lt;/small&gt;&lt;/div&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt;Race Progress&lt;/legend&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td class="red"&gt;&lt;label for="blue"&gt;Red:&lt;/td&gt;
&lt;td class="red"&gt;
&lt;input class="red" type="text" name="red" size="20" readonly="readonly" disabled="disabled"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="blue"&gt;&lt;label for="blue"&gt;Blue:&lt;/td&gt;
&lt;td class="blue"&gt;
&lt;input class="blue" type="text" name="blue" size="20" readonly="readonly" disabled="disabled"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt;Game Controls&lt;/legend&gt;
&lt;input type="button" name="step" value="Take a Step" disabled="disabled" onclick="takeStep();"&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;hr&gt;
&lt;p&gt;Javascript by disgracian, 2007&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rootMar 31.2007 — Having a few drinks over a Javascript game is not binge drinking...[/QUOTE]

You really should take the fraction of time out to take a look at exactly what constitutes binge drinking... You will be shocked to find that even seasoned drinkers that have tollerance can also binge drink...

Binge refers to the number of drinks in proportion what the person normally consumes over a period of time, that can be days, weeks or longer. When the person consumes more than normal over a shorter period of time then that person is binge drinking. When you go out and get "Hammerd" or "Wrecked" or "Wasted" your binge drinking.

IM sorry but to brush off this subject as you are without knowing the facts will give the readers of this thread the wrong idea about what binge drinking is.

IM finished with the subject, no offence, but I do know what IM talking about as well, I have been ther, got the 'T' shirt, Coffee cup and desk tidy set...
Copy linkTweet thisAlerts:
@disgracianApr 01.2007 — http://en.wikipedia.org/wiki/Binge_drinking

Read the first sentence and take some of your own medicine. Now, try to remember that this is a Javascript forum and constrain your "advice" to the topic. This is not the place to enforce your narrow moralistic definitions on the rest of us.

Cheers,
Copy linkTweet thisAlerts:
@David_HarrisonApr 01.2007 — OK, from this point on there will be [b]no[/b] mention of drinking (except that which is in relation to some actual code). This isn't a debate forum, so leave your perspective viewing angles at the door. I don't want to lock the thread, but if it deteriorates any further I will.
Copy linkTweet thisAlerts:
@rootApr 01.2007 — Im done. That link upholds my end of the argument m8, read it again.

Ok, so its OK to ask for games, can some one whip up some code for me,

Some friends would like a charlie race, they need a couple of white lines on a black background, the game is meant to simulate a snorting race, yes they want to binge on cocaine. The winner is whose line disapears the fastest.

Can this be done?
×

Success!

Help @Jama0604 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...