Computer Programming Lecture

PGF:  Course  Setup     Pg.  1    

PGF Course Setup

About Perlenspiel Perlenspiel  is  a  small  game  engine  based  on  JavaScript  and  the  HTML5  canvas  element.  Since  it’s  based  on  web   technologies,  you  can  play  games  made  in  it  in  any  browser.  You  can  read  more  about  the  engine  at   http://perlenspiel.org,  which  also  includes  a  full  reference  for  the  engine’s  features.  The  site  has  a  good  number   of  example  projects  that  you  can  try  out.  Their  source  code  is  also  available  if  you  want  to  find  out  how  one  of   the  examples  works.  

Software Installation In  order  to  write,  play,  and  debug  Perlenspiel  projects,  you’ll  need  to  download  and  install  two  (or  three)  pieces   of  software.  

Syntax-­‐Highlighting  Text  Editor   This  is  where  you’ll  write  your  code.    These  text  editors  can  open  any  plain  text  file,  but  they  also  have  the  ability   to  syntax-­‐highlight  code  to  make  it  easier  to  read.  

Sublime  Text       http://www.sublimetext.com/  

Browser  with  JavaScript  Debugger   Since  Perlenspiel  can  run  in  almost  any  web  browser,  you  won’t  need  to  download  anything  special  to  test  your   programs.  However,  if  you  want  to  analyze  and  debug  your  programs,  you  will  want  a  browser  that  has  this   functionality  easily  accessible.  

I  recommend  Chrome  the  most,  since  it  has  the  best  support  for  Perlenspiel,  and  it  has  a  powerful  built-­‐in   JavaScript  debugger:  

Chrome         https://www.google.com/intl/en/chrome/  

Other  browses  may  work,  but  I  will  not  be  providing  support  for  them.    

Project Folder Setup In  order  to  work  on  Perlenspiel  games  effectively,  you  should  create  a  clean  folder  to  hold  all  of  them  in  an   organized  fashion.  This  will  help  isolate  your  programming  stuff  from  previous  and  future  classes,  and  by  using  a   consistent  naming  scheme,  will  also  help  me  be  able  to  help  you  find  what  you  need  faster.  

To  begin,  first  create  a  new  folder  on  your  computer  (typically  in  the  My  Documents  folder  or  similar  location)   then  name  it  “PGF  Projects  -­‐  <month>  <year>”.  Replace  the  words  <month>  and  <year>  with  the  current  month   and  year;  For  example,  you  could  name  it  “PGF  Projects  -­‐  May  2012”.  All  of  your  projects  in  this  class  will  be   created  and  worked  on  from  inside  this  folder.  

PGF:  Course  Setup     Pg.  2    

Next,  download  the  file  Course_Setup.zip  file  from  the  course  website  and  unzip  it  into  your  PGF  Projects  folder.    

 

Inside  of  the  Course_Setup  folder,  you  should  see  these  files:    

 

 

The  ps  folder  contains  the  Perlenspiel  engine  and  supporting  files.  You  will  never  need  to  change  them  during   this  class.  

 

The  game.js  file  contains  the  JavaScript  code  specific  to  whatever  lab  or  game  you  are  working  on.  When   working  on  a  larger  project  you  may  end  up  with  many  of  these  .js  files,  each  containing  code  specific  to  some   aspect  of  the  game.  

 

The  game.html  file  is  the  file  that  you  open  in  a  browser  to  test,  run,  or  play  your  lab  project  or  game.  Go  ahead   and  double  click  on  it  now  to  check  it  out!  It  should  look  like  the  image  below:  

PGF:  Course  Setup     Pg.  3    

 

 

Go  ahead  and  play  with  the  Course  Setup  program,  it's  very  simple,  but  shows  a  few  of  the  things  you  will  be   doing  in  this  class.  

Note:  The  Experiment  and  Lab  Perlenspiel  folders  you  are  required  to  use  in  this  class  are  slightly  different  from   the  one  available  on  http://perlenspiel.org.    

Most  importantly,  it  contains  the  engine  inside  of  the  zip,  so  that  it  will  work  even  while  your  laptop  has  no   internet  connection.  Other  than  that,  the  code  you  write  in  game.js  will  work  in  any  up-­‐to-­‐date  version  of   Perlenspiel.  

 

PGF:  Course  Setup     Pg.  4    

Creating new Projects Throughout  this  course,  you’ll  be  making  a  bunch  of  new  projects  based  on  the  basic  Perlenspiel  template   folder.  

To  begin,  make  a  copy  of  the  Experiment1.zip  file  and  unzip/save  it  to  your  PGF  Projects  folder.  Make  sure  all   the  same  files  from  Course_Setup  are  there,  and  then  open  up  your  text  editor.  Then,  drag  the  game.js  file  into   the  text  editor  to  open  it.  Do  not  double  click  on  the  file  –  this  won’t  work (in  Windows).  

All   of   the   programming   you   will   be   doing   in   this   class   will   be   by   typing   code   into   a   game.js   file   with   specific  TODOs  listed  in  comments  (greyed  out  text  inside  the  game.js  files).  

Testing Your Program After  making  modifications  to  the  game.js  file,  you  should  test  your  program  to  make  sure  it  works  the  way  you   expect.  Double  click  on  the  game.html  file  on  your  computer  and  it  will  open  in  your  browser.  If  Chrome  is  not   set  to  your  default  browser,  you  can  drag  the  game.html  file  into  the  browser  and  it  will  open  there.  

Note  that  after  the  page  is  already  open  in  your  browser,  you  can  reload  the  game  by  refreshing  the  page  with   the  F5  key  (fn  +  F5  on  the  MacBook  keyboard).  Doing  this  will  re-­‐load  Perlenspiel,  and  your  code  along  with  it,  so   that  changes  you  made  will  show  up.  

Once  you  are  done  programming  your  game  or  project,  you  can  upload  the  project  folder  to  a  website  and  give   people  a  link  to  the  game.html  web  page.  

That’s  it  for  setting  up  the  course  software!