My First Javascript Game - Constructing the Turn

In order to have any game run smoothly a you have to build in a flow, an ordered structure to the turn. Building this up for Chinchirorin was certainly not as straight forward as I thought it would be. The only thing more complex than getting the game to proceed in a logical manner for the player (also meaning in a way that they could track) was getting the scoring built in. The two tasks are closely related as it is possible for both the house and player to score automatic wins and losses on their respective turns. I chose to construct both the player and house turns seperately. Though given their similarity this was mostly a choice made to allow my own tracking of the programming to be simplified.

 

function houseturn ()

{stage=2;

score=0;

housescore=0;

winlose="undecided";

triples="undecided";

doubles="undecided";

yourscore=0;

rolldice ();

dieroll1.innerHTML="<p>"+die1+"</p>";

dieroll2.innerHTML="<p>"+die2+"</p>";

dieroll3.innerHTML="<p>"+die3+"</p>";

scoring ();

housescore=score;

if ((die1==4 || die2==4 || die3==4) && (die1==5 || die2==5 || die3==5) && (die1==6 || die2==6 || die3==6))

       {zelda.innerHTML="<p>4-5-6 Straight Kill Win! House Wins!</p>";}

if (triples=="yes")

       {zelda.innerHTML="<p>Leopards Win! House Wins!</p>";}

if (score==6)

       {zelda.innerHTML="<p>Big Six Win! House Wins!</p>";}

if ((die1==1 || die2==1 || die3===1) && (die1==2 || die2==2 || die3==2) && (die1==3 || die2==3 || die3==3))

       {zelda.innerHTML="<p>1-2-3 Straight Lose! You Lose!</p>";}

if (score==1)

       {zelda.innerHTML="<p>Asshole Ones! House Loses!</p>";}

if ((winlose=="undecided") && (score>0))

       {zelda.innerHTML="<p>House Scores "+housescore+", Your Turn!</p>"}

if ((winlose=="undecided") && (score==0))

       {zelda.innerHTML="<p>No Score - House Rolls Again!</p>";}

timer=setInterval(timefunction, 3000);}

 

The houseturn () function above, and playerturn () function below are pretty much identical. The only differences between them is what they set the stage to at the beginning of the turn, and in how the rolls produced during the turn affect the scoring and betting for the game. After designating the stage of the game the function sets all of the temporary score variables to zero. This is done so that previous rolls done in either past turns, or previous iterations of the current turn, can not confuse or make the scoring on the following roll incorrect. Next the dice are rolled, then scored, by calling other functions. Then there are a series of if statements measure whether roll was an automatic win are loss. If none of them apply, after that the last two if statements see whether any score was generated at all. If there was, the game precedes on to either the next turn, or comparing the two scores. If no score was generated, then the turn is repeated.

 

function playerturn ()

{stage=3;

winlose="undecided";

score=0;

triples="undecided";

doubles="undecided";

yourscore=0;

rolldice ();

dieroll1.innerHTML="<p>"+die1+"</p>";

dieroll2.innerHTML="<p>"+die2+"</p>";

dieroll3.innerHTML="<p>"+die3+"</p>";

scoring ();

yourscore=score;

if ((die1==4 || die2==4 || die3==4) && (die1==5 || die2==5 || die3==5) && (die1==6 || die2==6 || die3==6))

       {zelda.innerHTML="<p>4-5-6 Straight Kill Win! You Win!</p>";}

if (triples=="yes")

       {zelda.innerHTML="<p>Leopards Win! You Win!</p>";}

if (score==6)

       {zelda.innerHTML="<p>Big Six Win! You Win!</p>";}

if ((die1==1 || die2==1 || die3===1) && (die1==2 || die2==2 || die3==2) && (die1==3 || die2==3 || die3==3))

       {zelda.innerHTML="<p>1-2-3 Straight Lose! You Lose!</p>";}

if (score==1)

       {zelda.innerHTML="<p>Asshole Ones! House Loses!</p>";}

if ((winlose=="undecided") && (score>0))

       {zelda.innerHTML="<p>You Score: "+yourscore+"</p>"}

if ((winlose=="undecided") && (score==0))

       {zelda.innerHTML="<p>No Score - You Roll Again!</p>";}

timer=setInterval(timefunction, 3000);}

 

It became apparent to me after rhe initial programming was done, that it was quite possible for the game to generate, process, and report results, and then move on, before I could even read that it had done the first step, much less what the results had been. This was the reason that I added the timer line at the end of the player and house turns. I needed to create a function that would simply tell the game to puase, allowing the player to see what was rolled or what was scored - so that they understood what the game wanted them to do next.

 

