HTML and CSS Reference
In-Depth Information
$(this.tiles).show();
},
setupTiles: function() {
var sheet = this.entity.collision.sheet();
this.tiles = document.createElement("canvas");
this.tiles.width = Q.el.width();
this.tiles.height = Q.el.height();
var x = 0, y = 0, ctx = this.tiles.getContext('2d');
for(var i=0;i<sheet.frames;i++) {
sheet.draw(ctx, x, y, i);
x += sheet.tilew;
if(x >= this.tiles.width) {
x = 0;
y += sheet.tileh;
}
}
$(this.tiles)
.prependTo(Q.wrapper)
.css({position:'absolute',
top:60,
zIndex: 200,
backgroundColor:'white',
width: Q.el.width(),
height: Q.el.height()
})
.on('touchstart mousedown',this.selectTile);
},
selectTile: function(e) {
var touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
canvasPos = $(this.tiles).offset(),
canvasX = (touch.pageX - canvasPos.left),
canvasY = (touch.pageY - canvasPos.top),
tileLayer = this.entity.collision,
sheet = tileLayer.sheet(),
tileX = Math.floor(canvasX / sheet.tilew),
tileY = Math.floor(canvasY / sheet.tileh),
frame = tileX + tileY *
Math.floor(this.tiles.width / sheet.tilew);
$(this.tiles).hide();
if(frame <= sheet.frames) {
this.activeTile = frame;
}
