Create a gist now

Instantly share code, notes, and snippets.

HTML5 game microframework, with gamepad support.
// game-window.js -- a minimal HTML5 framework for real-time games.
// 2014-11-07 Felix Pleșoianu <http://felix.plesoianu.ro/>
// Last modified: 2016-09-28
//
// requestAnimationFrame shim courtesy of the three.js library.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
var game_window = function (game) {
"use strict";
var canvas = document.createElement('canvas');
var body = document.getElementsByTagName('body')[0];
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var inputs = {
gp0: null,
keys: {up: false, down: false, left: false, right: false,
space: false, enter: false, escape: false,
mute: false, pause: false},
mouse: {x: -1, y: -1, pressed: false}
};
game.init(canvas, inputs);
game.resize(canvas);
var last_time = 0;
var loop = function (timestamp) {
if (last_time == 0) last_time = timestamp;
var tick = timestamp - last_time;
last_time = timestamp;
game.loop(tick * 0.001, last_time);
requestAnimationFrame(loop);
}
var start_loop = function () {
//last_time = Date.now();
requestAnimationFrame(loop);
};
var game_window_data = {
canvas: canvas,
inputs: inputs,
start_loop: start_loop
};
window.addEventListener("resize", function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
game.resize(canvas);
}, false);
window.addEventListener("focus", function (event) {
game.focus();
}, false);
window.addEventListener("blur", function (event) {
game.blur();
}, false);
window.addEventListener("gamepadconnected", function (event) {
if (event.gamepad.index == 0)
inputs.gp0 = event.gamepad;
}, false);
window.addEventListener("gamepaddisconnected", function (event) {
if (event.gamepad.index == 0)
inputs.gp0 = null;
}, false);
canvas.addEventListener("mousedown", function (event) {
inputs.mouse.x = event.layerX || event.offsetX;
inputs.mouse.y = event.layerY || event.offsetY;
inputs.mouse.pressed = true;
}, false);
canvas.addEventListener("mousemove", function (event) {
inputs.mouse.x = event.layerX || event.offsetX;
inputs.mouse.y = event.layerY || event.offsetY;
}, false);
canvas.addEventListener("mouseup", function (event) {
inputs.mouse.x = event.layerX || event.offsetX;
inputs.mouse.y = event.layerY || event.offsetY;
inputs.mouse.pressed = false;
}, false);
window.addEventListener("keydown", function (event) {
var key = String.fromCharCode(
event.charCode || event.keyCode);
switch (key) {
case '%':
case 'A':
inputs.keys.left = true;
break;
case '(':
case 'S':
inputs.keys.down = true;
break;
case '&':
case 'W':
inputs.keys.up = true;
break;
case "'":
case 'D':
inputs.keys.right = true;
break;
case 'P':
inputs.keys.pause = true;
break;
case 'M':
inputs.keys.mute = true;
break;
case " ":
inputs.keys.space = true;
default:
if (event.keyCode === 13)
inputs.keys.enter = true;
else if (event.keyCode === 27)
inputs.keys.escape = true;
}
}, false);
window.addEventListener("keyup", function (event) {
var key = String.fromCharCode(
event.charCode || event.keyCode);
switch (key) {
case '%':
case 'A':
inputs.keys.left = false;
break;
case '(':
case 'S':
inputs.keys.down = false;
break;
case '&':
case 'W':
inputs.keys.up = false;
break;
case "'":
case 'D':
inputs.keys.right = false;
break;
case 'P':
inputs.keys.pause = false;
break;
case 'M':
inputs.keys.mute = false;
break;
case " ":
inputs.keys.space = false;
default:
if (event.keyCode === 13)
inputs.keys.enter = false;
else if (event.keyCode === 27)
inputs.keys.escape = false;
}
}, false);
return game_window_data;
};
// requestAnimationFrame shim courtesy of the three.js library.
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function () {
var lastTime = 0;
var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
for (var x=0; x<vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame =
window[ vendors[x] + 'RequestAnimationFrame' ];
window.cancelAnimationFrame =
window[ vendors[x] + 'CancelAnimationFrame' ]
|| window[ vendors[x] + 'CancelRequestAnimationFrame' ];
}
if (window.requestAnimationFrame === undefined) {
window.requestAnimationFrame = function (callback, element) {
var currTime = Date.now();
var timeToCall =
Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(
function () { callback(currTime+timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
window.cancelAnimationFrame =
window.cancelAnimationFrame
|| function (id) { window.clearTimeout(id) };
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment