Coding Your First HTML5 Game Randy Hoyt @randyhoyt - - PowerPoint PPT Presentation

▶
coding your first html5 game
SMART_READER_LITE
LIVE PREVIEW

Coding Your First HTML5 Game Randy Hoyt @randyhoyt - - PowerPoint PPT Presentation

Sep 29, 2022 373 likes •1.68k views

Coding Your First HTML5 Game Randy Hoyt @randyhoyt randyhoyt.com/launchgame @randyhoyt Overview Code HTML5 Games @randyhoyt Overview Games HTML5 Code @randyhoyt Games Games Games are fun ! s e m a g e v

slide-1
SLIDE 1

@randyhoyt

Randy Hoyt

Coding Your First HTML5 Game

slide-2
SLIDE 2

@randyhoyt

randyhoyt.com/launchgame

slide-3
SLIDE 3

@randyhoyt

  • Code
  • HTML5
  • Games

Overview

slide-4
SLIDE 4

@randyhoyt

  • Games
  • HTML5
  • Code

Overview

slide-5
SLIDE 5

Games

slide-6
SLIDE 6

@randyhoyt

  • Games are fun

Games

I l

  • v

e g a m e s !

slide-7
SLIDE 7

A Theory of Fun (2004), by Ralph Koster

slide-8
SLIDE 8

@randyhoyt

  • Games are fun
  • Games are everywhere

Games

I l

  • v

e g a m e s !

slide-9
SLIDE 9

Homo Ludens (1938), by Johan Huizinga

slide-10
SLIDE 10

@randyhoyt

  • Games are fun
  • Games are everywhere
  • Games exercise the brain

Games

I l

  • v

e g a m e s !

slide-11
SLIDE 11

Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, memory, mental imagery, and incentive and reward processing.

Brain Workout, Life Optimizer, http://trhou.se/WHkaR7

slide-12
SLIDE 12

Brain Workout, Life Optimizer, http://trhou.se/WHkaR7

slide-13
SLIDE 13
slide-14
SLIDE 14

@randyhoyt

  • Games are fun
  • Games are everywhere
  • Games exercise the brain
  • Games are practice for

the real world

Games

I l

  • v

e g a m e s !

slide-15
SLIDE 15

7 TED Talks on Gaming, http://trhou.se/gamesTED

slide-16
SLIDE 16

@randyhoyt

Games And Me

slide-17
SLIDE 17

HTML5

slide-18
SLIDE 18

B u z z w

  • r

d A l e r t !

slide-19
SLIDE 19

@randyhoyt

  • Canvas

HTML5 and Related Technologies

slide-20
SLIDE 20

@randyhoyt

  • Canvas
  • WebGL

http://trhou.se/whyWebGL

HTML5 and Related Technologies

slide-21
SLIDE 21

@randyhoyt

  • Canvas
  • WebGL

http://trhou.se/whyWebGL

  • WebSocket

http://trhou.se/introwebsockets

HTML5 and Related Technologies

slide-22
SLIDE 22

@randyhoyt

  • Canvas
  • WebGL

http://trhou.se/whyWebGL

  • WebSocket

http://trhou.se/introwebsockets

  • SVG

HTML5 and Related Technologies

slide-23
SLIDE 23

HTML5 Games

slide-24
SLIDE 24

It’s official: with HTML5 today the browser has become a full- fledged gaming platform.

HTML5 Gaming, http://html5rocks.com/gaming

slide-25
SLIDE 25
slide-26
SLIDE 26

Behind the Scenes, http://www.cuttherope.ie/dev/

slide-27
SLIDE 27

@randyhoyt

  • Top 10 HTML5 games of 2012

http://trhou.se/gamesin2012

  • Goko
  • Game Closure Devkit
  • Famo.us - http://tcrn.ch/ZfCuNh

HTML5 Games

slide-28
SLIDE 28

Code

slide-29
SLIDE 29

@randyhoyt

Project Structure

CSS JavaScript HTML

slide-30
SLIDE 30

@randyhoyt

Project Structure

CSS JavaScript HTML

slide-31
SLIDE 31

@randyhoyt

Project Structure

CSS JavaScript HTML

slide-32
SLIDE 32

@randyhoyt

Project Structure

CSS JavaScript HTML

slide-33
SLIDE 33

HTML

slide-34
SLIDE 34

CSS

slide-35
SLIDE 35

Canvas Preview

slide-36
SLIDE 36

Canvas and Context

slide-37
SLIDE 37

Image in JavaScript

slide-38
SLIDE 38

requestAnimationFrame

slide-39
SLIDE 39

update function

slide-40
SLIDE 40

update function

slide-41
SLIDE 41

Game Logic: Init (Once), Update (Loop)

init update

slide-42
SLIDE 42

fillRect

slide-43
SLIDE 43

One wall in the browser

slide-44
SLIDE 44

fillRect

slide-45
SLIDE 45

Five walls in the browser

slide-46
SLIDE 46

drawImage

slide-47
SLIDE 47

Frog variables

slide-48
SLIDE 48

Frog in the browser

slide-49
SLIDE 49

Five walls in the browser

slide-50
SLIDE 50
slide-51
SLIDE 51

clearRect

slide-52
SLIDE 52

clearRect

slide-53
SLIDE 53
slide-54
SLIDE 54

Game Logic: Init (Once), Update (Loop)

init update

slide-55
SLIDE 55

Game Logic: Move

update init

slide-56
SLIDE 56

Game Logic: Update, Render, Loop

render init update

slide-57
SLIDE 57

@randyhoyt

  • Init
  • Place Frog
  • Place Obstacles
  • Update
  • Move
  • Render

