139 lines
3.4 KiB
JavaScript
139 lines
3.4 KiB
JavaScript
// Begin constants
|
|
var unscaledTileSize = 16;
|
|
var pixelScale = 4;
|
|
var scaledTileSize = unscaledTileSize * pixelScale;
|
|
// End constants
|
|
|
|
var debugFlags = {
|
|
showSquares: true
|
|
}
|
|
|
|
// global entities
|
|
var player;
|
|
|
|
var room = {
|
|
sprites: []
|
|
};
|
|
|
|
var updates = [];
|
|
|
|
//Create the renderer
|
|
var renderer = PIXI.autoDetectRenderer(256, 256);
|
|
var graphics = new PIXI.Graphics();
|
|
|
|
//Add the canvas to the HTML document
|
|
document.body.appendChild(renderer.view);
|
|
|
|
// Load assets
|
|
PIXI.loader
|
|
.add("viv_front.png")
|
|
.load(setup);
|
|
|
|
//Create a container object called the `stage`
|
|
var stage = new PIXI.Container();
|
|
|
|
function setup() {
|
|
player = new PIXI.Sprite(
|
|
PIXI.loader.resources["viv_front.png"].texture
|
|
);
|
|
player.gridX = 2;
|
|
player.gridY = 2;
|
|
player.scale.set(pixelScale);
|
|
|
|
room.sprites.push(player);
|
|
|
|
// init keyboard
|
|
var keyLeft = actionKey(37),
|
|
keyUp = actionKey(38),
|
|
keyRight = actionKey(39),
|
|
keyDown = actionKey(40);
|
|
|
|
keyLeft.actionList.push(function(){player.gridX--;});
|
|
keyRight.actionList.push(function(){player.gridX++;});
|
|
keyUp.actionList.push(function(){player.gridY--;});
|
|
keyDown.actionList.push(function(){player.gridY++;});
|
|
|
|
stage.addChild(graphics);
|
|
stage.addChild(player);
|
|
// init controls
|
|
//Tell the `renderer` to `render` the `stage`
|
|
gameLoop();
|
|
}
|
|
|
|
function gameLoop() {
|
|
requestAnimationFrame(gameLoop);
|
|
updateWorld();
|
|
renderer.render(stage);
|
|
}
|
|
|
|
function updateWorld() {
|
|
for(var i = 0; i < room.sprites.length; i++)
|
|
{
|
|
var sprite = room.sprites[i];
|
|
// move sprite i towards its new position in the grid.
|
|
var targetX = scaledTileSize * sprite.gridX;
|
|
var targetY = scaledTileSize * sprite.gridY;
|
|
if (sprite.position.x > targetX){ sprite.position.x--; }
|
|
if (sprite.position.x < targetX){ sprite.position.x++; }
|
|
if (sprite.position.y > targetY){ sprite.position.y--; }
|
|
if (sprite.position.y < targetY){ sprite.position.y++; }
|
|
if (debugFlags.showSquares){
|
|
graphics.lineStyle(3, 0xFF0000, 0.8);
|
|
graphics.drawRect(targetX, targetY, scaledTileSize, scaledTileSize);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function keyboard(keyCode) {
|
|
var key = {};
|
|
key.code = keyCode;
|
|
key.isDown = false;
|
|
key.isUp = true;
|
|
key.press = undefined;
|
|
key.release = undefined;
|
|
//The `downHandler`
|
|
key.downHandler = function(event) {
|
|
if (event.keyCode === key.code) {
|
|
if (key.isUp && key.press) key.press();
|
|
key.isDown = true;
|
|
key.isUp = false;
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
|
|
//The `upHandler`
|
|
key.upHandler = function(event) {
|
|
if (event.keyCode === key.code) {
|
|
if (key.isDown && key.release) key.release();
|
|
key.isDown = false;
|
|
key.isUp = true;
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
|
|
//Attach event listeners
|
|
window.addEventListener(
|
|
"keydown", key.downHandler.bind(key), false
|
|
);
|
|
window.addEventListener(
|
|
"keyup", key.upHandler.bind(key), false
|
|
);
|
|
return key;
|
|
|
|
}
|
|
|
|
function actionKey(keyCode) {
|
|
var key = {};
|
|
key.keyboard = keyboard(keyCode);
|
|
key.actionList = [];
|
|
key.keyboard.press = function(){
|
|
// todo execute everything in actionlist
|
|
for (var i = 0; i < key.actionList.length; i++) {
|
|
key.actionList[i]();
|
|
}
|
|
};
|
|
key.press = function(){};
|
|
return key;
|
|
}
|