I mentioned stages briefly earlier when describing how I set up the turns. The stage variable was meant to be a variable that the game could refer to, to let it know what part of the game it currently is running, and therefore what it needed to run next. If the timefunction is called it checks what stage the game is in, as well as ant other important parameters such as the score, and tells the game which function to run next. I set the game up to follow these stages: 1=beginning/place initial bet, 2=houseturn, and 3=playerturn.

 

function timefunction ()

{clearInterval (timer);

if (stage==1)

       {houseturn ()} else

if (stage==2 && winlose=="undecided" && score==0)

       {houseturn ()} else

if (stage==2 && winlose=="undecided" && score>0)

       {playerturn ()} else

if ((stage==2 || stage==3) && (winlose=="win" || winlose=="lose"))

       {autoresolve ()} else

if (stage==3 && winlose=="undecided" && score>0)

       {playerturn ()} else

if (stage==3 && winlose=="undecided" && score>0)

       {comparescore ()}}

 

The last function that was put in to have directdirect bearing on the processing of the turn was the autoresolve function below. This function was designed to be called win an auotmatic win or loss condition was met in one of the turns. It would then call the appropriate end of the round win or loss resolution based on the stage it was called and the score.

 

function autoresolve ()

{if (stage==2 && winlose=="win")

       {stage=2.5;

       youlose ();}

if (stage==2 && winlose=="lose")

       {stage=2.5;

       youwin ();}

if (stage==3 && winlose=="win")

       {stage=3.5;

       youwin ();}

if (stage==3 && winlose=="lose")

       {stage=3.5;

       youlose ();}}

Javascript Game pt. 2 - Rolling the Dice

 Since this game revolves around rolling dice, that is the first thing that I needed to do. Rolling a die is in essence, a random number generation function. So I ended up with the following function:

function rolldice ()

{die1=Math.floor(Math.random ()*6+1);

dieroll1.innerHTML="<p>"+die1"<p>";

die2=Math.floor(Math.random ()*6+1);

dieroll2.innerHTML="<p>"+die2+"<p>";

die3=Math.floor(Math.random ()*6+1);

dieroll3.innerHTML="<p>"+die3+"<p>";}

Math.floor () is the Javascript round down command. Therefore Math.floor (12.6) would result in 12. Nested inside the round down command I placed the actual random generator. Math.random by itself will generate a random decimal greater than zero, but less than one, and up to 10 digits long. Therefore to turn this random generation into a method that resulted in an integer between one and six, I had to multiply the result by six, add one, and round it down – as shown above. In totality the rolldice () function showed above will obtain a random die result for three dice, and then show them in the HTML of the page.

Javascript Game pt. 1 - Defining the Variables

I have learned that the best way to learn something is to do it. Therefore in my quest to learn Javascript I set myself the task of programming a game. I based this game off of an ancient Asian dice game used to gamble, known here in America as Chinchirorin. The basic rules for this game can be found here. This really taught me a lot, especially in terms of planning out how to program something. Previous to this the program effects I was trying to accomplish through Javascript were relatively simplistic.

It turns out that the keys to successfully defining a larger Javascript project is to successfully map the functions that you'll need as well as the variables. In this particular blogpost I'm going to only review the variables that I ended up defining for this game, a list whose length surprised me. All these variables I defined in a list at the beginning of my embedded script.

var housemoney=500; (This variable is what I used to track the money held by the bank that the player could gamble against and potentially win. Though you could create the game without this variable, the game would be endless without it. I used it in the programming to track when the player has 'broke the bank' and provide a win condition to the game.)

var h0us3m0n3y=document.getElementById("housemoney"); (This variable was created to interact with the HTML of the page so that the current amount of house money could be displayed and updated.)

var yourmoney=50; (This is the variable that I used to set how much money the player had available to bet. If a player runs out of this they could lose.)

var y0urm0n3y=document.getElementById("yourmoney"); (This variable was created to interact with the HTML of the page so that the current amount of player money could be displayed and updated.)

var housescore=0; (The internal variable to define what the house scored on a given turn barring a auto-win/loss.)

var h0us3sc0r3=document.getElementById("housescore"); (This variable was created to interact with the HTML of the page so that what the house scored could be displayed and updated.)

var yourscore=0; (The internal variable to define what the player scored on a given turn barring a auto-win/loss.)

var y0ursc0r3=document.getElementById("yourscore"); (This variable was created to interact with the HTML of the page so that what the player scored could be displayed and updated.)

var score=0; (The internal variable designed to keep track of a score on a given roll. This was then reassigned to the yourscore or housescore variable as appropriate. Resets every roll.)

var yourbet=0; (The internal variable designed to keep track of what the player chose to bet on a given turn.)

var y0urb3t=document.getElementById("yourbet"); (This variable was created to interact with the HTML of the page so that what the player chose to bet could be displayed and updated.)

