Start with the keyword function and then give the function a name. It's good practice to use a name that is an action that describes what the function does. In this case, you are checking the player's guess, so an appropriate name for this function would be checkGuess.
After the function name, write a set of parentheses and then a set of curly braces. You will write the body of the function between these curly braces:. Right now, you need to get the player's guess from the number input field you set up in the HTML.
You can do that using the id attribute you assigned to the HTML elements, which in this case is guess :. JavaScript can get the number the player enters into the number input field by accessing its value. You can do this by referring to the element's id and adding. This time, use a let variable to hold the value of the user's guess:.
Whatever number the player enters into the number input field will be assigned to the myGuess variable in the checkGuess function. The next step is to compare the player's guess with the random number the game generates. You also want to give the player feedback to let them know if their guess was too high, too low, or correct. You can decide what feedback the player will receive by using a series of conditional statements. A conditional statement checks to see if a condition is met before running a code block.
If the condition is not met, the code stops, moves on to check the next condition, or continues with the rest of the code without running the code in the conditional block:. The comparison operator checks the value on the right, compares it to the value on the left, and returns the boolean true if they match and false if they don't.
If the number matches yay! Of course, there is a good chance that the player didn't guess right on the first try, so if myGuess and randomNumber don't match, give the player a clue to help them narrow down their guesses. If the first conditional fails, the code will skip the code block in that if statement and check to see if the next condition is true.
That brings you to your else if blocks:. If you were to read this as a sentence, it might be something like this: "If the player's guess is equal to the random number, let them know they got it right.
Otherwise else , check if the player's guess is greater than randomNumber , and if it is, display the player's guess and tell them it was too high.
The last possibility is that the player's guess was lower than the random number. To check that, add one more else if block:. If you look at your script, you'll see that some of the code runs automatically when the page loads, but some of it does not. You want to generate the random number before the game is played, but you don't want to check the player's guess until they have entered it into the number input field and are ready to check it. The code to generate the random number and log it to the console is outside of a function, so it will run automatically when the browser loads your script.
However, for the code inside your function to run, you have to call it. There are several ways to call a function. Here, you want the function to run when the player clicks on the "Check My Guess" button. Clicking a button creates a user event, which the JavaScript code can then "listen" for so that it knows when it needs to run a function.
The last line of code adds an event listener to the button to "listen" for when the button is clicked. When it "hears" that event, it will run the function assigned to the event listener:.
Just like the other instances where you access DOM elements, you can use the button's id to tell JavaScript which element to interact with. Then you can use the built-in addEventListener function to tell JavaScript what event to listen for. You have already seen a function that takes parameters, but take a moment to look at how this works. Parameters are information that a function needs to perform its task.
Not all functions need parameters, but the addEventListener function needs two. The first parameter it takes is the name of the user event for which it will listen. The user can interact with the DOM in many ways, like typing, moving the mouse, tabbing with the keyboard, or copying and pasting text. In this case, the user event you are listening for is a button click, so the first parameter will be click. The second piece of information addEventListener needs is the name of the function to run when the user clicks the button.
Note: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser. Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.
Ok, let's get started! Head to the first chapter— Create the Canvas and draw on it. Unfortunately Javascript's default "printf" is the dreaded and annoying alert function. In the end I concocted my own simple console facility which I implemented in a file console. For a default development environment I chose Mozilla Firefox, because it is somewhat more developer friendly than Internet Explorer.
The FireBug extension is essential for identifying Javascript errors and their location in source code. However, if you develop code to run in one browser, it will fail in the other browser, because you will write code which is not cross-browser compatible, so you do have to occasionally test the application in the other browser. And if something doesn't work as expected, "printf" debugging with console.
Everything is just objects, and all attributes and methods are simple named properties held in a hash map. However, every function has a special prototype property, which is shared between all objects that are constructed using the new operator applied to that function. This call creates a new empty object whose prototype is the Cat prototype, and then invokes the Cat function with the implicit dynamic this parameter set to the new object.
The properties of the Cat. So the value of myCat. And you can invoke the "method" sayHello as follows:. If this code is executed, you will get an alert box saying "Meow!! Similar to the new call, the method invocation on an object sets the dynamic this parameter to be the object that the method is being invoked on.
Unfortunately this somewhat roundabout way of defining classes and methods doesn't provide any easy way of doing inheritance, so if you want inheritance you might want to use one of the special Javascript libraries written to support inheritance.
As it happened, PrimeShooter TM wasn't complicated enough to need inheritance, so I didn't bother with this. I traced this to IE's "quirks" mode. Of course I then found that setting XHTML to strict broke several things in my existing Javascript code, in particular you cannot assign numerical values to position attributes; instead you have to write code like this:.
This probably counts as another reason why Javascript is not the optimal gaming platform: you have to convert all numerical co-ordinates into attribute strings just so that the browser can parse the strings and convert them back into numbers.
The "sprites" of your Javascript game are going to be DOM elements. To support the logic of the game these sprites will need to have attribute values maintained and updated. One way to do this is to take advantage of the free-form nature of Javascript and just define these attributes directly on the DOM elements. For examples of older code where I do this, see the Javascript in the source of the pages factorizer. However, this approach is a bit untidy, as it involves "polluting" an existing namespace i.
DOM element attributes. Also there is no way for the relevant DOM elements to belong to newly defined classes.
0コメント