Computer Coding/Programming


The video above gives a basic idea of what computer programming is all about.  If you want to learn coding, JavaScript is a great starter language.  It is the programming language for all Internet browsers and is completely free to use.  There are also a lot of great free online tutorials like www.w3schools.com/js
 
At the bottom of this page is and extremely simple JavaScript game of Frogger, much like the game Polly and I made in the video.  It's only 30 lines of code, so it is not a very exciting game, but it's a start.  If you want to learn JavaScript, learn exactly how this code works, and then enhance it to make me game much better. 
 
To get it running, use Notepad to save the code as Frogger.htm then double click the file to open it in your browser. 
 
How the code works
---------------------
The first line simply print on the screen and the BR tag means break or new line. 
 
The two DIV tags define the frog in the car and the position absolute setting makes them movable around the screen. 
 
The four input tags define buttons on the screen and the unclique section shows the small bit of JavaScript code that will be executed when they are clicked. 
 
The script tag marks the beginning of the main JavaScript code section. 
 
Two slashes in front of anything like FROG or a CAR mean that that entire line is just a comment and doesn't do anything. 
 
The frog section of the code 1st gets a handle on the frog so it can be moved around. It then sets two variables for the X and Y coordinates of the Frog. It then puts those variables into the frog handle style to actually move the frog.  
 
The car section does the exact same thing as the frog section. 
 
The set time out to me and tells the browser to wait and 50 ms and then  execute the move car function. 
 
The move car function increases the X position of the car by five pixels. If the car moves rightpast the right edge of the screen at roughly 1200 pixels, then it is put back on the left edge at zero pixels. 
 
The car is then moved by putting it's X variable into its handle style. 
 
Using the math absolute value function twice, it is determined if the car has run over the frog. If so, the word splat is sent to the screen. 
 
The last line of the move car function is another time out that tells the browser to wait 50 ms and execute it again.  If there wasn't a 15 mill second delay between executions, the car with zip across the screen so fast you couldn't even see it.  
 
Ideas for enhancing the game
-------------------------------
 
Learn how to use the IMG tag, And replace the word frog and car with little pictures of a frog and a car.  
 
Learn how to read the keyboard and replace the moving buttons with keystrokes like the arrow keys. 
 
Expand the move car section to handle multiple cars, like in the real frogger game. If you've never played Frogger, Google it.  It was one of the classic video games in the early early days. It came out with Pac-Man and Asteroids. 
 
Learn how to add and play sound files with JavaScript, and and the sounds of cars going by, a frog jumping, and a frog going splat. 
 
and a system of levels, so each time you succeed at the game, it gets harder. Maybe you add more cars. Maybe the cars go faster, or both. 
 
You can learn anything you want just by googling for information.  Good luck. 


========= The code is every thing below this line =============================================

FROGGER - Move the Frog across the road and don't get run over!<br>
 
<div id=FROG style='position:absolute;'> <font face=Arial Size=30>FROG</font> </div>
<div id=CAR style='position:absolute;'> <font face=Arial Size=30>CAR</font> </div>
 
<input type=button value=UP onclick='FY=FY-25; FROG.style.top = FY;'>
<input type=button value=Down onclick='FY=FY+25; FROG.style.top = FY;'>
<input type=button value=Left onclick='FX=FX-25; FROG.style.left = FX;'>
<input type=button value=Right onclick='FX=FX+25; FROG.style.left = FX;'>
 
<script>
 
//FROG
FROG = document.getElementById('FROG');
FX = 500;
FY = 500;
FROG.style.top = FY;
FROG.style.left = FX;
 
//CAR
CAR = document.getElementById('CAR');
CX = 0;
CY = 300;
CAR.style.top = CY;
CAR.style.left = CX;
 
 
setTimeout(MoveCar(), 50);
 
function MoveCar() {
    CX = CX + 5;
    if(CX>1200) CX=0;
    CAR.style.left = CX;
    if(Math.abs(CX-FX)<25 && Math.abs(CY-FY)<25 ) alert('Splat!');
    setTimeout(MoveCar, 50);
}
 
</script>


Comments