Lets make a web g ame! credit: Photon Storm What will we cover - - PowerPoint PPT Presentation

▶
let s make a web g ame
SMART_READER_LITE
LIVE PREVIEW

Lets make a web g ame! credit: Photon Storm What will we cover - - PowerPoint PPT Presentation

Aug 11, 2023 186 likes •611 views

Lets make a web g ame! credit: Photon Storm What will we cover today? The canvas element Phaser, a JavaScript framework Settin g up a local server Makin g an HTML5 pa g e Settin g up Phaser Creatin g a simple g ame

slide-1
SLIDE 1

Let’s make a web game!

credit: Photon Storm

slide-2
SLIDE 2
  • The canvas element
  • Phaser, a JavaScript framework
  • Setting up a local server
  • Making an HTML5 page
  • Setting up Phaser
  • Creating a simple game

What will we cover today?

slide-3
SLIDE 3

credit: Nintendo

A canvas is a rectangle in your HTML page where you can use JavaScript to draw anything you want.

What is canvas?

slide-4
SLIDE 4

credit: Photon Storm

slide-5
SLIDE 5

credit: Photon Storm

Phaser is an open source JavaScript framework made for HTML5 game developers by HTML5 game developers.

What is Phaser?

slide-6
SLIDE 6

Frameworks help to reduce the amount of time spent reinventing the wheel.

  • They come with a large set of tools to help you

accomplish tasks faster.

What’s a framework?

slide-7
SLIDE 7

Setting up a local server

credit: Silicon Angle

slide-8
SLIDE 8

Local servers allow you to test websites you’ve programmed without an internet connection.

  • Phaser requires a server to run for security reasons.

Local servers

slide-9
SLIDE 9

Open XAMPP and turn on Apache

Start your Apache server

slide-10
SLIDE 10

Making an HTML5 page

credit: The Matrix

slide-11
SLIDE 11

Open your XAMPP folder, then htdocs

Find htdocs

slide-12
SLIDE 12

Name your folder mygame

Create a folder to work in

slide-13
SLIDE 13

Go to localhost/mygame

Check if it worked!

slide-14
SLIDE 14

Save your new file as index.html in your folder

Create a new file in your text editor

slide-15
SLIDE 15
  • <!DOCTYPE html>: tells the browser it is looking at an HTML5 page
  • <html>: begins the HTML code
  • <head>: the area where meta information will be located
  • <title>: the website title
  • <body>: the part of the page where the HTML shows up!

Components of an HTML5 page

slide-16
SLIDE 16

Getting started with Phaser

credit: Photon Storm

slide-17
SLIDE 17

github.com/photonstorm/phaser

Download the latest version

slide-18
SLIDE 18

create a scripts folder & move phaser.min.js there

Move phaser.min.js

slide-19
SLIDE 19

Save your new file as game.js in your scripts folder

Create a JavaScript file

slide-20
SLIDE 20

Link your files to the HTML

slide-21
SLIDE 21

5 minutes after you write code without comments When you come back to it in 3 weeks

Comment your code

slide-22
SLIDE 22
  • Preface your one-line comment with two slashes (//)
  • Two line comments require an asterisk and slash on each side (/* */)
  • Most text editors have shortcuts (like  + /)

Commenting code is easy

slide-23
SLIDE 23

Creating games with JavaScript

credit: Jandi Small

slide-24
SLIDE 24
  • Collect the pigcats!
  • Enemies switch between dangerous & safe
  • If you collect the pigcats, you win!
  • If your health goes down to 0, you lose!
  • Polish it with start, win, and lose screens

Our game

slide-25
SLIDE 25

Variables

  • Variables are useful for storing data that may change throughout the

course of your app (e.g. your player’s health)

  • To create a variable, you have to tell JavaScript:
  • The name you’re going to refer to it by
  • The value (information) that the variable contains
slide-26
SLIDE 26

Variables

  • Variables let you refer to the same information many times
  • If you need to change that information, you only have to do it once
  • For example, best friends may change but the label stays the same:
  • var myBestFriend = “Isaiah”;

var myBestFriend = “Rebecca”; var myBestFriend = “Aileen”;

slide-27
SLIDE 27
  • Function: a named section of a program that does a specific task
  • Wraps up code in an easy-to-reference way
  • Parameter: additional information you can give the function to

change the output

Functions

slide-28
SLIDE 28
  • Name of the function
  • Parentheses: Hold any modifiers (also known as arguments)
  • Brackets: What to do in the function
  • Semicolon: end of line, move onto the next thing

Function structure

function fetch(dog) { run to the ball; pick up the ball; bring the ball back; };

slide-29
SLIDE 29

Calculations

+ (add) – (subtract) * (multiply) / (divide)

var addition = 13 + 22; var division = 100/15;

slide-30
SLIDE 30

preload() function

slide-31
SLIDE 31

Create assets folder

Download & save images from tinyurl.com/clf-html5-2014

slide-32
SLIDE 32

create() function

slide-33
SLIDE 33

update() function

slide-34
SLIDE 34

CREATE UPDATE DRAW

slide-35
SLIDE 35

How does positioning work?

slide-36
SLIDE 36

X=0 x=WIDTH y=0 y=HEIGHT

slide-37
SLIDE 37

X=0 x=WIDTH y=0 y=HEIGHT

(3,2)

slide-38
SLIDE 38

How do I move my player?

slide-39
SLIDE 39

game.input

game.input.keyboard.createCursorKeys(); + conditional statements

slide-40
SLIDE 40

Conditional statements

if (squirrel){ console.log(“squirrel!”); } else { console.log(“bark!”); }

  • Check if something is true or false
  • Provide backup option if necessary
slide-41
SLIDE 41

How do we create a bunch of the same objects?

slide-42
SLIDE 42

Groups

enemies