Using keyboard for input control

Size: px

Start display at page:

Download "Using keyboard for input control"

Irma McCormick
6 years ago
Views:

1 Lecture #7 Introduction Using keyboard for input control The keyboard has been the computer input device for the longest time, even since the old days when there was no such thing called mouse and graphical user interface. As a matter of fact, even today, the keyboard is still a useful input device for a wide range of games. For example, any game involving the player moving an object around will benefit from using the arrow keys. In this lecture, you will learn many games that uses the arrow keys to move objects. In JavaScript, as well as most programming languages, each keyboard character has a unique character code, typically known as key code. They not only help the browser to know which character is pressed but also how to develop application to handle interactions for responsive design. Basic keyboardrelated event handlers JavaScript support some keyboard event handlers, which are very useful in responding to the user input when keys on a keyboard are pressed. These events are what make it possible for JavaScript to react when a key is pressed: Event handler Onkeypress Onkeydown onkeyup Table: Keyboard related event handlers Functions invokes JavaScript code when a key is pressed invokes JavaScript code when a key is held down (but not yet released) invokes JavaScript code when a key is has been released after being pressed. These events can be bind to most elements on a game page. But, you will probably stick to either the document element in most cases. For example, the code below uses the onkeypress property of the document element to call the show function, which in turns changes the display attribute s value from none to inline. In other words, when the user presses any key, the cat.gif appears.  <head> function show() var m1 = document.getelementbyid("m1"); m1.style.display="inline"; document.onkeypress = function() show(); <img id="m1" src="cat.gif" style="display:none"> 186

2 This code may be simplified to:  <head> function show() var m1 = document.getelementbyid("m1"); m1.style.display="inline"; document.onkeypress=show; <img id="m1" src="cat.gif" style="display:none"> Another way to register the onkeypress event is:  <head> function show() var m1 = document.getelementbyid("m1"); m1.style.display="inline"; document.addeventlistener("keypress", show, false); <img id="m1" src="cat.gif" style="display: none"> The old way is: <body onkeypress = "show()"> In the following example, the onkeydown is used to display the time the page was loaded, while onkeyup displays the current time.  187

<head> function init_time() init_time = Date(); document.onkeydown = function() var t1 = document.getelementbyid("t1"); t1.innertext=init_time; document.onkeyup = function() var t2 = document.

3 <head> function init_time() init_time = Date(); document.onkeydown = function() var t1 = document.getelementbyid("t1"); t1.innertext=init_time; document.onkeyup = function() var t2 = document.getelementbyid("t2"); t2.innertext=date(); window.onload = init_time; Starting time: <b id="t1"></b><br> Ending time: <b id="t2"></b> Press any key. A sample output looks: In order to write a cross-browser code, it might be necessary to use an if statement to provide codes for different browsers, although this course intends to ignore this incompatibility issue to keep the lecture note concise and compact. if (document.addeventlistener) document.addeventlistener("keydown", funct1, false); document.addeventlistener("keypress", funct2, false); document.addeventlistener("keyup", funct3, false); else if (document.attachevent) document.attachevent("onkeydown", funct1); document.attachevent("onkeypress", funct2); document.attachevent("onkeyup", funct3); else document.onkeydown= keydown; document.onkeypress= keypress; 188