var housebet=0; (The internal variable designed to track the house's bet on a given turn.)

var h0us3b3t=document.getElementById("housebet"); (This variable was created to interact with the HTML of the page so that the player knew that the house always matched their bet, and the the house's bet could be displayed and updated.)

var die1=0; (The internal variable designed to keep track of the result of die rolls on the first die.)

var dieroll1=document.getElementById("die1"); (A variable designed to interact with the HTML of the page so that the results of the die rolls of the first die could be displayed and updated.)

var die2=0; (The internal variable designed to keep track of the result of die rolls on the second die.)

var dieroll2=document.getElementById("die2"); (A variable designed to interact with the HTML of the page so that the results of the die rolls of the second die could be displayed and updated.)

var die3=0; (The internal variable designed to keep track of the result of die rolls on the third die.)

var dieroll3=document.getElementById("die3"); (A variable designed to interact with the HTML of the page so that the results of the die rolls of the third die could be displayed and updated.)

var winlose="undecided"; (An internal variable designed to keep track of whether a given roll matched a automatic win or loss condition.)

var triples="undecided"; (An internal variable designed to keep track of whether the roll result was a triple.)

var doubles="undecided"; (An internal variable designed to keep track of whether the roll result was a double.)

var stage=0; (An internal variable designed to keep track of what stage the game is currently at so that the programming can implement the appropriate next functions, or wait for player input.)

var zelda=document.getElementById("zelda"); (This variable was arbitrarily named after my cat. It was created to interact with the bottom text bar of the page, and display announcements about game play as they were triggered.)

Announcing Urban Hermit Games

Since writing last I have been focusing my efforts on a website that I have worked to help launch. As one of the founding members I will have many more interesting experiences to share with this process that I have been going through in founding this website with my partner: the Hermit. Please go and check out Urban Hermit Games! I will need to do further posts on finding and configuring a VPS, choosing your VPS OS and configuring it, learning SSH, choosing your web content management system, and then making it work. However setting up this website has been an interesting experience to say the least.

We are currently trying to set up some social media interaction and see if we can find a way to get the free SSL certificate we obtained to not slow down our site by 200%. I have also managed to program a somewhat complex if terribly ugly game. At least it functions the way its supposed to. So there is much to come on this blog! There may even be reviews for the free library-boosting utilities that I originally intended to focus this blog on soon. But please, go take a look at Urban Hermit Games!

Submission Experience

                So this is meant to be a review of my experiences trying to submit the websites I work on to search engines. Though I started this experiment using this blog, which is posted through the third party sites (tumblr.com, wordpress.com, and blogspot.com); I found I was unable to use my blog as a good demo for the search engine submission process. I quickly found that with the two largest search engines (Google and Bing) the way to submit your site is by using their webmaster tools, and to do this you had to be able to alter the header HTML, or create a meta-tag on the site with a specific key – or otherwise modify the site to show the specific key generated for you. This is not readily apparent or easy for you to do with these third party sites. That said there are ways. So far I have only investigated this with the wordpress.com site, but if you install certain SEO plugins they have ways through their options or setting settings menu for you to just input the key generated. The specific plugin I used was the All in One SEO Pack.

                Naver and Daum both serve as phone directories in their respective countries as well as web search engines. So the default URL submission settings include a space where you are supposed to put your phone number, and of course the country area codes are restricted to Asia. In Naver you can just leave the phone number blank and hit submit and it will process just your website. For Daum there are bubble options right before the URL submission box, start clicking them until you find the one that just shows the URL submission box, and hides the phone number box. This is the option to submit just a website; once you have the right button clicked you can submit your website.

                Qihoo 360 Search had a slightly longer form where you also had to submit your email and a captcha. Yahoo gets their search results from Bing, so your use of their webmaster tools covered Yahoo as well, they also pull their directory results from DMOZ so you can submit there to possibly be included in the Yahoo Directory. The rest of the search engines mentioned in my first post on submitting to search engines were extremely easy; basically input the URL and hit go. All told if you are already registed with a Microsoft and Google account, the whole process should take less than 25min. If you have to create new accounts for them however you could easily tack on another 15-30 minutes.

Submitting to Search Engines

            Part of every webmaster's job will be submitting their creations to search engines. Even if you are not a digital librarian directly responsible for submitting your library's site to search engines you may find a buried treasure on the internet that you wish was a whole lot easier to find than it turned out to be. Many librarians then feel this mild case of OCD trying to understand if there is some form of corrective indexing or cataloging you can do to help others more easily find this information in the future. Well yes there is, you can submit these hidden websites to search engines. I found myself wishing that I had thought, or been told to, do this simple step with some of my library class projects.

Submitting a site to a search engine is about more than finding that site. If you prepare a site well enough before submission your site can be listed in the top 10 search results for your relevant keywords – this has become the best way to gain traffic to your sit; beating out some of the classics such as banner advertising.

There are several apparent ways to achieve comprehensive URL submission after first googling the problem. There are a myriad of websites out there, including a good many free ones, which will do this for you. They will submit your site from anywhere from 10-400 search engines. Sounds awesome right? Not really, first of all when looking through these you rarely learned all of the search engines that you would be submitting to. Secondly, these sites did not usually specify how they were submitting your site (many search engines will only take certain kinds of submissions) so there was no way of checking to see if your site was being submitted in a way that actually worked. Finally, many of these sites attempt to submit your site over and over again. This is called spamming your site, and actually gets it blocked or ranked lower in many search engines. Once again it is difficult if not impossible to tell which submission service do this, and which do not. So like many things in life, it turns out that if you want to do this properly, you ought to do it yourself.

Whenever I have read about site submission previously, it has always been written about hand in hand with SEO, or search engine optimization. If you don't know what this is, it is the idea of promoting your site by having it appear near, if not at, the top of the results list when someone types in a relevant search query. It is true that submitting your site is the final step of the SEO process (likely why it is mentioned there), but this process is only something that can really be controlled if you have access to your website's base HTML code. People who have used turnkey solutions, blogs, or have some other sort of preformatted web site you want to submit not have the ability to affect this process in the traditional way. However you may have something in your authoring or control panel that will allow you do things like choose your keywords for your articles – this does filter down into SEO. The main point here though is that I had thought that I would need the traditional information compiled for SEO in order to submit my site. This is not true, you only need your site's URL, and to occasionally prove you are not a robot.

             So now you're ready to submit to search engines, but which search engines do you want to submit to, and how many are you going to submit to? Part of this answer is obvious. If you only want to submit to one engine, by far the most popular search engine in the world is Google. So if nothing else you should submit here. The next question to ask is how global you want your website to be. It is true that Google by itself takes care of the majority of that too; however there are certain countries where Google is not the top search engine. These are: Yahoo! (Japan), Baidu (China), Yandex (Russia), Naver (South Korea), and Seznam (Czech Republic). Next you may want to consider including the runner-ups in your list as well, after all if you include Yahoo! and Bing, you already have the majority of that list covered. There were several search engines that were originally on my list which I ended up excluding because they either: directly used the search results of another search engine already on my list, or did not accept URL submissions at all- they get all of their data directly from their crawling bots. The only way to get included on the latter type of search engines is to ensure that other sites have links that will lead them to your site. Perhaps the best way to do this is to create social media splash pages, or a Wikipedia entry. After all is said and done I ended up with the list below.

 

           

·         Baidu – Baidu Submit

·         Bing – Bing Submit

·         Daum – Daum Submit

·         DMOZ Open Directory Project – DMOZ Submit*

·         Google – Google Submit

·         Naver – Naver Submit

·         Seznam – Seznam Submit

·         Qihoo 360 Search – Qihoo 360 Search Submit

·         Yahoo! - Yahoo! Submit

·         Yandex – Yandex Submit

 

*Unlike the other links this is not the actual submission page, but the submission guidelines and instruction page. To submit properly on DMOZ you have to go directly to the most appropriate category for your page to be filed under and then click on the submit URL link at the bottom of that category's page. 

My Second JavaScript

                So I have now completed my second JavaScript exercise, short, sweet, and right below:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Second Javascript Lesson</title>

</head>

<body>

<script>

function relister ()

{var text = document.getElementById('text').value;

var count = document.getElementById('count').value;

var zelda = document.getElementById('zelda');

while (count>0)

{zelda.innerHTML=zelda.innerHTML+"<p>"+text+"</p>";

count=count-1}}

</script>

<form>

Text: <input type="text" name="text" id="text" /><br>

Count: <input type="text" name="count" id="count" /><br>

</form>

<button type="button" onclick="relister ()">Submit</button>

<div id="zelda">

</div>

</body>

</html>

 

                The idea with this exercise was for me to learn how to grab input for the user and then be able to manipulate it with JavaScript. So I needed to let a web-surfer enter a string or phrase, and then a number separately, and then when they hit a button this would list that phrase that number of times at the bottom of the page. I actually learned a little HTML that I didn't know before this as I had never really created any sort of form or input button just using basic HTML code before. Previously I had used a graphics editing software to make custom buttons and the like.

                To be able to pull information from a form you have to define that information as a variable.  You then set that newly defined variable=document.getElementByID('destinationID').value in order to tell your script to pull the value of that variable from the input in the form. You do have to be careful to link the form's HTML id tag inside the quotes exactly to the right variable's tag inside it's quotes and parenthesis. Then create another variable and div id tag matchup where you want to write your output text. Finally you put in the while JavaScript above the loop that actually writes the new content. The while loop will keep writing the new content until the count hits zero, and every time it writes the content the count is reduced by one. Finally by adding the new writing to the current content of the div tag we can insure the lines are repeated, rather than replaced.