OSdata.com

example source code
javascript.js

Building a game — open source code This is the actual source code from a new web game. See the game at thissideofsanity.com and read how this was built starting at example code.

This is the JavaScript file for the game.

This is example code from the SlamZee project and This Side of Sanity, released under Apache License 2.0.

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

This narrative uses anchor links so that you can follow the building of this software in chronological order. Go to software explanation to start reading. Go to thissideofsanity.com to see the working software.

example source code
javascript.js

This is the javascript.js file for the game.

This is example code from the SlamZee project and This Side of Sanity, released under Apache License 2.0.

move JavaScript to its own file
first pass

Finally separating out all of the JavaScript into its own include file.

<script src="./javascript.js" type="text/javascript"></script>

function startgame() {

document.getElementById("targetarea").innerHTML="<p align=\"center\">loading game</p>";

var startgameurlstring = "http://<?php echo $_SERVER['SERVER_NAME']; ?>/gameserver.php?start=villains";
var startgamexmlhttp = new XMLHttpRequest();
startgamexmlhttp.onreadystatechange=function()
  {
  if (startgamexmlhttp.readyState==4 && startgamexmlhttp.status==200)
    {
      document.getElementById("targetarea").innerHTML=startgamexmlhttp.responseText;
    }
else if (startgamexmlhttp.readyState==4) {newstring='code is '+startgamexmlhttp.status; document.getElementById("targetarea").innerHTML=newstring;}
  }
startgamexmlhttp.open("GET",startgameurlstring,true);
startgamexmlhttp.send();

return false;
} /* END FUNCTION startgame */


/* GLOBALS (property of window object) */
var slamcounter = 0;
var slamchoice;
var mastergamenumber;

function makeslam(whichchoice,gamenumber) {

if (slamcounter > 0 ) {

  return 0; /* prevent multiple slam attempts during animation delay */

} /* END IF */

slamcounter = 120; /* 1.2 seconds (in hundredths of a second) */
slamchoice = whichchoice; /* store value in a global */
mastergamenumber = gamenumber; /* store value in a global */

if ( whichchoice == 1 ) {

document.getElementById("broken1").style.visibility = "visible";

} /* END IF */

else {

document.getElementById("broken2").style.visibility = "visible";

} /* END ELSE */

return false;
} /* END FUNCTION makeslam */


function submitround(whichchoice,gamenumber) {

document.getElementById("targetarea").innerHTML="<p align=\"center\">loading next round</p>";

var submitroundurlstring = "http://<?php echo $_SERVER['SERVER_NAME']; ?>/gameserver.php?choice="+whichchoice+"&game="+gamenumber;
var submitroundxmlhttp = new XMLHttpRequest();
submitroundxmlhttp.onreadystatechange=function()
  {
  if (submitroundxmlhttp.readyState==4 && submitroundxmlhttp.status==200)
    {
      document.getElementById("targetarea").innerHTML=submitroundxmlhttp.responseText;
    }
else if (submitroundxmlhttp.readyState==4) {newstring='code is '+submitroundxmlhttp.status; document.getElementById("targetarea").innerHTML=newstring;}
  }
submitroundxmlhttp.open("GET",submitroundurlstring,true);
submitroundxmlhttp.send();

return false;
} /* END FUNCTION submitround */


function incrementvote(celebritynumber) {
var urlstring = "http://<?php echo $_SERVER['SERVER_NAME']; ?>/addvote.php?celebrity="+celebritynumber;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('celeb'+celebritynumber).innerHTML=xmlhttp.responseText;
    //document.getElementById("targetarea").innerHTML=xmlhttp.responseText;
    }
else if (xmlhttp.readyState==4) {newstring='code is '+xmlhttp.status; document.getElementById("targetarea").innerHTML=newstring;}
  }
xmlhttp.open("GET",urlstring,true);
xmlhttp.send();
  //document.getElementById("targetarea").innerHTML=celebritynumber;
  //document.getElementById("targetarea").innerHTML=urlstring;
return false;
} /* END FUNCTION incrementvote */

 /* GLOBALS (property of window object) */
<!-- this javascript snippet draws the temptation box -->
var temptationdelaytime = 6000; /* 6 second delay */
var intervalhandle;

var temptingswitch = false;

var hourcounter = 0;
var minutecounter = 0;
var secondcounter = 0;
var tenthsecondcounter = 0;
var hundredthsecondcounter = 0;

function checktimedispatcher() {

if ( slamcounter > 0 ) {

  slamcounter = slamcounter - 1 ; /* decrement */
  if ( slamcounter <= 0 ) {
    submitround(slamchoice,mastergamenumber);
  } /* END IF */

} /* END IF */

//document.getElementById("slamcounterelement").innerHTML= slamcounter; /* DEBUG */

var currentdate=new Date();
var currenttime= currentdate.toLocaleTimeString();
document.getElementById("timerelement").innerHTML= currenttime;

/* knocked out so that we look better - restore for debugging */
/* hundredthsecondcounter = hundredthsecondcounter +1;
document.getElementById("hundredthelement").innerHTML= hundredthsecondcounter;
if ( (hundredthsecondcounter%10) == 0 ) {
  tenthsecondcounter = tenthsecondcounter +1;
  document.getElementById("tenthelement").innerHTML= tenthsecondcounter;
  if ( (tenthsecondcounter%10) == 0) {
    secondcounter = secondcounter + 1;
    document.getElementById("secondelement").innerHTML= secondcounter;
    if ( (secondcounter%60) == 0) {
      minutecounter = minutecounter + 1;
      document.getElementById("minuteelement").innerHTML= minutecounter;
      if ( (minutecounter%60) == 0) {
        hourcounter = hourcounter + 1;
        document.getElementById("hourelement").innerHTML= hourcounter;
      } /* END hour check */
/*    } /* END minute check */
/*  } /* END second check */
/*} /* END tenth second check */

} /* END FUNCTION checktimedispatcher */

function celebrityswitcher() {

if (temptingswitch == false) { return false; } /* stop if the user wants to do something with current data */

var urlstringcelebrityswitch = "http://<?php echo $_SERVER['SERVER_NAME']; ?>/newcelebrity.php";
var xmlhttpcelebrityswitch = new XMLHttpRequest();
xmlhttpcelebrityswitch.onreadystatechange=function()
  {
  if (xmlhttpcelebrityswitch.readyState==4 && xmlhttpcelebrityswitch.status==200)
    {
    document.getElementById("maincontent").innerHTML=xmlhttpcelebrityswitch.responseText;
    }
else if (xmlhttpcelebrityswitch.readyState==4) {newstringcelebrityswitch='code is '+xmlhttpcelebrityswitch.status; document.getElementById("targetarea").innerHTML=newstringcelebrityswitch;}
  }
xmlhttpcelebrityswitch.open("GET",urlstringcelebrityswitch,true);
xmlhttpcelebrityswitch.send();

} /* END FUNCTION celebrityswitcher */

return to explanation of source code

OSdata.com is used in more than 300 colleges and universities around the world

Find out how to get similar high web traffic and search engine placement.

OSdata.com is used in more than 300 colleges and universities around the world

Read details here.

Tweets by @osdata

A web site on dozens of operating systems simply can’t be maintained by one person. This is a cooperative effort. If you spot an error in fact, grammar, syntax, or spelling, or a broken link, or have additional information, commentary, or constructive criticism, please e-mail Milo. If you have any extra copies of docs, manuals, or other materials that can assist in accuracy and completeness, please send them to Milo, PO Box 1361, Tustin, CA, USA, 92781.

Click here for our privacy policy.