basicJsGameImplementation

by hotfeet

JavaScript

var canvas;
var ctx;

var displayWidth;
var displayHeight;

var now;
var dt;
var last;
var step;
var fpsMeter;

var mousePos;

var keyboard = {
	input: { left: false, right: false, up: false, down: false, space: false }
};

var KEY = {
    RETURN:   13,
    ESC:      27,
    SPACE:    32,
    LEFT:     37,
    UP:       38,
    RIGHT:    39,
    DOWN:     40,
    ZERO:     48, ONE: 49, TWO: 50, THREE: 51, FOUR: 52, FIVE: 53, SIX: 54, SEVEN: 55, EIGHT: 56, NINE: 57,
    A:        65, B: 66, C: 67, D: 68, E: 69, F: 70, G: 71, H: 72, I: 73, J: 74, K: 75, L: 76, M: 77, N: 78, O: 79, P: 80, Q: 81, R: 82, S: 83, T: 84, U: 85, V: 86, W: 87, X: 88, Y: 89, Z: 90
};

var PI2 = Math.PI * 2;
var DEGTORAD = Math.PI / 180;
var RADTODEG = 180 / Math.PI;
var DEBUG = true;

var playerSpriteSheet;
var treeSprite;
var rockSprite;

var player;
var obstacles;

function init() {
	//landscape
	//displayWidth = 480;
	//displayHeight = 320;
	//portrait
	displayWidth = 320;
	displayHeight = 480;
	
	//create the canvas to use for rendering
    canvas = document.createElement("canvas");
	canvas.width = displayWidth;
    canvas.height = displayHeight;

	//append the render canvas to the document
    document.body.appendChild(canvas);
    //get the drawing context of the render canvas
    ctx = canvas.getContext("2d");

    //set the default values of the time vars
    now = 0;
    dt = 0,
    last = timestamp(),
    step = 1 / 60;
	fps = 0;
			
	//add input event listeners
	document.addEventListener('keydown', function(ev) { return onkey(ev, ev.keyCode, true);  }, false);
	document.addEventListener('keyup',   function(ev) { return onkey(ev, ev.keyCode, false); }, false);
		
	mousePos = { x: 0, y: 0 };
	
	canvas.addEventListener('mousemove', function(evt) {
		mousePos = getMousePos(canvas, evt);
	}, false);
	canvas.addEventListener('mouseup', function(evt) {
		//do mouse up action here (i think it is left button only)
	}, false);
   
	//setup game here
	playerSpriteSheet = new...