Game Logic

slide-58
SLIDE 58

@randyhoyt

  • Init
  • Bind Events
  • Place Frog
  • Place Obstacles
  • Update
  • Move
  • Render

Game Logic: Bind Events

slide-59
SLIDE 59

@randyhoyt

  • Init
  • Bind Events
  • Place Frog
  • Place Obstacles
  • Place Badges
  • Update

...

Game Logic: Place Badges

slide-60
SLIDE 60

@randyhoyt

...

  • Update
  • Check for Movement
  • Check for Obstacles
  • Move
  • Check for Badges
  • Render

Game Logic: Update

slide-61
SLIDE 61

@randyhoyt

Game Logic: Check for Victory

...

  • Update

... ...

  • Render
  • Check for Victory
slide-62
SLIDE 62

Game Preview

slide-63
SLIDE 63

@randyhoyt

  • Impact
  • LimeJS
  • Crafty
  • GameClosure
  • CocoonJS

HTML5 Game Frameworks

. . . a n d m a n y m

  • r

e !

slide-64
SLIDE 64

@randyhoyt

  • Impact
  • LimeJS
  • Crafty
  • GameClosure
  • CocoonJS

HTML5 Game Frameworks

Game Engine Comparison, http://trhou.se/gamecompare

slide-65
SLIDE 65

@randyhoyt

  • Free and Open Source
  • Uses DOM or Canvas
  • Built on Google Closure
  • Requires Python
  • Incompatible with CocoonJS

LimeJS

slide-66
SLIDE 66

> bin/lime.py create treehouse

slide-67
SLIDE 67

HTML

slide-68
SLIDE 68

Starting JavaScript File

slide-69
SLIDE 69

Create Director

slide-70
SLIDE 70

Director Settings

slide-71
SLIDE 71

Scene

slide-72
SLIDE 72

Blank Canvas

slide-73
SLIDE 73

Comments

slide-74
SLIDE 74

Game Background Sprite

slide-75
SLIDE 75

appendChild

slide-76
SLIDE 76

Create Analog Stick Sprite

slide-77
SLIDE 77

Preview Game

slide-78
SLIDE 78

Preview Game With Inspector

slide-79
SLIDE 79

Preview Game With Console

slide-80
SLIDE 80

Add Four Button Sprites

slide-81
SLIDE 81

Frog Constructor

slide-82
SLIDE 82

Frog Properties

slide-83
SLIDE 83

Require Frog

slide-84
SLIDE 84

> bin/lime.py update

slide-85
SLIDE 85

Constants

slide-86
SLIDE 86

appendChild Frog

slide-87
SLIDE 87

Game Logic: Init, Render

render init

slide-88
SLIDE 88

Create Walls and Badges

slide-89
SLIDE 89

appendChild: Walls and Badges

slide-90
SLIDE 90

Game Preview

slide-91
SLIDE 91

Add Event for UP Button

slide-92
SLIDE 92

Frog: startMovement

slide-93
SLIDE 93

Game Logic: Schedule Manager

render init update

slide-94
SLIDE 94

Schedule Manager

slide-95
SLIDE 95

Game Logic: Check Movement

update render

?

init

slide-96
SLIDE 96

Add Events to All Buttons

slide-97
SLIDE 97

checkMovement

slide-98
SLIDE 98

Game Logic: Check Movement

update render

?

init

slide-99
SLIDE 99
slide-100
SLIDE 100

Game Logic: Check Movement

update render

?

init

slide-101
SLIDE 101

Game Logic: Check for Obstacle

?

update render

?

init

slide-102
SLIDE 102

Determine all four corners

slide-103
SLIDE 103

Loop through all the walls

slide-104
SLIDE 104

Determine the wall’s corners

slide-105
SLIDE 105

If the frog’s right would be right of the wall’s left ...

slide-106
SLIDE 106

... and if the frog’s left would be left of the wall’s right ...

slide-107
SLIDE 107

... and if the frog’s top would be above the wall’s bottom ...

slide-108
SLIDE 108

... and if the frog’s bottom would be below the wall’s top ...

slide-109
SLIDE 109

... then the frog and the wall would overlap.

slide-110
SLIDE 110

Checking for a collision

slide-111
SLIDE 111

Early return on collision

slide-112
SLIDE 112

Game Logic: Check for Obstacle

?

update render

?

init

slide-113
SLIDE 113

Game Logic: Check for Obstacle

?

update render

?

init

slide-114
SLIDE 114
slide-115
SLIDE 115

Game Logic: Check for Obstacle

?

update render

?

init

slide-116
SLIDE 116

Game Logic: Check for Badge

?

update

?

render

?

init

slide-117
SLIDE 117

Keep track of badges earned

slide-118
SLIDE 118

Check for collision with badge

slide-119
SLIDE 119

Increment badges earned

slide-120
SLIDE 120
slide-121
SLIDE 121

Game Logic: Check for Badge

?

update

?

render

?

init

slide-122
SLIDE 122

Game Logic: Check for Badge

?

update

?

render

?

+

init

slide-123
SLIDE 123

init

Game Logic: Check for Victory

?

update

?

` render

+

? ?

slide-124
SLIDE 124

Check for a victory

slide-125
SLIDE 125

Check for a victory

slide-126
SLIDE 126

init

Game Logic: Check for Victory

?

update

?

` render

+

? ?

slide-127
SLIDE 127

init

Game Logic: Reset on Victory

?

update

?

` render

+

? ?

slide-128
SLIDE 128

> bin/lime.py build treehouse -o treehouse/treehouse-min.js

slide-129
SLIDE 129

@randyhoyt

randyhoyt.com/launchgame