initial commit. have 4-directional tiled movement on the arrow keys.
This commit is contained in:
commit
d5823fa2d7
|
@ -0,0 +1,14 @@
|
||||||
|
var logDiv = document.createElement("div")
|
||||||
|
logDiv.id = 'error-log';
|
||||||
|
document.body.appendChild(logDiv);
|
||||||
|
|
||||||
|
// For development, show console embedded in page.
|
||||||
|
console.log = (function (old_function, div_log) {
|
||||||
|
return function (text) {
|
||||||
|
old_function(text);
|
||||||
|
var newLine = document.createElement("div");
|
||||||
|
newLine.textContent = text;
|
||||||
|
div_log.appendChild(newLine);
|
||||||
|
div_log.scrollTop = div_log.scrollHeight;
|
||||||
|
};
|
||||||
|
} (console.log.bind(console), logDiv));
|
Binary file not shown.
After Width: | Height: | Size: 123 B |
|
@ -0,0 +1,27 @@
|
||||||
|
<!doctype html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Hello World</title>
|
||||||
|
<style>
|
||||||
|
#error-log {
|
||||||
|
border: 1px solid #000;
|
||||||
|
height: 5em;
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
#error-log div {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="pixi.min.js"></script>
|
||||||
|
<script src="debuglog.js"></script>
|
||||||
|
<script src="tutorial1.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
//Test that Pixi is working
|
||||||
|
console.log(PIXI);
|
||||||
|
console.log("brep");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,127 @@
|
||||||
|
// Begin constants
|
||||||
|
var unscaledTileSize = 16;
|
||||||
|
var pixelScale = 4;
|
||||||
|
var scaledTileSize = unscaledTileSize * pixelScale;
|
||||||
|
// End constants
|
||||||
|
|
||||||
|
// global entities
|
||||||
|
var player;
|
||||||
|
|
||||||
|
var room = {
|
||||||
|
sprites: []
|
||||||
|
};
|
||||||
|
|
||||||
|
var updates = [];
|
||||||
|
|
||||||
|
//Create the renderer
|
||||||
|
var renderer = PIXI.autoDetectRenderer(256, 256);
|
||||||
|
|
||||||
|
//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;
|
||||||
|
|
||||||
|
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(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 = unscaledTileSize * sprite.gridX;
|
||||||
|
var targetY = unscaledTileSize * 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++; }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 291 B |
Loading…
Reference in New Issue