initial commit. have 4-directional tiled movement on the arrow keys.
This commit is contained in:
Vivian Lim
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