Welcome to Knack at Western's Game Programming workshop

* * *

We'll be creating a simple Snake game

In this workshop, we'll be learning HTML,CSS,Browser DOM, Javascript and some Game Programming Essentials

What do websites look like?

Websites have something called HTML tags that look like this: <section> inside HTML files which define the structure of websites.

As well you use CSS to style the website and Javascript to add interactivity to the website.

You can click here for all different HTML Tags and what they can do 

<!DOCTYPE html>
<html>
  <!-- Head tells browser where you stored CSS and Javascript files -->
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>    
  </head>
  <!-- Body usually holds your HTML elements -->
  <body>
    <div class="this-is-a-class">
      <h2>This is a title</h2>
    </div>
  </body>
</html>

Pure HTML

This is what a website using only HTML looks like

Adding some CSS

This is what a website using HTML and CSS looks like

What about Javascript?

* * *

Javascript's effect is a bit more tricky to show as an image or even a gif so we'll explain it a bit more in terms of how Javascript is used to power websites

You can use JSto program things on websites

Some Javascript demos below Demo of what JS can do · Another one

  • JSfor buttons

    Checks if buttons are pressed

  • JSfor animation

    Moves HTML around

  • JSfor loading data

    Automatically grab web data

Lets talk about HTML5

Using <canvas>

HTML5 is the latest version of HTML with more features such as new HTML Tags like <canvas> which can be used to draw graphics on webpages and will be used for our snake game

More info

What is a game loop?

  • 01. Initialize

    Sets up game and prepares environment. Checks hardware, etc.

  • 02. Update

    Prepare objects to be drawn and controls changes like damage dealt

  • 03. Draw

    Information is put on the screen.

  • Managing

    • States
    • Entities

Thanks for listening

I hope you've had some fun and please ask questions if you have any.

Find the code here