Scribd
Upload
397 views

Phaser For HTML5

This document provides an overview for creating a simple HTML5 game using the Phaser framework. It discusses setting up the necessary files and structure, including an HTML page, local server, and linking JavaScript and image assets. It also covers key game development concepts like variables, functions, asset loading, sprite positioning and movement, and creating multiple similar objects using groups. The goal is to build a game where the player collects pigcat enemies that switch between dangerous and safe states.

Uploaded by

Costinel Constinel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
397 views

Phaser For HTML5

This document provides an overview for creating a simple HTML5 game using the Phaser framework. It discusses setting up the necessary files and structure, including an HTML page, local server, and linking JavaScript and image assets. It also covers key game development concepts like variables, functions, asset loading, sprite positioning and movement, and creating multiple similar objects using groups. The goal is to build a game where the player collects pigcat enemies that switch between dangerous and safe states.

Uploaded by

Costinel Constinel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Lets make a web game!

credit: Photon Storm

What will we cover today?


The canvas element
Phaser, a JavaScript framework
Setting up a local server
Making an HTML5 page
Setting up Phaser
Creating a simple game

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

credit: Nintendo

credit: Photon Storm

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

credit: Photon Storm

Whats a framework?
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.

Setting up a local server

credit: Silicon Angle

Local servers
Local servers allow you to test websites youve programmed
without an internet connection.
!

Phaser requires a server to run for security reasons.

Start your Apache server

Open XAMPP and turn on Apache

Making an HTML5 page

credit: The Matrix

Find htdocs

Open your XAMPP folder, then htdocs

Create a folder to work in

Name your folder mygame

Check if it worked!

Go to localhost/mygame

Create a new file in your text editor

Save your new file as index.html in your folder

Components of an HTML5 page


<!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!

Getting started with Phaser

credit: Photon Storm

Download the latest version

github.com/photonstorm/phaser

Move phaser.min.js

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

Create a JavaScript file

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

Link your files to the HTML

Comment your code


5 minutes after you write code
without comments

When you come back to it


in 3 weeks

Commenting code is easy


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 + /)

Creating games with JavaScript

credit: Jandi Small

Our game
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

Variables
Variables are useful for storing data that may change throughout the
course of your app (e.g. your players health)

To create a variable, you have to tell JavaScript:


The name youre going to refer to it by
The value (information) that the variable contains

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;

Functions
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

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

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

Calculations
+ (add)
(subtract)
* (multiply)
/ (divide)
var addition = 13 + 22;
var division = 100/15;

preload() function

Create assets folder

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

create() function

update() function

CREATE
UPDATE
DRAW

How does positioning work?

X=0
y=0

y=HEIGHT

x=WIDTH

X=0
y=0

x=WIDTH

(3,2)

y=HEIGHT

How do I move my player?

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

Conditional statements
if (squirrel){
console.log(squirrel!);
} else {
console.log(bark!);
}
!

Check if something is true or false


Provide backup option if necessary

How do we create a bunch of


the same objects?

Groups

enemies

You might also like