Web Programming Section where Web programming languages are shared


Creating a Simple Windows 8 Game with JavaScript Part 3

Gauloran - ait Kullanıcı Resmi (Avatar)
Kadim Üye
Üyelik tarihi:
Teşekkür (Etti):
Teşekkür (Aldı):
(0) %
27-12-2020 20:48
Starting the Game

To start the game, we need to know when the page is ready to run. For that, we use the DOMContentLoaded event to tell us when the page structure has been loaded and scripts are ready to run. This is different from the onload event, which waits for all referenced content to be downloaded.
In default.js, add an initialize() function and have it called by DOMContentLoaded. While we’re at it, let’s add the basis of the game loop as well:
Note: the app.oncheckpoint function is collapsed to make things easier to read.

To work with the canvas, store images, and create bitmaps, we’re going to need a bunch of variables. Also, because the original game assumed a 800x480 screen, we need to scale the images we draw to the actual screen size.
Add the following variables to default.js:
Initializing Canvas and Using PreloadJS

Earlier, I’d mentioned canvas is only updated via JavaScript. To connect to the canvas, you need to first find the element, then retrieve it’s 2D context. That context exposes the drawing functions. We’ll also scale the canvas to match our full screen size.
Update initialize() as follows:
Now we need to load our images so we can draw them to the canvas. There are many ways to do this, but PreloadJS is helpful because we can list what we’ll use and it ensures they are loaded before we reference them. If we don’t do this, we may not reliably get details like image sizes at runtime, creating bugs.
PreloadJS works by reading an array of resources, then calling a function when complete. We’ll specify all of the images we’ll be using.
Extend the initialize() function as follows:
When PreloadJS has readied our assets, the prepareGame() method will be called.
Using EaselJS to Create and Draw Images

Now we need to get those images to the screen (via the canvas). Fortunately, EaselJS has a number of features we’ll find useful:

  • A Stage class that manages the canvas and the scene we’re drawing
  • Bitmap, Text, and SpriteSheet classes, useful for representing items to draw
  • Point class to help position items on the canvas
  • A Ticker class to help manage the game loop (think of it as the heartbeat of the game)
We’ll get to the Ticker a bit later, but now let’s add the Stage so we can start populating it with content. In default.js, add the following to the initialize() function:
This creates the stage and connects it to our game’s canvas element. Now we can add items (called children) to the stage.
Right below the initialize() function, add a prepareGame() function. (Remember we told PreloadJS to call prepareGame when it’s done loading assets). For now, let’s just add one item – the background:
What’s going on here?

  • Line 62 - preload.getResult() is asking PreloadJS for the image it has already loaded for us
  • Line 63 – Create an EaselJS Bitmap instance, using the image as it’s source
  • Lines 64 & 65 – Scale the Bitmap to the resolution of our screen (relative to 800x480 of the original assets)
  • Line 66 – Add the Bitmap to the Stage as a child
  • Line 68 – Ask the Stage to tell the canvas about everything it knows
Let’s run the game. After the splash screen, we now see:
A Quick Change with CSS

As you can see, the background image we added is transparent, so our background color is showing through. The black background is spooky, but quite not what we’re looking for.
One thing we can do is to change which WinJS CSS base we’re using. By default, we use ui-dark.css, but a quick change in default.html to point to ui-light.css, and things automatically pick up new styles:
A quick run now shows:
However, let’s try for a more sky-like color… say, "azure". We can override the WinJS background color by setting our own via CSS. Open /css/default.css and change the body style as shown:
Running again:
A beautiful sky, ready for war!
--------------------- more than you know
- Teşekkür etti.


« Önceki Konu | Sonraki Konu »