coding is fun! v3
TRANSCRIPT
• What is Programming?• What will i Learn?• What will i Achieve?• Where do i Need?• Let’s Start!
• How to make tea?• Sequence of Steps• Loops• Conditions
• Programming is creating a set of instructions given to a computer to perform a task
• Your very own Swat the Fly game
• Programming with JavaScript and HTML
• HTML helps display things on browsers
• JavaScript enables interactive web pages
• Tryit Editor v3.6 (w3schools.com) • a free tool that allows you to try JavaScripts easily
• https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor
• A Web Browser
• Internet Connection
- to use the online Tryit Editor
• With HTML you can create your own web page
• Hello World
https://icode.sg/coding-is-fun-2
• Let’s create spaces for
1. Canvas to draw graphics
2. Button to start game
3. Header for “My first game”Canvas of size 600 by 300 px
Button
Header
Canvas of size 600 by 300 px
Button
Header
Place holder for JavaScript
• Canvas
• Buttons
• Header
• Script
• A Canvas is like a piece of paper
• You will need Instructions to the computer to draw lines, shapes, images and Text using JavaScript
Y
0 600
300
0
X
Place holder for JavaScript
Y
0 600
300
0• How would you ask
someone to draw a rectangle on this paper?
• Where to start? (x,y)
• What’s the dimension? (width, height)
• Empty rectangle or Filled?
width
height
x
y
.
• Drawing a Filled Rectangle
Y
0
0
X
x = 50
y = 100
width = 200
height =100
• Drawing a Empty Rectangle
Y
0
0
X
x = 50
y = 100
width = 200
height =100
Put instructions to draw 2 rectangles in
script
• Draw Rectangles
Y
0
0• How would you ask
someone to draw a circle on this paper?
• Where to start? (x,y)
• What’s the radius?
• Draw Clockwise or Contraclockwise?
• Draw a complete circle?
x
y
.
.
radius
cwccw
• Draw Circle
Y
0 600
300
0
X• How would you ask someone
to write on this paper?
• Where to write? (x,y)
• What to write? (text)
• What is the font and size?x
y
Hello
text
= 200
= 100
• Draw Text
Y
0 600
300
0• What I need for my game?
• Fly
• Swatter
• Time Bar
• Score
• Game Over
Time Bar
Swatter
Fly
ScoreGame Over
Y
X• What I need to draw
• A Black Circle for Body
• 2 Grey Circles for Wings
x
y
radius 8 px
(x+10, y-10)radius 10 px
(x-10, y-10)radius 10 px
Y
X• What I need to draw
• 4 Empty Rectangles for Net
• a Grey Filled Rectangle for Handle
Rectangle 1strokeRect(x, y, 20, 20);
Rectange 2strokeRect(x, y-20, 20, 20);
fillRect(x - 5, y + 23, 10, 15);
x
y
Rectangle 3strokeRect(x-20, y-20, 20, 20);
Rectangle 4 strokeRect(x-20, y, 20, 20);
Y
X• What I need to draw
• A Red Rectangle starting from (0,0) with fixed height and increasing width
(x=0, y=0)
As timer increase, the width of the bar increases and bar lengthens
Fixed height of 10 px
• Draw Fly
• Draw Swatter
• Draw Time Bar
• Draw Score
• Draw Game Over!
• Have you played with a Flip Book before?
Y
0 600
300
0
Y
0 600
300
0
• We can simulate change of page by repeating 2 steps per Frame:
1. Update:• Change something
2. Render:• Clear• Draw
t = 100t = 330t = 450t = 600
run frame every 50 ms to produce animation on canvas
• Animate Life Bar
Y
0
0
mouse_X
• Track the mouse movement
• mousemove event listener
• Draw swatter with mouse x,yposition
mouse_Y
• Add Swatter
• Firstly, we must be able to generate random rumbers
• Math.random() returns random value between 0 to 1
• max is the maximum number you want
• Math.floor() round value to whole numbers
• If max = 600, you will get a value between and including 0 and 600
• Maximum fly_X is 600 and maximum fly_Y is 300
flyTimer = 0flyTimer = 1flyTimer = 2 flyTimer = 3
Y
0 600
300
0• Let’s create random fly_X and
fly_Y every 15 frames(60,30)
(120,60)
flyTimer = 14 flyTimer = 15 flyTimer = 0
• Adding Random Fly
Y
0
0
mouse_X
mouse_Y
• Let’s make every mouse click an attempt to hit the fly
• click event listener
Y
0
0
(fly_X, fly_Y)
(mouse_X, mouse_Y)20 px
• If fly body falls into one of the 4 squares of swatter, it’s a hit!
• Calculate absolute difference between fly_X and mouse_X, and fly_Y and mouse_Y
• If both less than 20px, it’s a hit!
absX = Math.abs(fly_X - mouse_X);absY = Math.abs(fly_Y - mouse_Y);if ((absX <= 20) && (absY <= 20)){
hit = true;}
xx
x
x
x
Every time I click the mouse, I check if I hit the fly
Y
0
0
• Score increase by 1
• Blood Splatters
• Fly changes position
SCORE: 01
• Game is over if timer reaches timeout of 600
• When timer reaches timeout, we will display Game over and stop the looping of frame
• Click to Hit
• Check if swatter hit fly
• If swatter hits fly
• If time out
• Click to Hit
• Check if swatter hit fly
• If swatter hits fly
• If time out
• NYP School of IT
https://www.nyp.edu.sg/schools/sit.html
• Our 5 Diplomas and Common ICT Programme
https://www.nyp.edu.sg/schools/sit/full-time-courses.html
• Our Scholarships
https://www.nyp.edu.sg/schools/sit/scholarships.html
• Live Talk Registration
• Get a Scholarship! (Fri Jan 8, 9:00 PM)https://zoom.us/webinar/register/WN_g8M5QJLpRpiNI-4YFLCNqg
• Become a Successful IT Professional (Sat Jan 9, 4:45 PM) https://zoom.us/webinar/register/WN_MsgJN7KhTqKc4nNi-HzpsA
Thank You