coding is fun! v3

Coding is FUN!School of IT

Lawrence Tham7 Jan 2021

Lawrence_tham@nyp.edu.sg

© Nanyang Polytechnic

• 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