2D Game design Intro to Html 5

Transcription

1 2D Game design Intro to Html 5

2 Javascript Javascript: Dynamic untyped Object Oriented interpreted language Typecast as a web language Could be used for a variety of tasks Dymanic?

3 Javascript Javascript: Dynamic untyped Object Oriented interpreted language Typecast as a web language Dynamic? Could be used for a variety of tasks Can add functions/etc at runtime Untyped?

4 Javascript Javascript: Dynamic untyped Object Oriented interpreted language Typecast as a web language Dynamic? Could be used for a variety of tasks Can add functions/etc at runtime Untyped? Like assembler, no notion of you can t do that exception/compiler error Green/5 returns NaN rather than error

5 Javascript Douglas Crockford: Lisp in C s clothing C-like syntax while acting like a functional language

6 Basic Types Even though the language is untyped there still have to be types to interpret the bits Numbers Strings string or string str + ing Typeof operator 64 bit ints and floats Usual arithmetic (including % mod) and precedence rules Unary operator returns type All immutable types

7 Logic Usual c-like boolean and logical operators == equality with type conversion ( 50 == 50)!= inequality w/ type conversion <, >, <=, >= inequality with type conversion === equality without type conversion!== inequality without type conversion!,, && Or/and are short-circuit operators null and false are false, everything else is true carl false => carl which evals to true Ternary (instantaneous if) exists 3>4? makes no sense : makes sense

8 Variables No typing Declare variable with keyword var var holder; var holder2 = 5;

9 Conditionals I Conditional if(boolean) else if (boolean) //optional statement executed if elseif is true else //optional statement executed if true statement executed if false

10 Conditionals II Also switch switch( value){ case posibility1: Statement1;... StatementN; Break case posibility2: } And so on

11 loops Indefinite loop while (boolean) Statement do while also works Definite loop Same as java/c/c++ for(initialize; check; update) Statement Usual loop keywords work Break continue

12 Functions Two ways to declare a function 1st)The way everyone else does it (declaration notation) function foo (n){ //Do stuff here. } Works a lot like c++ and or python now call Foo(200); Functions cannot be nested using declaration notation

13 Functions II Two ways to declare a function 2nd) Set a function as a value of a variable. Eg: (example from Eloquent Java) var launchmissiles = function(value) { missilesystem.launch("now"); }; if (safemode) launchmissiles = function(value) {/* do nothing */};

14 Function Closures Javascript supports function closures Local variables in outer function still available to inner function later See example from developer.mozilla.org below function makefunc() { var name = "Mozilla"; function displayname() { alert(name); } return displayname; } var myfunc = makefunc(); myfunc();

15 Fun with Functions Since functions are often values for variables Can do great things passing them as params Example from Eloquent JavaScrip function foreach(array, action) { for (var i = 0; i < array.length; i++) action(array[i]); } (we ll formally talk about arrays in a couple of slides)

16 Scope Javascript supports: Local variables Parameter variables Global variables (be very very careful with these.)

17 Data Structures Javascript s built in data structures. Arrays var names = [ Ed, Ann, Jo, Bo, Fe ]; names[2]; names.lenght; vs names[ length ]; Arrays are zero-based names.push( Zoe );

18 Objects Objects in javascript kinda like structs in C++ With some python/lisp-que stuff stirred in Defined as {property:value, property1:value1, } eg. var student = {bannerid:12345, name: Stu Dent, Gpa:3.4}; console.log(student.name); But we can do fun funky things too Can add properties any time Student.classlist=[ comp350, comp426, comp399 ];

19 Ok but you said html5 So that is javascript what about html5? So lets look at a really tiny stripped down html5 program Just html and javascript no CSS this time.

20 The HTML part <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>first Demo Game</title> </head> <body> <div id="gamespace"> <div id='canvasspace'> <canvas id="game-area" width="800" height="450">if you can see this you need a better browser</canvas> </div> <!-- we'll put more here later--> </div> <script src="firstgame.js"></script> </body> </html> Simple HTML html5 canvas and link to javascript

21 Javascript var canvas = document.getelementbyid('game-area'); var graphicscontext = canvas.getcontext('2d'); var background = new Image(); function loadimages(){ background.src = 'images/scrolling_background.png' ; } function drawbackground(){ graphicscontext.drawimage(background,0,0); } function drawcomponents() { drawbackground(); } function startgame(){ loadimages(); background.onload= function(param){ drawcomponents(); } } startgame(); onload is really important

22 Using Webstorm We ll use webstorm ide from jetbrains for development in class If you use something else in your own development fine so long as it all works Webstorm runs a localhost webserver to test projects To debug, you ll need to install the jetbrains chrome extension First time you try to debug webstorm will prompt you to install If you have another browser again fine

23 Good start Assignment: read chapters 1-2 in core html5 Project: lets see where we are for this