1. Javascript codes are embedded in html codes. Therefore we create a html page first. Following are some html tags, on the body tag, we defined an function "movebykey()" to handle the event "onkeypress", which we will describe in detail later.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY onKeyPress="movebykey()">
<P> </P>
2. Javascript codes start and end with "script" tag as showed
below.
The "document.write" statements can write objects to the screen
of the browser. In the first "document.write" screen, it writes an
"FORM" object, which includes a textfield and two buttons. The second
"document.write" defines a table with a 500x500 pixels area, and the
position of the table is determined by the "style" property which
defines the X-Y coordinates of left-top corner of the table. The following three
"document.write" statements are to write three image objects: canon,
plane and ball to certain positions of the screen. "ID" property give an image a
unique id which can be referred later in the program. The "src"
property defines the source of the image. Also the "style"
property is used to define the position and to determine if to show (display:inline) or not show (display:none)
the image.
<SCRIPT LANGUAGE="JavaScript">
document.write("<FORM id='input'>Please enter the angle (-90-+90) and click the 'Fire' button to start:<INPUT id='angle' size=6><INPUT type='button' onclick='fire()' id='firebtn' value='FIRE'> <INPUT type='button' onclick='initiate()' value='Re-Play'></FORM>")
document.write("<Table border=1 width='500' height='500'
style='position:absolute;top:130;left:100'><tr><td></td></tr></table>");
document.write("<img id='canon' src='canon.jpg' style='position:absolute; top:345; left:10; display:inline'>");
document.write("<img id='plane' src='plane.jpg' style='position:absolute; top:335; left:450; display:inline'>");
document.write("<img id='ball' src='ball.gif' style='position:absolute; top:360; left:110; display:none'>");
3. Define some variables for the program in Javascript:
//ball position
var X=110;
var Y=360;
//plane position
var targetX;
var targetY;
//fire angle of the canon
var angle=0;
//increasement of x and y for each move of the ball
var dx=10;
var dy;
//return value of setTimeout function
var timerID=null;
//flag to indicate the end of game
var endflag = 0;
4. Define functions used by this game program in Javascript.
After you open the page, the "movebykey" function will be called
because we load it on the body tage as above, and it will listen to the key
press event. When you press key "j", the plane will move to the left.
Similarly, key "l" move the plane to right, key "i" move the
plane up and key "k" move it down. All those responding move of the
plane image is defined in the function of movebykey().
After you enter an angle value and click the "FIRE" button, the fire()
function will be called because we defined the fire() function as the handler
for the "onclick" event of "Fire" button as above.
"fire()" function intake the angle input and decide the value of
increasement of y based on the angle. It also determine the target (the plane
image) position, make the ball image visible and call the move()
function.
"move()" function is the function responsible for the moving of the
ball. As long as the "endflag" value is "0", the ball keeps
moving. Before each move, it check whether the ball is out of area (by call
chkboundry() ) or it hits the target plane (by call chktarget() ). If the ball
hit boundary, it will disappear as defined in the "chkboundry"
function. If the ball hit the plane, both the ball and the plane will disappear
as defined in the "chktarget()" function.
"initiate()" function will be called when you click "Re-Play" button. It will reset
values of all the variables back to the initial states so that you can play the game again.
function fire()
{
angle = parseFloat(document.forms[0].angle.value);
dy = (-1)* dx * Math.tan(angle/180);
ball.style.display = "inline";
targetX = parseInt(plane.style.left.substring(0, plane.style.left.length-2)) + 32;
targetY = parseInt(plane.style.top.substring(0, plane.style.top.length-2)) + 25;
move();
}
function move()
{
X=X+dx;
Y=Y+dy;
chkboundary();
chktarget();
if (endflag == 0)
{
ball.style.top=Y;
ball.style.left=X;
timerID = setTimeout("move()",50);
}
}
function chkboundary()
{
if (Y>600 || Y<100 || X>580)
{
endflag = 1;
ball.style.display = "none";
}
}
function chktarget()
{
var centerX = X + 5;
var centerY = Y + 5;
var distance = Math.sqrt((targetX-centerX)*(targetX-centerX) + (targetY-centerY)*(targetY-centerY))
if ( distance < 30 )
{
endflag = 1;
plane.style.display = "none";
ball.style.display = "none";
}
}
function movebykey()
{
var keycode = event.keyCode ;
//set the image position(X,Y), based on the keycode pressed
var interval = 10; //indicates how far to move for each key press
var character=String.fromCharCode(keycode);
if (character=="i") plane.style.top = parseInt(plane.style.top.substring(0, plane.style.top.length-2)) - interval;
if (character=="k") plane.style.top = parseInt(plane.style.top.substring(0, plane.style.top.length-2)) + interval;
if (character=="j") plane.style.left = parseInt(plane.style.left.substring(0, plane.style.left.length-2)) - interval;
if (character=="l") plane.style.left = parseInt(plane.style.left.substring(0, plane.style.left.length-2)) + interval;
}
function initiate()
{
endflag = 0;
document.forms[0].angle.value = "" ;
clearTimeout(timerID);
X=110;
Y=360;
ball.style.left = 110;
ball.style.top = 360;
ball.style.display = "none";
plane.style.left = 450;
plane.style.top = 335;
plane.style.display = "inline";
}
5. End of the javascript codes and html codes.
</SCRIPT>
<P> </P>
</BODY>
</HTML>