I'm new to subway style programming, so I follow the tutorial here http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/ for games with using createJS. Here is the code
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>game</title> <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script> <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <script src="/js/CreateJS/easeljs-0.5.0.min.js"></script> <script src="/js/CreateJS/preloadjs-0.2.0.min.js"></script> </head> <body> <canvas id="gameCanvas"></canvas> </body> </html>
and here is the javascript code
// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/?LinkId=232509 (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; WinJS.strictProcessing(); function initialize() { canvas = document.getElementById("gameCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; context = canvas.getContext("2d"); preload = new PreloadJS(); preload.onComplete = prepareGame; var manifest = [ { id: "screenImage", src: "images/Backgrounds/gameplay_screen.png" }, { id: "redImage", src: "images/Catapults/Red/redIdle/redIdle.png" }, { id: "blueImage", src: "images/Catapults/Blue/blueIdle/blueIdle.png" }, { id: "ammoImage", src: "images/Ammo/rock_ammo.png" }, { id: "winImage", src: "images/Backgrounds/victory.png" }, { id: "loseImage", src: "images/Backgrounds/defeat.png" }, { id: "blueFire", src: "images/Catapults/Blue/blueFire/blueCatapult_fire.png" }, { id: "redFire", src: "images/Catapults/Red/redFire/redCatapult_fire.png" }, ]; preload.loadManifest(manifest); stage = new Stage(canvas); } function prepareGame() { bgImage = preload.getResult("screenImage").result; bgBitmap = new Bitmap(bgImage); bgBitmap.scaleX = SCALE_X; bgBitmap.scaleY = SCALE_Y; stage.addChild(bgBitmap); stage.update(); } function gameLoop() { } function update() { } function draw() { } var canvas, context, stage; var bgImage, p1Image, p2Image, ammoImage, p1lives, p2lives, title, endGameImage; var bgBitmap, p1Bitmap, p2Bitmap, ammoBitmap; var preload; // Current Display Factor. Because the orignal assumed a 800x480 screen var SCALE_X = window.innerWidth / 800; var SCALE_Y = window.innerHeight / 480; var MARGIN = 25; var GROUND_Y = 390 * SCALE_Y; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). }; document.addEventListener("DOMContentLoaded", initialize, false); app.start(); })();
Now the problem is that whenever I try to compile the code, it gives me the Preload undefined error. I do not understand why I included the script in the HTML and the file in my project. Would someone please help this issue kill me in the last hour, and I just want to make a simple game.