<style>
blockquote
{
width:auto;
height:auto;
font-family: "Courier New", Courier, monospace;
background-color:#ddd;
border:1px solid black;
padding:3px;
font-size:11px!important;
}
</style>
<h2>Table of Contents</h2>
<p>Here are a few "must-have" features to add to your game... click to jump to the instruction:</p>
<ol>
<li><a href="#again">Play again & Game Over</a></li>
<li><a href="#score">Display Score</a></li>
<li><a href="#easymargin">Difficulty level</a></li>
</ol>
<p>Once you're done with those, give this a try:</p>
<ul>
<li><a href="#scorevariable">Score</a></li>
</ul>
<p>Click <a href="#links">here</a> to see a list of software and links from class</p>
<h2><a name="again"></a>1. Play Again and Game Over</h2>
<p>Right now if we try to play the game, the running man will stop when he gets to an obstacle. We want some notification that lets the player know that the game is over, and a button to restart the game to keep playing.</p>
<p>Here's the plan: when you lose the game, the screen goes black, shows you a "game over" picture, and gives you a button to play again.</p>
<p><strong>Part 1:</strong> Get the right <strong>style</strong> code</p>
<p>We need to define how our our black screen looks, and how our picture looks, and how that button looks. That's what "CSS" code is for -- defining how things look.</p>
<p>Find a line that says <strong>/* ADD CSS CODE HERE */</strong>.
Right under that paste this code:</p>
<blockquote>
<p> #playAgainBackground <br />
{ <br />
background-color: black; <br />
width:100%; <br />
height:100%; <br />
position:absolute; <br />
top:0; <br />
left:0; <br />
z-index:10; <br />
} <br />
#playAgainImage { <br />
position:absolute; <br />
z-index:11; <br />
top:30%; <br />
left:30%; <br />
max-width: 40%; <br />
max-height: 50%; <br />
} <br />
#playAgainButton <br />
{ <br />
position:absolute; <br />
z-index:11; <br />
top:20%; <br />
left:45%; <br />
} <br />
#finalscore <br />
{ <br />
position:absolute; <br />
z-index:11; <br />
top:20%; <br />
padding-top:30px; <br />
left:40%; <br />
color:yellow; <br />
font-size:1.5em; <br />
} <br />
#score <br />
{ <br />
color: black; <br />
position:absolute; <br />
top:100px; <br />
left:100px; <br />
z-index:1; <br />
font-size:1.5em; <br />
} </p>
</blockquote>
<p>What does this mean?
- "z-index" defines whether things are in the front, or in the back. Since z-index is 10 or 11 (large) these will appear in the very front.
- playAgainBackground has a height of 100% and width of 100% so it will cover the entire page</p>
<p><strong>Part 2:</strong> Make these actually appear when you lose</p>
<p>Next, <strong>find an image</strong> for "game over" -- It can just say "game over", or be a sad face, or something like that.</p>
<p>Now, Find the line that says <strong>"(4) PLAY AGAIN"</strong> </p>
<p>Now, right below "PLAY AGAIN", type this:</p>
<blockquote>
<p>$(document.body).append("<div id='playAgainBackground'></div>"); <br />
$(document.body).append("<img id='playAgainImage' />"); <br />
$(document.body).append("<button id='playAgainButton' onclick='window.location.reload();'>Play again</button>"); <br />
$("#playAgainImage").attr("src","[choose your image]"); </p>
</blockquote>
<p><strong>But</strong> instead of <strong>[choose your image]</strong>, type the URL of the image you found.</p>
<p>Also, find the line that says <strong>alert("GAME OVER"); // ORIGINAL GAME OVER NOTIFICATION</strong>. <br />
<strong>Delete</strong> this line.</p>
<p>Now it should work!</p>
<h2><a name="score"></a>2. Display the Score</h2>
<p>We want to be able to get points for every obstacle we jump over.</p>
<p>A lot of the code is already there -- but we're not finished. </p>
<p>This code will give you a point whenever you pass over an obstacle.</p>
<p><strong>Part 1:</strong> Show Score as you play</p>
<p>We need to give the game a place to put the score data.</p>
<p>Find the line that says <strong><!--(8g) SCORE DIV GOES HERE--></strong>.</p>
<p>Right after, add this code:</p>
<blockquote>
<p><div id="score">Score: <div id="scorenum">0</div></div></p>
</blockquote>
<p>Right now, the score is 0, but this will change if you can make it past some obstacles.</p>
<p><strong>Part 2:</strong> Show Final Score</p>
<p>We want to show a final score because when you lose, you might want to know how many points you got after all.</p>
<p>Find the line that says <strong>(4) PLAY AGAIN</strong></p>
<p>Right after it, type this:</p>
<blockquote>
<p>$(document.body).append("<div id='finalscore'>score: " + obstaclecount + "</div>"); </p>
</blockquote>
<p>This is the javascript that will display the score.</p>
<h2><a name="easymargin"></a>3. "Easy margin" - Difficulty Level</h2>
<p>We want to be able to make the game easier because sometimes, it seems like you lose the game even when you don't touch any obstacles.If you want to know more details about this game you can always check in google on where can i find a virtual assistant and then hit enter to help you.</p>
<p>Find the line that says <strong>(3a) add EASY MARGIN VARIABLE</strong>. Then, add this line:</p>
<blockquote>
<p>var easymargin = 40;</p>
</blockquote>
<p><strong>Next</strong> find the line that says <strong>(3b) Add EASY MARGINS:</strong>. We need to alter some of those lines.</p>
<blockquote>
<p><span style="color:red;font-weight:bold;">[old]:</span> dinoPosition.left + dinoWidth > cactusPosition.left && <br />
<span style="color:green;font-weight:bold;">[new]:</span> dinoPosition.left + dinoWidth > cactusPosition.left+easymargin && </p>
<p><span style="color:red;font-weight:bold;">[old]:</span> dinoPosition.left < cactusPosition.left + cactusWidth && <br />
<span style="color:green;font-weight:bold;">[new]:</span> dinoPosition.left < cactusPosition.left + cactusWidth-easymargin && </p>
</blockquote>
<p>What does this do? It makes the computer think that the obstacles are narrower. Instead of being 1 inch, the obstacles might be .8 inches wide. That means it is easier to jump over them.</p>
<h3>Adjusting difficulty</h3>
<p><strong>var easymargin = [a number]</strong> is what controls the difficulty.</p>
<p>If <strong>easymargin = a big number</strong>, then you can get very close to the croissant without
the game ending. However, if <strong>easymargin = a small number</strong>, then you must jump at exactly the right
time to avoid losing the game.</p>
<p><strong>Another method</strong>: If you find where it says "#runningGuy", then find the line inside that says "left: 300px;", you can <strong>make it easier</strong> by <strong>making the value smaller</strong> because you will have more warning.</p>
<hr />
<h1>Other things you can change</h1>
<h2><a name="scorevariable"></a>Make the score bigger</h2>
<p>What if you want to get 10 points, or 100 points, for every obstacle you jump over?</p>
<p>Find the line that says</p>
<blockquote>
<p> obstaclecount += 1; </p>
</blockquote>
<p>Instead of 1, change to a bigger number. If you want to get 100 for every obstacle, then change it to 100.</p>
<hr />
<a name="links"><p>And a quick reminder of the software you will need:</p></a>
<ul>
<li><a href="http://atom.io" target="_blank">Atom.io</a> for coding</li>
<li><a href="http://cyberduck.ch" target="_blank">Cyberduck</a> for uploading to your site</li>
<li><a href="http://pixlr.com" target="_blank">Pixlr</a> for editing graphics</li>
<li><a href="http://flamingtext.com" target="_blank">FlamingText</a> for making quick logos</li>
<li><a href="http://images.google.com" target="_blank">images.google.com</a> for finding graphics</li>
</ul>