HTML, HTML5 Canvas, JavaScript PART 3 LOOKING MORE CLOSELY AT FULL BLOWN GAME DESIGN A PATTERNED BACKGROUND (CREATED WTIH LOOPS) WITH A MOVING OBJECT CHALLENGES CHANGE COLOUR, SIZE, BACKGROUND AND ADD YOUR OWN CREATING CIRCLES – MATHEMATICAL CONCEPTS USING COMMENTS

Objectives STUDENTS SHOULD BE ABLE TO EXPLAIN AND PRACTICALLY DO THE FOLLOWING How to start and end an HTML page Define a heading and the body of an HTML page (adding appropriate text) Define a variable in JavaScript Change the value of a variable in JavaScript Understand the use of the X, Y grid in HTML5 Canvas design to define starting points of objects Understand the use of the width and height variables in the creation of a rectangle Understand the programming construct of ITERATION (loops) and why they are useful Experiment with the beginnings of a game (patterned background with moving object)

Instructions To start, open Adobe Dreamweaver. (You can do all of this in Notepad, but Dreamweaver will provide a more dynamic and easy to work with view of the code and what is happening live)

First cut and paste the below code and experiment with it! HINT: Add a number to the existing variable Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and increments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a chessboard function chessb() { ctx.fillStyle = "black"; i = 0 j = 0 for (; i < (WIDTH / 100);i++) { for (; j < (HEIGHT / 100);j++) { if ( (j+i+1) % 2 == 0) { ctx.fillRect(i*100,j*100,100,100); } j = 0; } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off chessb(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw();

Task 1: Change the colour of the circle to blue (and increase its size) and change the appearance of the squares to look like the background below HINT: Add a number to the existing variable Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and incriments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a chessboard function chessb() { ctx.fillStyle = "black"; i = 0 j = 0 for (; i < (WIDTH / 100);i++) { for (; j < (HEIGHT / 100);j++) { if ( (j+i+1) % 2 == 0) { ctx.fillRect(i*100,j*100,100,100); } j = 0; } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off chessb(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw();

Screenshot your solutions/creations here

Experiment with the circle code and fill in the blanks…. **this site may help too

Our universe is full of circles. What is a circle?

A Circle

What is PI? – A mysterious number that appears to go on forever. What does it have to do with circles?

Pi is a mysterious constant. It is needed to find the area of a circle

Challenge 2: Create a different background on the screen. A tree or a sun or both if you are able! (like Minecraft) HINT: Add a number to the existing variable Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and increments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a background function background() { ctx.fillStyle = "red"; ctx.fillRect(20,66,332,33); ctx.fillRect(600,120,332,33); ctx.fillRect(120,2,332,33); } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off background(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw(); Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and increments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a background function background() { ctx.fillStyle = "red"; ctx.fillRect(20,66,332,33); ctx.fillRect(600,120,332,33); ctx.fillRect(120,2,332,33); } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off background(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw(); *Your tree and sun Don’t have to look exactly Like this but should resemble a tree and sun!

Screenshot your solutions/creations here

Challenge 3: Create 2 circles on the screen (that will both move together when the arrow keys are pressed) HINT: Add a number to the existing variable Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and increments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a background function background() { ctx.fillStyle = "red"; ctx.fillRect(20,66,332,33); ctx.fillRect(600,120,332,33); ctx.fillRect(120,2,332,33); } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off background(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw(); Moving a ball using arrow keys //used to test in function (bordl = left, etc...) var bordl = true var bordr = true var bordu = true var bordd = true //Chessboard var i = 0; var j = 0; //How much the object moves by (v = vertical, h = horizontal) var v = 4; var h = 8; //x,y and increments of x and y co-ords var x = 150; var y = 150; //canvas stuff, that is needed. var canvas = document.getElementById('canvas'); var HEIGHT = canvas.height; var WIDTH = canvas.width; var ctx = canvas.getContext("2d"); //Creates circle function circle(x,y,r) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates circle to get rid of circle function ccircle(x,y,r) { ctx.fillStyle = "White"; ctx.beginPath(); ctx.arc(x, y, r + 500, 0, Math.PI*2, true) ctx.closePath(); ctx.fill(); } //Creates a background function background() { ctx.fillStyle = "red"; ctx.fillRect(20,66,332,33); ctx.fillRect(600,120,332,33); ctx.fillRect(120,2,332,33); } //Pulls together everything to actually draw it onto the canvas function draw() { // cleans previous circle ccircle(x,y,10); //chessboard and circle function to finish it off background(); circle(x, y, 10); } function border() { if (y + h > HEIGHT){ bordd = false; } else { bordd = true; } if (y - h < 0){ bordu = false; } else { bordu = true; } if (x + v > WIDTH) { bordr = false; } else { bordr = true; } if (x - v < 0) { bordl = false; } else { bordl = true; } // Listen for when the user presses a key down window.addEventListener("keydown", keyDownHandler, true); // Handles Command Keys function keyDownHandler(event){ // get which key the user pressed var key = event.which; border(); // Let keypress handle displayable characters if(key > 46){ return; } switch(key){ case 37: // left key if (bordl == true) { // move the ball left by subtracting from x x -= h; break; } case 39: // right key if (bordr == true){ // move the ball right by adding to x x += h; break; } case 38: // Up key if (bordu == true) { // move the ball up by subtracting from y y -= v; break; } case 40: // Down key if (bordd == true){ // move the ball down by adding to y y += v; break; } // redraw the ball in its new position draw(); } draw(); *See if you can combine the circles to make a new shape

Challenge 4: Add a heading for your page and some text. See if you can also add other HTML features to your page (like a form). Change the colour and size of the text as well. See if you can add images as well. (RESEARCH!)

Challenge 5 (A Level –hard!!!): See if you can create another coloured circle and make it move with a different key press (like the “wasd” keys – for the beginning of a multiplayer game.(you’ll really need to analyse the WHOLE code for this as well as do some research) HINT: Add a number to the existing variable *See if you can combine the circles to make a new shape Who can get to the Sun first?

Use the below site to look at the different things you can do in HTML5 CANVAS with JavaScript Use the site to try out new things – aim for 5, and screenshot what you have achieved in the next few slides. Independent Research / GET AHEAD for the G&T and Interested!

Screenshot your solutions/creations here

Consolidate your learning Answer the questions on the following slides. You can use previous powerpoints, provided code as well as the Internet to help you

What is a variable? Screenshot the use of a variable in JavaScript below Your answer here Your screenshot here

What is a loop? What are the 3 different types of loops? Your answer here

Screenshot or paste below the use of a loop in JavaScript Why does every loop need a stopping condition? Point out the stopping condition in the loop example you have used above. Your answer here

What is a Circle? (How can you define it in mathematical terms) What is a rectangle? (How can you define it in mathematical terms) Your answer here (use key words like radius, diameter, Pi etc.) Your answer here (use key words like x, y, width…etc.)

Sometimes programmers use “comments” in their code. What is a comment? Screenshot the use of comments in JavaScript code and paste or screenshot it below Your answer here Your answer or screenshot here