Now that you know how to use function, we'll combine it with some other control flowstatements (like if/else) to create a football shooting mini game.
In this game, you'll face a goalie(which is left-handed or right-handed: 70% and 30% to catch the football from two sides,you don't know you have 10 chance of shooting, try to find the lower-probability side and shoot and give the higher mark!share the game with your friend!
How to create probability WITH if statement: we make a random number from 0 to 1 and so
We can use both ways.
All right! Let's start by declaring the variables we'll be using. We'll need:
Declare and set the following variables:
We use Math.random()to create a random number from 0 up to 1. For example, 0.5
Great! Now we want to add a couple of branches to our program so it can handle different outcomes. You know what this means: if and else
Create an if/else statement that checks the value of var ran.(if it is over certain value players can make a goal eg.ran >0.3 to make a probablilty of 30% for goalie to catch the ball and shooting fails) If it's >0.3 , it should print a congratulatory message (goal!!), saying that you make a goal. If it's < =0.3, it should print a message saying that the goalie catched the ball,you failed.
Stuck?
Get a hint!
We use document.getElementById(myid).innerHTML = "xxx"to change the targeted element with id=myid(<p id="myid"> </p>) into "xxx".
Create an if/else statement that checks the value of var ran. (if it is over certain value players can make a goal eg.ran > 0.7 to make a probablilty of 70% for goalie to catch the ball and shooting fails). If it's >0.7 , it should print a congratulatory message (goal!!), saying that you make a goal. If it's <= 0.7, it should print a message saying that the goalie catched the ball, you failed.
Create a button(left) that running a function when you click it,so we want it shows whether player makes a goal -- It should print a message saying that you make a goal.Or the goalie catched the ball,you failed.
How to make a button: <button type="button" onclick="myFunction()">shooting from left</button>
1.Write something in script
&<script>
function myFunction() {
document.getElementById("demo").innerHTML = "xxx"; }
</script>
2.Write the if statement in myfunction:
function myFunction() {
if(x>certain_value)
document.getElementById("demo").innerHTML = "xxx";
else { document.getElementById("demo").innerHTML = "zzz";
}
<button onclick="shootingleft()">Left</button>
<script>
function shootingleft() {var ran=Math.random();
if(ran<0.3)
{document.getElementById(x).innerHTML = " L:succeed"; }
else{document.getElementById(x).innerHTML = " L:fail";}
}
</script>
<p id="1"></p>
Create a button(right) that is basically the same with left button. One button make the function run once and require one html element so we add 9 more p-element and assign id value to them to make message area for 10rounds.
Running the function document.getElementById("demo").innerHTML = "gameover"+"XXX" when you click it after 10 times,so we want it shows THE FINAL MARK.
Create an if/else statement that checks the value of var round.(if it is equal to 11 players cannot make a goal anymore ) it should print a message saying that game over! and show the final mark.
Final code:
<!DOCTYPE html>
<html>
<body>
<p>this is a shooting game;you are about to kick the football</p>
<p>the goalie is left-handed or right-handed(TIP: find that and imporve your mark,you can invite your friend to play it:D)</p>
<p>YOU HAVE ONLY 10 CHANCES!!!</p>
<p>which side are you going to shoot?</p>
<button onclick="shootingleft()">Left</button>
<button onclick="shootingright()">Right</button>
<script>
var x =1;var mark=0;
function shootingleft() {var ran=Math.random();
if(ran<0.3)
{document.getElementById(x).innerHTML = "ROUND "+x+ " L:succeed";mark++;}
else{document.getElementById(x).innerHTML ="ROUND "+x+ " L:fail";}
x++;
if(x==11)document.getElementById("gameover").innerHTML ="game over!you got "+mark+"marks";
}
function shootingright() {var ran=Math.random();
if(ran<0.7)
{document.getElementById(x).innerHTML = "ROUND "+x+ " R:succeed";mark++;}
else{document.getElementById(x).innerHTML ="ROUND "+x+ " R:fail";}
x++;
if(x==11)document.getElementById("gameover").innerHTML ="game over!you got "+mark+"marks";
}
</script>
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<p id="4"></p>
<p id="5"></p>
<p id="6"></p>
<p id="7"></p>
<p id="8"></p>
<p id="9"></p>
<p id="10"></p>
<p id="gameover"></p>
</body>
</html>
Check your code see if there is any bug and fix it and improve your code by add more useful function.Finally.simplify your code in your way.
Add useful functions:
Add useful functions:
You probably find that the probability is easy to remember after playing the game several times, so we need a function to swap the probabilities on two sides.
Tip:
use if statement and Math.random()to create a random number from 0 to 1 ,if the random number is over 0.5,swap the probabilities.
Make it clear and short.
We don't like the repeated code so we try to change the repeated part in your code! Eg:
{document.getElementById(x).innerHTML = "ROUND "+x+ " L:succeed";mark++;} else{document.getElementById(x).innerHTML ="ROUND "+x+ " L:fail";}
Here we write the document.getElementById(x).innerHTML twice but with different content to print.
We can use var text to record the different content and replace document.getElementById(x).innerHTML = "ROUND "+x+ " L:succeed"; bydocument.getElementById(x).innerHTML = text;
However,changing on code is regular work for programmers. It is time to say goodbye but not the time for finish. You can add more functions and change your game totally and make it your own game!
Here is some idea you may consider:
Reference:
(Bcakground picture Source from: http://disney.wikia.com/wiki/File:Baymax_commercial.png)