The SPIRE Engine

Elijah Cirioli

by ElijahCirioli

HTML

<canvas id="myCanvas" width="700" height="500" style="border:1px solid #000000;"></canvas>

JavaScript

//setup canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

/******************************************
							GLOBAL VARIABLES
******************************************/
//general variables
var playing = true; //is the game running
var tileSize = 64; //the side length of individual tiles
var framerate = 30; //how many frames per second should the game run at

//arrays
var enemies = []; //the array of bad guys
var map = []; //where current maps are stored
var tileSet = []; //the array of tile types

//movement variables
var gravity = 1.7; //the amount of gravity in the level. Only applicable in sideScroller
var moveStyle = "sideScroller"; //"rotationBased", "RPG", or "sideScroller"






/******************************************
							     IMAGES
******************************************/
//the background --optional--
var backgroundImage = ""; //the url of the pic
var bgImage = new Image(); //defining the name of the image
bgImage.src = backgroundImage; //setting the .src

//character image
var spriteSheet = "https://s1.postimg.org/9o3ntp5zwf/New_Piskel_4_2_1_1_5_2.png"; //the url of the pic
var ssImage = new Image(); //defining the name of the image
ssImage.src = spriteSheet; //setting the .src

//top down grass
var grassTopImage = "https://s26.postimg.org/huzdqvh5l/New_Piskel_2.png"; //the url of the pic
var gtImage = new Image(); //defining the name of the image
gtImage.src = grassTopImage; //setting the .src

//side view of grass
var grassSideImage = "https://s25.postimg.org/3ml5v24yn/New_Piskel_2_1.png"; //the url of the pic
var gsImage = new Image(); //defining the name of the image
gsImage.src = grassSideImage; //setting the .src

//dirt
var dirtImage = "https://s25.postimg.org/mex0z0r6n/New_Piskel_2_2.png"; //the url of the pic
var drImage = new Image(); //defining the name of the image
drImage.src = dirtImage; //setting the .src

//stone bricks
var brickImage =...