kontra
Version:
Kontra HTML5 game development library
190 lines (163 loc) • 5.29 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tile Engine</title>
<style>
canvas {
background: black;
}
</style>
<script type="text/javascript" src="../../../kontra.js"></script>
</head>
<body>
<canvas width="600" height="600"></canvas>
<p>M - Mute/Unmute</p>
<script id="code">
/**
* ATTRIBUTION:
* terrain.png - [LPC Tile Atlas]{@link http://opengameart.org/content/lpc-tile-atlas}. See
* Attribution.txt for full list of authors.
* man.png - [LPC White Beard]{@link http://opengameart.org/content/lpc-white-beard}. Stephen
* Challener (Redshrike), Johannes Sjölund, and Carlo Enrico Victoria (Nemisys)
*/
let { canvas, context } = kontra.init();
kontra.initKeys();
kontra.setAudioPath('../../audio/');
kontra.load('terrain.json', 'man.png', 'terrain.png', ['Digital_Forest.mp3', 'Digital_Forest.mp3']).then(function() {
var terrain = kontra.dataAssets.terrain;
// setup tile engine
window.tileEngine = kontra.TileEngine(terrain);
tileEngine.sx = terrain.width * terrain.tilewidth / 2 - canvas.width / 2,
tileEngine.sy = terrain.height * terrain.tileheight - canvas.height
// create the walking man sprite sheet and animations
var spritesheet = kontra.SpriteSheet({
image: kontra.imageAssets.man,
frameWidth: 64,
frameHeight: 64,
animations: {
walk_up: {
frames: '105..112', // frames 105 through 112
frameRate: 12
},
walk_left: {
frames: '118..125',
frameRate: 12
},
walk_down: {
frames: '131..138',
frameRate: 12
},
walk_right: {
frames: '144..151',
frameRate: 12
}
}
});
// create the player
var player = kontra.Sprite({
x: 268,
y: 268,
speed: 3,
startX: 268,
startY: 268,
animations: spritesheet.animations,
update: function() {
// create a smaller bounding box for the player's collision
var collisionBox = {
y: this.y + 43,
x: this.x + 28,
width: 6,
height: 22
};
if (kontra.keyPressed('up')) {
// change the animation
this.playAnimation('walk_up');
// update the animation
this.advance();
// don't move the player if he collides with the collision layer
collisionBox.y -= this.speed;
if (tileEngine.layerCollidesWith('collision', collisionBox)) {
return;
}
// player will walk in the center of the map so long as he doesn't
// reach the edge
if (tileEngine.sy > 0 && this.y <= this.startY) {
tileEngine.sy -= this.speed;
}
// otherwise the map will stop moving and the player will move from
// the center
else {
this.y -= this.speed;
}
}
else if (kontra.keyPressed('down')) {
this.playAnimation('walk_down');
this.advance();
collisionBox.y += this.speed;
if (tileEngine.layerCollidesWith('collision', collisionBox)) {
return;
}
if (tileEngine.sy < tileEngine.mapheight - canvas.height &&
this.y >= this.startY) {
tileEngine.sy += this.speed;
}
else {
this.y += this.speed;
}
}
else if (kontra.keyPressed('left')) {
this.playAnimation('walk_left');
this.advance();
collisionBox.x -= this.speed;
if (tileEngine.layerCollidesWith('collision', collisionBox)) {
return;
}
if (tileEngine.sx > 0 && this.x <= this.startX) {
tileEngine.sx -= this.speed;
}
else {
this.x -= this.speed;
}
}
else if (kontra.keyPressed('right')) {
this.playAnimation('walk_right');
this.advance();
collisionBox.x += this.speed;
if (tileEngine.layerCollidesWith('collision', collisionBox)) {
return;
}
if (tileEngine.sx < tileEngine.mapwidth - canvas.width &&
this.x >= this.startX) {
tileEngine.sx += this.speed;
}
else {
this.x += this.speed;
}
}
},
});
// clamp player position in the game world
player.position.clamp(-16, -16, canvas.width - player.width + 16, canvas.height - player.height);
var loop = kontra.GameLoop({
update: function() {
player.update();
},
render: function() {
tileEngine.render();
player.render();
// draw the topmost layer above the payer so he will go behind the trees
tileEngine.renderLayer('decoration_edges');
}
});
kontra.bindKeys('m', function() {
kontra.audioAssets.Digital_Forest.play();
kontra.audioAssets.Digital_Forest.muted = !kontra.audioAssets.Digital_Forest.muted;
});
kontra.audioAssets.Digital_Forest.loop = true;
kontra.audioAssets.Digital_Forest.muted = true;
kontra.audioAssets.Digital_Forest.volume = 0.5;
loop.start();
});
</script>
</body>
</html>