html, html5 canvas, javascript part 3 looking more closely at full blown game design a patterned...

HTML, HTML5 Canvas, JavaScriptPART 3LOOKING MORE CLOSELY AT FULL BLOWN GAME DESIGNA PATTERNED BACKGROUND (CREATED WTIH LOOPS) WITH A MOVING OBJECTCHALLENGESCHANGE COLOUR, SIZE, BACKGROUND AND ADD YOUR OWNCREATING CIRCLES – MATHEMATICAL CONCEPTSUSING COMMENTS

ObjectivesSTUDENTS 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!First cut and paste the below code and experiment with it!

HINT: Add a number to the existing variable

<html><body>Moving a ball using arrow keys</body><canvas id="canvas" width="800" height="800" style="border:1px solid #000000;"></canvas>

<script>//used to test in function (bordl = left,

etc...)var bordl = truevar bordr = truevar bordu = truevar bordd = true//Chessboardvar 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-ordsvar 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 circlefunction 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 circlefunction ccircle(x,y,r) {

ctx.fillStyle = "White";ctx.beginPath();ctx.arc(x, y, r + 500, 0, Math.PI*2,


}

//Creates a chessboardfunction chessb() {

ctx.fillStyle = "black";i = 0j = 0for (; 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 circleccircle(x,y,10);//chessboard and circle function

to finish it offchessb();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();

</script></html>

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

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





vertical, h = horizontal)var v = 4;var h = 8;//x,y and incriments of x and y co-ordsvar x = 150;var y = 150;//canvas stuff, that is needed.var canvas =





}


ctx.fillStyle = "White";ctx.beginPath();ctx.arc(x, y, r + 500, 0,

Math.PI*2, true)ctx.closePath();ctx.fill();

}

//Creates a chessboardfunction chessb() {

ctx.fillStyle = "black";i = 0j = 0for (; 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;

}}


function draw() {// cleans previous circleccircle(x,y,10);//chessboard and circle

function to finish it offchessb();circle(x, y, 10);

}









bordl = true;}

}




border();










} }


draw();

</script></html>

Screenshot your solutions/creations here

Experiment with the circle code and fill in the blanks….

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/**this site may help too

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

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)

Challenge 2: Create a different background on the screen. A tree or a sun or both if you are able! (like Minecraft)










}




}

//Creates a backgroundfunction background() {

ctx.fillStyle = "red";

ctx.fillRect(20,66,332,33);

ctx.fillRect(600,120,332,33);


}



to finish it offbackground();circle(x, y, 10);

}









bordl = true;}

}




border();










} }


draw();

</script></html>









}




}




ctx.fillRect(600,120,332,33);


}




}









bordl = true;}

}




border();










} }


draw();

</script></html>

*Your tree and sunDon’t have to look exactlyLike this but should resemblea tree and sun!

Challenge 3: Create 2 circles on the screen (that will both move together when the arrow keys are pressed)

Challenge 3: Create 2 circles on the screen (that will both move together when the arrow keys are pressed)










}




}




ctx.fillRect(600,120,332,33);


}




}









bordl = true;}

}




border();










} }


draw();

</script></html>









}




}




ctx.fillRect(600,120,332,33);


}




}









bordl = true;}

}




border();










} }


draw();

</script></html>

*See if you can combinethe 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 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!)

http://www.w3schools.com

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)

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)


*See if you can combinethe 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!Independent Research / GET AHEAD for the G&T and Interested!


Consolidate your learningAnswer 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

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

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

html, html5 canvas, javascript part 3 looking more closely at full blown game design a patterned...

Documents