document.onkeyup= keyup; The above code use the following statement to comply with the DOM specification that all browsers should follow. if (document.

4 document.onkeyup= keyup; The above code use the following statement to comply with the DOM specification that all browsers should follow. if (document.addeventlistener) Since Microsoft Internet Explorer, for a while, try to promote its own specification, use the following to support Internet Explorer. else if (document.attachevent) Ultimately, use the following because there may be other older browsers that follow neither. else To further demonstrate how the keyboard-related even handlers work in game programming, create a new project called kb.htm with the following contents:  <div id=area1 style="border:1px solid black; background-color:#abcdef; width:300px; height:300px;"> </div> <img id=ball src="ball.gif" style="top:315px; left:10px; position:absolute"> Use a web browser to run the code. It creates a pale-blue area with a rolling ball below it. The tag contains an onkeydown event, which will detect if the user ever presses any key. A user-defined function cc() is assigned to the onkeydown event handler, although it is not yet created. You will soon create and define what this cc() function can do. The <div> and </div> defines the pale-blue area. All its properties, such as border, background color, width, and height, are defined using CSS. The id attribute simply defines the ID of this area. The <img> tag loads the animated gif file. It also uses CSS to define properties. Noticeably, the position is set to be absolute, which means the position value set (top, left) is based on the Web browser s origin. The ID of the gif file is ball. The KeyCode The keycode property of the Event object returns UniCode value of key pressed. The returned value is the key's numerical value, not the American National Standards Institute 189

5 (ANSI) value. You can use keycode to detect when the user has pressed an arrow or function key, which cannot be specified by the key property. The syntax is: event.keycode The following example demonstrates how you can display each key s key code in an alert box. There is an if statement which specifies what e is in case it is not detected by the browser.  function getit(e) if (!e) var e = window.event; // in case event not detected window.alert(e.keycode); document.onkeydown = function() getit(); Press the Alt key, for example, you should see a value 18 on the alert box: Many games dedicate a special key, such as the s key for a specified function, such as firing a bullet. It is often necessary to check if the player ever presses the s key, and raise an event as response if so. Before being able to detect if a particular is pressed, you will need to learn how to check keys by their key codes. The following is a list of JavaScript key codes. Table: Common Key Codes Key Code Key Code Key Code Key Code A [Alt] 18 B [Enter] 13 C * 106 [Shift] 16 D / 111 [Ctrl] 17 E ` 192 [CapsLock] 20 F , 188 [Esc] 27 G [Backspace] 8 H / 191 [Insert] 45 I ; 186 [Home]

6 J [PageUp] 33 K 75 F1 112 [ 219 [Delete] 46 L 76 F2 113 ] 221 [End] 35 M 77 F3 114 \ 220 [PageDown] 34 N 78 F4 115 = 187 [PrintScreen] O 79 F5 116 [ScrollLock] 145 P 80 F6 117 [Pause] 19 Q 81 F7 118 R 82 F8 119 S 83 F9 120 T 84 F U 85 F V 86 F W X Y 89 3 Z There is a function named moveit() in the following code which uses the keycode property of the event object to determine weather or not the user presses the Left arrow key ( ). This Left arrow key has a numerical value 37. A simple if..then decisive logic can make this decision.  <head> function moveit(e) var ball = document.getelementbyid("ball"); if (!e) var e = window.event; // in case event not detected if(e.keycode == 37) ball.style.left = (parseint(ball.style.left) - 10) + "px"; document.onkeydown = function() moveit(window.event); // call moveit with default event <div id=area1 style="border:1px solid black; background-color:#abcdef; width:300px; height:300px;"> </div> <img id=ball src="ball.gif" style="top:315px; left:10px; position:absolute"> 191

7 In the following line, ball is the ID of the gif file, so ball.style.left represents the horizontal value of the position value set (top, left). style is a keyword that indicates Cascading Style Sheet. ball.style.left = (parseint(ball.style.left) - 10) + "px"; The original value of ball.style.left is set to the 10, as specified by left:10. The above line is techinically the same as the following in Internet Explorer: ball.style.pixelleft = ball.style.pixelleft - 10; By the way, in the old days, the above line would look (Good thing is you don t have to do so any more!): ball.style.left = eval(ball.style.left.replace('px','')) - 10; The difference between left and pixelleft is that the value of left is a string, such as 120px. The value of pixelleft is an integer, such as 120. Since a string value cannot be calculated arithematically, you need to use the replace() method to remove the px substring. ball.style.left.replace('px','') Consequently, a value of 120px becomes 120. But, 120 is still a string made of 1, 2, and 0, not an integer. The eval() method then convert the number-like string to the integer data type. In other words, 120 now means one-hundred-and-twenty, no longer a string that reads one-twozero. With the new XHTML, CSS and JavaScript standard, you can ignore this old technique. Remarkably, the instructor purposely brings up this topic just for your reference. The following lines, which only works in Internet Explorer, tells the computer to subtract 10 from the current ball.style.pixlleft each time when the user press the Left arrow key ( ). var e = window.event; if(e.keycode==37) var ball = document.getelementbyid("ball"); ball.style.pixelleft -= 10; According to the following table, the Up, Right, and Down arrow keys have values of 38, 39, and 40. Similarly, you can use the following line to add 10 to the current ball.style.left each time when the user press the Right arrow key ( ). if(e.keycode==39) ball.style.left = (parseint(ball.style.left) + 10) + "px"; The change the vertical position, you need to modify the current value of ball.style.top, which represents the vertical value of the position value set (top, left). var ball = document.getelementbyid("ball"); if(e.keycode==38) ball.style.top = (parseint(ball.style.top) - 10) + "px"; 192

8 if(e.keycode==40) ball.style.top = (parseint(ball.style.top) + 10) + "px"; The code now looks:  <head> function moveit(e) if (!e) var e = window.event; // in case event not detected var ball = document.getelementbyid("ball"); if(e.keycode==37) ball.style.left = (parseint(ball.style.left) - 10) + "px"; if(e.keycode==39) ball.style.left = (parseint(ball.style.left) + 10) + "px"; if(e.keycode==38) ball.style.top = (parseint(ball.style.top) - 10) + "px"; if(e.keycode==40) ball.style.top = (parseint(ball.style.top) + 10) + "px"; document.onkeydown = function() moveit(); <div id=area1 style="border:1px solid black; background-color:#abcdef; width:300px; height:300px;"> </div> <img id=ball src="ball.gif" style="top:315px; left:10px; position:absolute"> The use of a switch..case statement in such programming case is probably more efficient and effective to the game. You can re-write the above code to the following for a better efficiency.  193

<head> function moveit(e) if (!e) var e = window.event; // in case event not detected var ball = document.getelementbyid("ball"); switch (event.keycode) case 37: ball.style.left = (parseint(ball.

9 <head> function moveit(e) if (!e) var e = window.event; // in case event not detected var ball = document.getelementbyid("ball"); switch (event.keycode) case 37: ball.style.left = (parseint(ball.style.left) - 10) + "px"; case 39: ball.style.left = (parseint(ball.style.left) + 10) + "px"; case 38: ball.style.top = (parseint(ball.style.top) - 10) + "px"; case 40: ball.style.top = (parseint(ball.style.top) + 10) + "px"; document.onkeydown = function() moveit(); <div id=area1 style="border:1px solid black; background-color:#abcdef; width:300px; height:300px;"> </div> <img id=ball src="ball.gif" style="top:315px; left:10px; position:absolute"> Use Internet to run the code, and use the,,, and keys to move the ball. 194

10 By the way, some keys, like [Shift], [Control] and [Alt], aren t normally thought of as sending characters, but modify the characters sent by other keys. For many keys, no key codes are returned on keydown and keyup events. Instead the keycode value is just zero, Characters that give a zero keycode when typed include those listed below, as well as any key when the Alt/Option key is held down. - _ # $ % ^ & * ( ) + : < >? Internet Explorer provides the following properties. Properties altkey, ctrlkey, shiftkey keycode type Table: Keyboard related properties of the event object Description Boolean properties that indicate whether the Alt, Ctrl, Meta, and Shift keys were pressed at time of the event. Property indicating the Unicode for the key pressed. A string indicating the type of event, such as onkeydown, onkeyup, etc. The following example illustrates how to require the player to hold the Shift key and then press the C key to do something. The event.shiftkey property is a boolean type. It returns true if the Shift key is being pressed, false if not; altkey and ctrlkey work the same way.  <head> function getit(e) if (!e) var e = window.event; // in case event not detected if (e.shiftkey && e.keycode==67) window.alert("you pressed Shift + C"); document.onkeydown = function() getit(); The following will return the type of event. A sample output looks: if (e.shiftkey && e.keycode==67) window.alert(e.type); 195

11 Both if..then and switch..case statements are frequently used collaboratively to check if the player presses a combination of keystroke in order to make decision as what to respond to the player s input from keyboard. The following example will first check if the shift key is held, and then determine if C, D, or E is pressed accordingly.  <head> function getit(e) if (!e) var e = window.event; // in case event not detected if (e.shiftkey) // if shift is press switch (e.keycode) case 67: window.alert("shift + C"); case 68: window.alert("shift + D"); case 69: window.alert("shift + E"); document.onkeydown = function() getit(); <audio id="p1" src="c0.mp3" preload="auto"></audio> <button onclick="playme()">c0</button> Basically, the switch..case statement is a multi-way decision statement. Unlike the multiple-decision statement that can be created using if..then. The switch statement evaluates the conditional expression and tests it against numerous constant values. The branch corresponding to the value that the expression matches is taken during execution. The [Enter] key is a known issue that needs your attention because the [Enter] is typically used to submit something, such as a HTML form. In a game, it might be necessary to use the [Enter] to call a JavaScript user-defined function, the following code is an example that will void the default function of [Enter]; therefore, you can use it call some user-defined function.  196

12 <head> function getit(e) if (e.which == 13 e.keycode == 13) window.alert("hi!"); return false; // void the key else return true; document.onkeydown = function() getit(event); Sample Games Consider the following code, it uses CSS (cascade style sheet) to specify how an area defined by <span> </span> in a code division (defined by <div> </div>) should look in a Web browser s body area. <style>.wkey background-color: white; border-top: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; border-bottom: 4px solid #cdcdcd; border-right: 1px solid black; height: 150px; width: 40px; </style> Define white keys <div>  <span class="wkey" id="midc"></span> </div> CSS uses <style> </style> to embed a style sheet onto an HTML code. In this example, wkey is the name of style, which contains the following attributes and their associated values in the format of atttributename : value. background-color : white. This set of attribute and value simply defines the background of the object using this style as white. border-top : 1px solid #cdcdcd. This sets the top border to be a solid line with size of 1px and color value of #cdcdcd (in the RGB format). This color combination produces the color of light gray. height : 150px. This sets the height of the object to be 150px. width : 40px. This sets the width of the object to be 40px. 197

13 The following line associates an object with ID midc with the wkey style, such that all the styles wkey has will apply to this midc object. <span class="wkey" id="midc"></span> The output of this code looks: In order to add two more objects that are clones of the midc object, simply add the following two lines. Just be sure to assign new IDs for each of the two new objects! <span class="wkey" id="midc" style="left:50px"></span> <span class="wkey" id="midd" style="left:91px"></span> <span class="wkey" id="midf" style="left:132px"></span> The output now looks: Take a close look at these three objects, they are placed closely together, there s no space between any consecutive ones. In order to dynamically place each object on the web browser s body area, you need to use absolute positioning system. You do so by adding the following bold line:.wkey position: absolute; background-color: white; border-top: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; border-bottom: 4px solid #cdcdcd; border-right: 1px solid black; height: 150px; width: 40px; DHTML, with CSS, use two pre-defined variables -- left and top -- to represent x- and y- coordinate of the browser s body area. In fact, most graphics in a Windows program are drawn to the client area of a window, which uses the Windows graphics coordinate system. 198

14 The following figures explains how the coordinates of the client area begin in the upper-left corner of the window and increase down and to the right, as you learned earlier in the hour. This coordinate system is very important because most GDI graphics operations are based on them. Consequently, by adding the following bold line, all the three objects y-coordinate are set to be 20px, which means they all are 20px below the x-axis..wkey position: absolute; top: 20px; background-color: white; border-top: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; border-bottom: 4px solid #cdcdcd; border-right: 1px solid black; height: 150px; width: 40px; The output now looks weird. There are 3 objects, supposedly, but only one is displayed. What s wrong? The answer is, the absolute positioning system uses both left and top to specify a given object of absolute position. All the three objects top values are defined as 20px in the above code segment. It s time to assign each object s left value individually. <span class="wkey" id="midc" style="left:50px"></span> <span class="wkey" id="midd" style="left:91px"></span> <span class="wkey" id="mide" style="left:132px"></span> The above uses a technique known as inline style, which means to add a style to the HTML tag as an attribute of the tag. As a reminder, the syntax is: 199

15 style = "attributename1:value1;attributename2:value2;...; attributenamen:valuen" The midc object is now assigned an initial point (50, 20), midd (91, 20), and mide (132, 20). The distance between 50 and 91 is 41. In this code example, 41 is determined because each object is 40px wide (as specified by width:40px), plus 1px as the space between two objects = = 132 Take a good look at the output. There is a visible space between every two objects. (50, 20) (91,50) (132, 20) To make the above graphics looks like a section of piano keyboard, add the following bold lines: <style>.wkey position: absolute; top: 20px; background-color: white; border-top: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; border-bottom: 4px solid #cdcdcd; border-right: 1px solid black; height: 150px; width: 40px;.bKey position: absolute; top: 20px; background-color: black; border: 1px solid white; height: 70px; width: 36px; Define black keys </style> <div>  <span class="wkey" id="midc" style="left:50px"></span> 200

16 <span class="wkey" id="midd" style="left:91px"></span> <span class="wkey" id="mide" style="left:132px"></span>  <span class="bkey" id="csharp" style="left:72px"></span> <span class="bkey" id="dsharp" style="left:114px"></span> </div> The first added code segment defines a new CSS style named bkey, which specifies how a black key should look. The second simply adds two black keys in the division ( as defined by <div> </div>). Each black key has a unique ID. The output now looks (Surprisingly, you create a graphic using DHTML codes!): To add animated effects to the above graphics, you need to write user-defined functions. Such functions can perform visual effects. For example, you can add visual effects to the keys, so they will have an effect of key-down-key-up. Consider the following added bold codes:  function CDown() var midc = document.getelementbyid("midc"); midc.style.bordertop="1px solid black"; midc.style.borderleft="1px solid black"; midc.style.borderbottom="1px solid black"; midc.style.borderright="1px solid #cdcdcd"; function CUp() var midc = document.getelementbyid("midc"); midc.style.bordertop="1px solid #cdcdcd"; midc.style.borderleft="1px solid #cdcdcd"; midc.style.borderbottom="4px solid #cdcdcd"; midc.style.borderright="1px solid black"; document.onkeydown = function() CDown(); document.onkeyup = function() CUp(); 201

It uses two event handlers: onkeydown and onkeyup to call two different user-defined functions: CDown() and CUp(). Such programming techniques will be discussed in a later lecture.

17 It uses two event handlers: onkeydown and onkeyup to call two different user-defined functions: CDown() and CUp(). Such programming techniques will be discussed in a later lecture. For now, you just have to know what they are. These two user-defined functions, CDown() and Cup(), are combinations of DHTML statements. As a reminder, the syntax is (notice that style is a keyword): objectid.style.attributenme = "Value"; In CDown(), the first line changes the top border of the midc object to solid 1 black, the second changes the left border, the third changes the bottom border, and the fourth changes the right border to solid 1 #cdcdcd. Compare CDown() and CUp() carefully and you will find out their color values in the reversed order to each other. Also, be sure to know that the color values of CUp() are exactly the same as those defined in wkey style. var midc = document.getelementbyid("midc"); function CDown() var midc = document.getelementbyid("midc"); midc.style.bordertop="1px solid black"; midc.style.borderleft="1px solid black"; midc.style.borderbottom="1px solid black"; midc.style.borderright="1px solid #cdcdcd"; function CUp() var midc = document.getelementbyid("midc"); midc.style.bordertop="1px solid #cdcdcd"; midc.style.borderleft="1px solid #cdcdcd"; midc.style.borderbottom="4px solid #cdcdcd"; midc.style.borderright="1px solid black"; By executing these two functions, the color of midc s top border changes from #cdcdcd to black, and then back to #cdcdcd. This creates an effect of key-down-key-up. A complete code is available in the learning activity, please learning this technique for your own good. The above code also illustrates how you can create animated game objects programmatically. The advantage is that you can easily apply dynamic functions to the graphics. On the other hand, try use Microsoft Paint to create a gif file (named board.gif) that looks: Then, modify the kb.htm file to:  202

18 <head> function moveit(e) var ball = document.getelementbyid("ball"); if (!e) var e = window.event; if(e.keycode==37) ball.style.left = (parseint(ball.style.left) - 10) + "px"; if(e.keycode==39) ball.style.left = (parseint(ball.style.left) + 10) + "px"; if(e.keycode==38) ball.style.top = (parseint(ball.style.top) - 10) + "px"; if(e.keycode==40) ball.style.top = (parseint(ball.style.top) + 10) + "px"; document.onkeydown = function() moveit(); <img id="board" src="board.gif"> <img id="ball" src="ball.gif" style="top:315px; left:10px; position:absolute"> Use Internet to run the code, you just created a maze game. This code can be written using the switch..case statement. For example,  <head> 203

19 function cc() var ball = document.getelementbyid("ball"); var e = event.keycode; switch (e) case 37: ball.style.left = (parseint(ball.style.left) - 10) + "px"; case 39: ball.style.left = (parseint(ball.style.left) + 10) + "px"; case 38: ball.style.top = (parseint(ball.style.top) - 10) + "px"; case 40: ball.style.top = (parseint(ball.style.top) + 10) + "px"; <body onkeydown=cc()> <img id=board src="board.gif"> <img id=ball src="ball.gif" style="top:315px; left:10px; position:absolute"> Use keyboard to control the width and height of an object Many objects have the properties of width and height. In one of the previou lecture, there is a game that creates a visul effect of a bat flying back and forth. With the topic of this lecture, you can try to control the visual effect by keyboard. In the following example, the <img> tag is given and ID m1. Consequently, m1.style.width represents the width property of this image object.  <head> function cc(e) if (!e) var e = window.event; var m1 = document.getelementbyid("m1"); if (e.keycode == 38) m1.width = m1.width + 10; if (e.keycode == 40) m1.width = m1.width - 10; 204

On the screen, the change of value creates effect of zoom in and zooms out. Another way to write the above code is: <!

20 document.onkeydown = function() cc(); <img id="m1" src="bat.gif" width="10px"> When you run the code, the Up and Down arrow keys will increase and decrease the value of width. On the screen, the change of value creates effect of zoom in and zooms out. Another way to write the above code is:  <head> function cc() if (!e) var e = window.event; var m1 = document.getelementbyid("m1"); var i = event.keycode; switch(i) case 38: m1.width = m1.width + 10; case 40: m1.width = m1.width - 10; document.onkeydown = function() cc(); <img id="m1" src="bat.gif" width="10px"> to 205

21 Review Questions 1. Which can register an "onkeypress" event to the web page and use it to call the "show()" function as event handler? A. document.onkeypress = function() show(); B. document.onkeypress=show; C. document.addeventlistener("keypress", show, false); D. <body onkeypress = "show()"> E. All of the above. 2. Which can prevent the [Enter] key from submitting something; in other words, void the [Enter] key's default function? A. if (e.which == 13 e.keycode == 13) return null; B. if (e.which == 13 e.keycode == 13) return false; C. if (e.which == 13 e.keycode == 13) D. if (e.which == 13 e.keycode == 13) void; E. if (e.which == 13 e.keycode == 13) return void; 3. Given the following code block, which statement is correct? <body onkeydown="status = new Date();" onload="document.title=new Date()" onkeyup="p1.innertext=new Date()"> A. When the user loads the page, the current data and time is display on the status bar. B. When the user press and hold the [Enter] key, the current data and time is displayed on the status bar. C. When the user press and then release the [Enter] key, the current data and time is displayed on the status bar. D. All of the above 4. Which property of the Event object returns UniCode value of key pressed? A. event.keytype B. event.keycode C. event.key D. event.keypress 5. Given the following code block, which statement is incorrect? <body onkeydown="status=event.keycode"> A. When you press any key, the status bar displays the string "event.keycode". B. When you press the Alt key, the status bar displays the value 18. C. When you press the left arrow key, the status bar displays the value 37. D. When you press the P key, the status bar displays the value When Unicode value is what you get when you press the Scroll Lock key? A. 145 B. 125 C. 135 D Given the following code, which statement is correct? ball.style.left.replace('px','')) A. It uses the replace() method to remove "px" from "10px". B. It uses the replace() method to remove "10px" from "10px". C. It sets the value of ball.style.left to null. 206

22 D. All of the above 8. Which property of the event object returns a boolean outcome? A. altkey B. ctrlkey C. shiftkey D. All of the above 9. Given the following code, Which can detect if both the shift key and the C key is presses? var e = window.event; A. if (shiftkey && keycode==67) B. if (e.keycode = "shift" && e.keycode==67) C. if (e.shiftkey && e.keycode==67) D. if (e.keycode = "shiftkey" && e.keycode==67) 10. Which is the correct way to detect what key has been pressed? A. <body onkeydown="status=event.keycode"> B. <body onkeydown="status=event.keypresscode"> C. <body onkeydown="status=event.keytypecode"> D. <body onkeydown="status=event.keyoncode"> 207

23 Lab #7 Note: The following games are meant to be simple and easy for the sake of demonstrating programming concepts. Please do not hesitate to enhance the appearance or functions of these games. Preparation #1: 1. Create a new directory named C:\games. 2. Use Internt Explorer to go to to download lab7.zip (a zipped) file. Extract the files to C:\games directory. Learning Activity #1: Labyrinth 1. In the C:\games director, use Notepad to create a new file named C:\games\lab7_1.htm with the following contents:  function moveit(e) var ball = document.getelementbyid("ball"); // find the object if (!e) var e = window.event; var i = e.keycode; switch (i) case 37: // old way ball.style.left = (eval(ball.style.left.replace('px','')) - 10) + "px"; case 39: // new way ball.style.left = (parseint(ball.style.left) + 10) + "px"; case 38: // without using increment-append ball.style.top = (parseint(ball.style.top) - 10) + "px"; case 40: ball.style.top = (parseint(ball.style.top) + 10) + "px"; document.onkeydown = function() moveit(); 208

24 <img id="board" src="board.gif"> <img id="ball" src="ball.gif" style="top:315px; left:10px; position: absolute"> Note: This version use switch..case, so be sure to compare this version with the one in the lecture which use if..then statement. 2. Test the program. Use,,, and arrow keys to move the ball. A sample output looks: 5. Download the assignment template, and rename it to lab7.doc if necessary. Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Learning Activity #2: Moving the ball 1. In the C:\games director, use Notepad to create a new file named C:\games\lab7_2.htm with the following contents:  <head> function move() var ball = document.getelementbyid("ball"); // find the object var area1 = document.getelementbyid("area1"); var e = event.keycode; // detect the key var x = parseint(ball.style.left); var y = parseint(ball.style.top); switch(e) case 37: // stop if the ball touches the left border if ( x <= 10) ball.style.left = (x + 10) + "px"; // x-coordinate of ball else ball.style.left = (x - 1) + "px"; case 39: // stop if ball touches the right border if ((x + ball.width) >= area1.width-10) 209

25 ball.style.left = (area1.width - ball.width -10); else ball.style.left = (x + 1) + "px"; case 38: // stop if the ball touches the top border if ( y <= 10) ball.style.top = (y + 10) + "px"; else ball.style.top = (y - 1) + "px"; case 40: // stop if the ball touches the bottom border if ((y + ball.height) >= area1.height-10) ball.style.top = (area1.height - ball.height -10); else ball.style.top = (y + 1) + "px"; // end of move() document.onkeydown = function() move(); <div id=area1 style="border: 1px solid black; background-color:#abcdef; width:300px; height:300px; top:10px; left:10px; position:absolute"> </div> <img id=ball src="ball.gif" style="top:10px; left:10px; position: absolute"> 2. Test the program. Use the,,, arrow keys to move the ball. A sample output looks: 210

$In the C:\games director, use Notepad to create a new file named C:\games\lab7_3.htm with the following contents: <!$

26 3. Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Learning Activity #3: snake game 1. In the C:\games director, use Notepad to create a new file named C:\games\lab7_3.htm with the following contents:  <head> var x=190; // global variables var y=384; var k=1; var n=0; function draw() var e = event.keycode; switch (e) case 37: n=1; k=0; case 38: n=0; k=1; case 39: n=-1; k=0; case 40: n=0; k=-1; function init() var codes = ""; // clear codes var p1 = document.getelementbyid("p1"); var area1 = document.getelementbyid("area1"); if ((x<=10) (x>=394) (y<=-10) (y>=400)) // means "or" p1.innertext="game over!"; else y -= k; // decrement x -= n; codes = "<span style='position:absolute; left:"+x; codes += "px; top:"+ y +"px'>.</span>"; area1.innerhtml += codes; 211

27 settimeout("init()", 0.1); window.onload = function() init(); document.onkeydown = function() draw(); <div id="area1" style="position:absolute; width:400px; height:400px; border: 3px solid black; color:red; background-color: black; left:0px; top:10px;"></div> <p id="p1" style="position:absolute; left:160px; top:200px; color: white"></p> 2. Test the program. Use,,, and arrow keys to move. A sample output looks: and 3. Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Learning Activity #4: 1. In the C:\games directory, use Notepad to create a new file named C:\games\lab7_4.htm with the following contents:  <!Doctype html> <head> <script> 212

28 function moveit(e) if (!e) var e = window.event; var ap = document.getelementbyid("airplane"); switch (e.keycode) case 65: //A ap.style.left = (parseint(ap.style.left) - 1) + "px"; ap.src = "a3.png"; case 68: //D ap.style.left = (parseint(ap.style.left) + 1) + "px"; ap.src = "a4.png"; case 87: //W ap.style.top = (parseint(ap.style.top) - 1) + "px"; ap.src = "a1.png"; case 88: //X ap.style.top = (parseint(ap.style.top) + 1) + "px"; ap.src = "a2.png"; //slant directions case 81: //Q ap.style.left = (parseint(ap.style.left) - 1) + "px"; ap.style.top = (parseint(ap.style.top) - 1) + "px"; ap.src = "a6.png"; case 69: //E ap.style.left = (parseint(ap.style.left) + 1) + "px"; ap.style.top = (parseint(ap.style.top) - 1) + "px"; ap.src = "a5.png"; case 67: //C ap.style.left = (parseint(ap.style.left) + 1) + "px"; ap.style.top = (parseint(ap.style.top) + 1) + "px"; ap.src = "a7.png"; case 90: //Z ap.style.left = (parseint(ap.style.left) - 1) + "px"; ap.style.top = (parseint(ap.style.top) + 1) + "px"; ap.src = "a8.png"; document.onkeydown = function() 213

29 moveit(window.event); <img id="airplane" src="a3.png" style="position: absolute; left:200px; top:200px;"> 2. Test the program. Click the white spaceonce, and then use Q, W, E, A, D, Z, X, and C to move the airplane. 3. Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Learning Activity #5: Jet Fighters 1. In the C:\games director, use Notepad to create a new file named C:\games\lab7_5.htm with the following contents:  <head> <style> body background-color: black; </style> var bsrw = document.documentelement.clientwidth; // get browser width function init() var ap01 = document.getelementbyid("ap01"); // find the object ap01.style.left = Math.floor(Math.random()*300) + "px"; moveit(); var k = 2; function moveit() var ap01 = document.getelementbyid("ap01"); if (parseint(ap01.style.left) > bsrw - 20) k = -2; and 214

30 else if (parseint(ap01.style.left) < 10) k = 2; ap01.style.left = (parseint(ap01.style.left) + k) + "px"; settimeout("moveit()",5); function fly() var e = event.keycode; var st01 = document.getelementbyid("st01"); var b01 = document.getelementbyid("b01"); switch(e) case 37: st01.style.left = (parseint(st01.style.left) - 10) + "px"; case 39: st01.style.left = (parseint(st01.style.left) + 10) + "px"; case 38: st01.style.top = (parseint(st01.style.top) - 10) + "px"; case 40: st01.style.top = (parseint(st01.style.top) + 10) + "px"; case 83: // bullet b01.style.left = (parseint(st01.style.left) + 20) + "px"; b01.style.top = parseint(st01.style.top) + "px"; b01.style.display = 'inline'; fire(); // end of fly() function fire() var b01 = document.getelementbyid("b01"); b01.style.top = (parseint(b01.style.top) - 10) + "px"; settimeout("fire()",50); window.onload = function() init(); document.onkeydown = function() fly(); <body id="bd"> <img id="ap01" src="e_plan.gif" style="position:absolute"> <img id="st01" src="shooter.gif" style="position:absolute; top:300px; left:100px"> <span id="b01" style="position:absolute; display:none; color: white">!</span> 215

Note: Because collision detection and response is the topic of a later lecture, how you can modify this code so that the bullet can destroy the plane will be discussed in a later lecture. 2.

Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Submittal 1.

31 Note: Because collision detection and response is the topic of a later lecture, how you can modify this code so that the bullet can destroy the plane will be discussed in a later lecture. 2. Test the program. Use,,, and arrow keys to move airplane. Press the S key to shoot a bullet. A sample output looks: 3. Capture a screen shot similar to the above one and then paste it to a Micrsoft Word document named lab7.doc (or.docx). Submittal 1. Upon completing all the learning activities, compress the following files to a zipped file named lab7.zip : Lab7_1.htm Lab7_2.htm Lab7_3.htm Lab7_4.htm Lab7_5.htm Lab7.doc (or.docx) 2. Upload the lab7.zip file. Programming Exercise #07 1. Use Notepad to create a new text file named ex07.htm with the following lines. Be sure to replace YourFullName with your actual full name.  2. Next to the above code, write a code that will detect if both Control and k keys are pressed. If so, display the following message. 3. Download the programming exercise template, and rename it to ex07.doc. Capture a screen short similar to the above and paste it to a Word document named ex07.doc (or.docx). 4. Compress both ex07.htm and ex07.doc (or.docx) file to a zip file named ex07.zip. 216

32 5. Submit only the.zip file. Grading Critiera Your code must meet all the requirements to receive full credits. No partial credit is given. You will receive zero point if any of the required file is missing or not submitted. 217

<!DOCTYPE html> <html> <body> <audio src="u1.mp3" controls></audio> </body> </html> <audio src="u1.mp3" controls />

<!DOCTYPE html> <html> <body> <audio src=u1.mp3 controls></audio> </body> </html> <audio src=u1.mp3 controls /> Lecture #10 HTML5 tag Applying sound effects With the HTML5 tag, you can insert a sound file, such as a MP3 file, on a web page. Then, write appropriate JavaScript code to control the default