and play here..
http://www.brissyriders.com/turtlewiz/index.htm
What i am wanting is to know how do I animate the character. and how can i animate the enemies.
I have movement and directions sorted, but it's just the animation of say 'walking'
I have extended the character (turtle.png) sprite sheet, but I don't know how to animate it when he walks. Or how to Animate the enimies, can anyone help me?
Eventually i'll use images that are a little more appealing but for now this is the best i got.
Thanks.
Note I couldn't add the attachment, boatd quota had been reached.. not sure if that was my limit or the boards..
So hosted it here
http://www.brissyriders.com/turtlewiz/T ... _files.zip
How to animate sprite
Re: How to animate sprite
For those that don't want to download here are the core js files.
engine.js
spritedefinitions.js
engine.js
Code: Select all
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
canvas.width = 768;
canvas.height = 640;
var eng = {
imageCount: 0,
loadedImages: 0,
keysDown: [],
fps: {
lastUpdated: Date.now(),
current: 0,
display: 0,
update: function() {
if (Date.now() - this.lastUpdated < 1000) {
this.current ++;
} else {
this.display = this.current;
this.current = 0;
this.lastUpdated = Date.now();
}
},
draw: function() {
ctx.font = '12pt visitor';
ctx.fillStyle = '#fff';
ctx.textBaseline = 'top';
ctx.fillText(this.display + ' fps', 10, 5);
}
},
clearCanvas: function() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
},
inArray: function(needle, haystack, returnKey) {
for (var key in haystack) {
if (needle == haystack[key]) {
if (returnKey) {
return parseInt(key);
} else {
return true;
}
}
}
return false;
},
isSolid: function(tileX, tileY) {
if (inArray(game.currentMap.code[tileX][tileY], tilesets.maptiles.solid)) {
return true;
} else {
return false;
}
},
updateSprites: function(obj, mod) {
for (var key in obj) {
if (typeof obj[key].update == 'undefined') {
eng.updateSprites(obj[key], mod);
} else {
if (obj[key].mapX == game.mapXPos && obj[key].mapY == game.mapYPos) {
if (obj[key].kill) {
delete obj[key];
} else {
obj[key].update(mod);
}
} else if (obj[key].projectile && !obj[key].precip){
delete obj[key];
}
}
}
},
drawSprites: function(obj) {
for (var key in obj) {
if (typeof obj[key].update == 'undefined') {
eng.drawSprites(obj[key]);
} else {
if (obj[key].mapX == game.mapXPos && obj[key].mapY == game.mapYPos && !obj[key].playerControlled && !obj[key].projectile) { //draw sprites
obj[key].draw();
}
}
}
if (sprites.player.mapX == game.mapXPos && sprites.player.mapY == game.mapYPos) { //draw player
sprites.player.draw();
}
for (var key in obj) {
if (typeof obj[key].update == 'undefined') {
eng.drawSprites(obj[key]);
} else {
if (obj[key].mapX == game.mapXPos && obj[key].mapY == game.mapYPos && obj[key].projectile) { //draw projectiles
obj[key].draw();
}
}
}
},
updateMap: function() {
game.currentMap = maps[game.mapXPos][game.mapYPos];
if (!eng.inArray(game.mapXPos + ',' + game.mapYPos, game.discoveredMaps)) {
game.discoveredMaps.push(game.mapXPos + ',' + game.mapYPos);
}
if (typeof game.currentMap.onload != 'undefined') {
game.currentMap.onload();
}
},
setMessage: function(message) {
game.message = message;
delete eng.keysDown[32];
},
drawMessage: function(message) {
ctx.font = '15pt visitor';
ctx.textBaseline = 'top';
var textArray = [], textBox = {width: 0};
message = message.split(' ');
var numberOfLines = Math.ceil(message.length / 5);
for (line = 0; line < numberOfLines; line ++) {
if (typeof textArray[line] == 'undefined') textArray[line] = [];
for (word = 0; word < 5; word ++) {
textArray[line].push(message[line * 5 + word]);
}
if (ctx.measureText(textArray[line].join(' ')).width > textBox.width) textBox.width = ctx.measureText(textArray[line].join(' ')).width;
}
textBox.height = numberOfLines * 17;
ctx.fillStyle = '#000';
ctx.fillRect(canvas.width / 2 - textBox.width / 2 - 10, canvas.height / 2 - textBox.height / 2 - 5, textBox.width + 20, textBox.height + 15);
ctx.fillStyle = '#fff';
for (line in textArray) {
ctx.fillText(textArray[line].join(' '), Math.floor(canvas.width / 2 - textBox.width / 2), Math.floor(canvas.height / 2 - textBox.height / 2 + line * 17));
}
},
drawHeart: function() {
ctx.fillStyle = 'rgba(0, 0, 0, .5)';
ctx.fillRect(16, canvas.height - 80, 64, 64);
ctx.save();
ctx.globalAlpha = .75;
ctx.drawImage(tilesets.heart.image, sprites.player.health * tilesets.heart.tileWidth, 0, tilesets.heart.tileWidth, tilesets.heart.tileHeight, 16, canvas.height - 16 - tilesets.heart.tileHeight, tilesets.heart.tileWidth, tilesets.heart.tileHeight);
ctx.restore();
},
useItem: function() {
if (Date.now() - game.itemDelay > 500) {
game.itemDelay = Date.now();
switch (sprites.player.inventory[game.selectedItem]) {
case 'axe':
var axeX, axeY, axeDirection;
switch (sprites.player.currentState) {
case 'left':
axeX = sprites.player.x - tilesets.axe.tileWidth;
axeY = sprites.player.y;
axeDirection = 'left';
break;
case 'up':
axeX = sprites.player.x;
axeY = sprites.player.y - tilesets.axe.tileHeight;
axeDirection = 'up';
break;
case 'right':
axeX = sprites.player.x + sprites.player.width;
axeY = sprites.player.y;
axeDirection = 'right';
break;
case 'down':
axeX = sprites.player.x;
axeY = sprites.player.y + sprites.player.height;
axeDirection = 'down';
break;
}
sprites.axe = new Sprite(spriteDefinitions.axe, axeX, axeY, game.mapXPos, game.mapYPos, axeDirection,
function() {
if (typeof this.timer == 'undefined') {
this.timer = Date.now();
} else {
if (Date.now() - this.timer > 75) {
this.kill = true;
}
}
if (this.collidesTile('1,0')) { //cut bramble
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '1,0') {
game.currentMap.code[x][y] = '2,0';
}
}
}
}
}
);
break;
case 'fireball':
var fireballX, fireballY, fireballDirection;
switch (sprites.player.currentState) {
case 'left':
fireballX = sprites.player.x - tilesets.fireball.tileWidth;
fireballY = sprites.player.y + 12;
fireballDirection = 'left';
break;
case 'up':
fireballX = sprites.player.x + 12;
fireballY = sprites.player.y - tilesets.fireball.tileHeight;
fireballDirection = 'up';
break;
case 'right':
fireballX = sprites.player.x + sprites.player.width;
fireballY = sprites.player.y + 12;
fireballDirection = 'right';
break;
case 'down':
fireballX = sprites.player.x + 12;
fireballY = sprites.player.y + sprites.player.height;
fireballDirection = 'down';
break;
}
sprites.fireball = new Sprite(spriteDefinitions.fireball, fireballX, fireballY, game.mapXPos, game.mapYPos, fireballDirection,
function(mod) {
if (typeof this.timer == 'undefined') {
this.timer = Date.now();
} else {
if (Date.now() - this.timer > 500) {
this.kill = true;
}
}
if (this.collidesTile('6,1')) { // light camp fire
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '6,1') {
game.currentMap.code[x][y] = '7,1';
if (game.plotSequence == 2) {
game.plotSequence = 3;
}
}
}
}
}
if (this.collidesTile('4,4')) { // melt ice
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '4,4') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
if (!sprites.player.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight})) {
game.currentMap.code[x][y] = '0,1';
}
}
}
}
}
}
if (this.collidesTile('2,7')) { // ignite cactus
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '2,7') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
if (!sprites.player.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight})) {
game.currentMap.code[x][y] = '1,7';
}
}
}
}
}
}
if (this.collidesTile('3,7')) { // ignite other cactus
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '3,7') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
if (!sprites.player.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight})) {
game.currentMap.code[x][y] = '0,7';
}
}
}
}
}
}
if (this.collidesTile('0,6') || this.collidesTile('3,6') || this.collidesTile('2,11')) { //delete if hits rock/brick
this.kill = true;
}
switch (this.currentState) {
case 'left':
this.x -= this.speed * mod;
break
case 'up':
this.y -= this.speed * mod;
break
case 'right':
this.x += this.speed * mod;
break
case 'down':
this.y += this.speed * mod;
break
}
}
);
break;
case 'potion':
if (sprites.player.health < 5) {
sprites.player.health = 5;
eng.deleteFromInv(sprites.player.inventory[game.selectedItem], 1);
eng.scrollItem();
}
break;
case 'icewand':
sprites.snowflake = new Sprite(spriteDefinitions.snowflake, sprites.player.x + sprites.player.width / 2 - 12, sprites.player.y + sprites.player.height / 2 - 12, game.mapXPos, game.mapYPos, sprites.player.currentState,
function(mod) {
if (typeof this.timer == 'undefined') {
this.timer = Date.now();
} else {
if (Date.now() - this.timer > 500) {
this.kill = true;
}
}
if (this.collidesTile('0,1')) { // freeze water
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '0,1') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
game.currentMap.code[x][y] = '4,4';
}
}
}
}
}
if (this.collidesTile('1,7')) { // put out cactus
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '1,7') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
if (!sprites.player.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight})) {
game.currentMap.code[x][y] = '2,7';
}
}
}
}
}
}
if (this.collidesTile('0,7')) { // put out other cactus
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '0,7') {
if (x != 0 && x != 11 && y != 0 && y != 9) {
if (!sprites.player.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight})) {
game.currentMap.code[x][y] = '3,7';
}
}
}
}
}
}
if (this.collidesTile('0,6') || this.collidesTile('3,6') || this.collidesTile('2,11')) { //delete if hits rock
this.kill = true;
}
switch (this.currentState) {
case 'left':
this.x -= this.speed * mod;
break
case 'up':
this.y -= this.speed * mod;
break
case 'right':
this.x += this.speed * mod;
break
case 'down':
this.y += this.speed * mod;
break
}
}
);
break;
case 'map':
if (game.displayMap) {
game.displayMap = false;
} else {
game.displayMap = true;
}
break;
case 'hammer':
var hammerX, hammerY, hammerDirection;
switch (sprites.player.currentState) {
case 'left':
hammerX = sprites.player.x - tilesets.hammer.tileWidth;
hammerY = sprites.player.y;
hammerDirection = 'left';
break;
case 'up':
hammerX = sprites.player.x;
hammerY = sprites.player.y - tilesets.hammer.tileHeight;
hammerDirection = 'up';
break;
case 'right':
hammerX = sprites.player.x + sprites.player.width;
hammerY = sprites.player.y;
hammerDirection = 'right';
break;
case 'down':
hammerX = sprites.player.x;
hammerY = sprites.player.y + sprites.player.height;
hammerDirection = 'down';
break;
}
sprites.hammer = new Sprite(spriteDefinitions.hammer, hammerX, hammerY, game.mapXPos, game.mapYPos, hammerDirection,
function() {
if (typeof this.timer == 'undefined') {
this.timer = Date.now();
} else {
if (Date.now() - this.timer > 75) {
this.kill = true;
}
}
if (this.collidesTile('0,6')) { //smash rocks
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '0,6') {
game.currentMap.code[x][y] = '2,6';
}
}
}
}
if (this.collidesTile('2,11')) { //smash bricks
for (var x in game.currentMap.code) {
for (var y in game.currentMap.code[x]) {
if (this.collides({x: x * tilesets.maptiles.tileWidth, y: y * tilesets.maptiles.tileHeight, width: tilesets.maptiles.tileWidth, height: tilesets.maptiles.tileHeight}) && game.currentMap.code[x][y] == '2,11') {
game.currentMap.code[x][y] = '1,9';
}
}
}
}
}
);
break;
case 'chicken':
if (sprites.player.collides(sprites.smash)) {
sprites.smash.message = 'Smash thanks you.';
eng.deleteFromInv('chicken', 1);
eng.setMessage('You found Smash\'s Chicken? Smash grateful. Take this armor. Player got the fireproof armor!');
sprites.brownchicken = new Sprite(spriteDefinitions.brownchicken, 256, 320, 1, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 50);
}
);
sprites.player.tileset = tilesets.fireproofturtle;
sprites.player.hasArmor = true;
}
break;
}
}
},
scrollItem: function() {
if (typeof sprites.player.inventory[game.selectedItem + 1] == 'undefined') {
game.selectedItem = 0;
} else {
game.selectedItem += 1;
}
},
drawItem: function() {
if (typeof sprites.player.inventory[game.selectedItem] != 'undefined') {
ctx.fillStyle = 'rgba(0, 0, 0, .5)';
ctx.fillRect(canvas.width - 80, canvas.height - 80, 64, 64);
ctx.save();
ctx.globalAlpha = .75;
switch (sprites.player.inventory[game.selectedItem]) {
case 'axe':
ctx.drawImage(tilesets.axe.image, 0, 0, tilesets.axe.tileWidth, tilesets.axe.tileHeight, canvas.width - 80, canvas.height - 80, tilesets.axe.tileWidth, tilesets.axe.tileHeight);
break;
case 'fireball':
ctx.drawImage(tilesets.fireball.image, 0, 0, tilesets.fireball.tileWidth, tilesets.fireball.tileHeight, canvas.width - 68, canvas.height - 68, tilesets.fireball.tileWidth, tilesets.fireball.tileHeight);
break;
case 'potion':
ctx.drawImage(tilesets.potion.image, 0, 0, tilesets.potion.tileWidth, tilesets.potion.tileHeight, canvas.width - 76, canvas.height - 80, tilesets.potion.tileWidth, tilesets.potion.tileHeight);
break;
case 'key':
ctx.drawImage(tilesets.keys.image, 0, 0, tilesets.keys.tileWidth, tilesets.keys.tileHeight, canvas.width - 80, canvas.height - 80, tilesets.keys.tileWidth, tilesets.keys.tileHeight);
break;
case 'icewand':
ctx.drawImage(tilesets.icewand.image, 0, 0, tilesets.icewand.tileWidth, tilesets.icewand.tileHeight, canvas.width - 80, canvas.height - 80, tilesets.icewand.tileWidth, tilesets.icewand.tileHeight);
break;
case 'map':
ctx.drawImage(tilesets.mapitem.image, 0, 0, tilesets.mapitem.tileWidth, tilesets.mapitem.tileHeight, canvas.width - 72, canvas.height - 72, tilesets.mapitem.tileWidth, tilesets.mapitem.tileHeight);
break;
case 'hammer':
ctx.drawImage(tilesets.hammer.image, 0, 0, tilesets.hammer.tileWidth, tilesets.hammer.tileHeight, canvas.width - 80, canvas.height - 80, tilesets.hammer.tileWidth, tilesets.hammer.tileHeight);
break;
case 'chicken':
ctx.drawImage(tilesets.chicken.image, 168, 0, tilesets.chicken.tileWidth, tilesets.chicken.tileHeight, canvas.width - 76, canvas.height - 68, tilesets.chicken.tileWidth, tilesets.chicken.tileHeight);
break;
}
ctx.restore();
}
},
deleteFromInv: function(item, quantity) {
for (i = quantity; i > 0; i --) {
var returnKey = eng.inArray(item, sprites.player.inventory, true);
if (returnKey !== false) {
sprites.player.inventory.splice(returnKey, 1);
eng.scrollItem();
} else {
return false;
}
}
},
drawMap: function() {
if (sprites.player.inventory[game.selectedItem] != 'map') {
game.displayMap = false;
}
var drawX = Math.floor(canvas.width / 2 - tilesets.gamemap.tileWidth / 2), drawY = Math.floor(canvas.height / 2 - tilesets.gamemap.tileHeight / 2);
ctx.drawImage(tilesets.gamemap.image, 0, 0, tilesets.gamemap.tileWidth, tilesets.gamemap.tileHeight, drawX, drawY, tilesets.gamemap.tileWidth, tilesets.gamemap.tileHeight);
for (var x = 0; x < tilesets.gamemap.tileWidth; x += 40) {
for (var y = 0; y < tilesets.gamemap.tileHeight; y += 40) {
if (!eng.inArray(x / 40 + ',' + y / 40, game.discoveredMaps)) {
ctx.fillStyle = '#000';
ctx.fillRect(x + drawX, y + drawY, 40, 40);
}
}
}
if (typeof game.mapTurtleHeadFlash == 'undefined') {
game.mapTurtleHeadFlash = true;
game.mapTurtleHeadFlashTimer = Date.now();
}
if (game.mapTurtleHeadFlash) {
ctx.drawImage(tilesets.turtlehead.image, 0, 0, tilesets.turtlehead.tileWidth, tilesets.turtlehead.tileHeight, game.mapXPos * 40 + drawX + 8, game.mapYPos * 40 + drawY + 8, tilesets.turtlehead.tileWidth, tilesets.turtlehead.tileHeight);
}
if (Date.now() - game.mapTurtleHeadFlashTimer > 300){
game.mapTurtleHeadFlash = !game.mapTurtleHeadFlash;
game.mapTurtleHeadFlashTimer = Date.now();
}
},
drawHealthBar: function(sprite) {
if (game.mapXPos == sprite.mapX && game.mapYPos == sprite.mapY && sprite.health > 0) {
ctx.fillStyle = '#000';
ctx.fillRect(192, 576, 384, 32);
ctx.fillStyle = '#600';
ctx.fillRect(200, 584, Math.floor(sprite.health / sprite.maxHealth * 368), 16);
}
}
}
function Tileset(src, tileWidth, tileHeight, solid) {
eng.imageCount ++;
this.image = new Image();
this.image.onload = function() {eng.loadedImages ++;}
this.image.src = src;
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this.solid = solid;
}
function SpriteDefinition(tileset, states, speed, health, collidesWithSolid, playerControlled, attributes, collisions) {
this.tileset = tileset;
this.states = states;
this.speed = speed;
this.health = health;
this.collidesWithSolid = collidesWithSolid;
this.playerControlled = playerControlled;
this.attributes = attributes;
this.collisions = collisions;
}
function Sprite(definition, x, y, mapX, mapY, currentState, func, onDeath) {
this.tileset = definition['tileset'];
this.states = definition['states'];
this.speed = definition['speed'];
this.maxHealth = definition['health'];
this.health = definition['health'];
this.collidesWithSolid = definition['collidesWithSolid'];
this.playerControlled = definition['playerControlled'];
for (var key in definition['attributes']) {
this[definition['attributes'][key]] = true;
}
this.collisions = definition['collisions'];
this.currentHealth = this.health;
this.currentState = currentState;
this.width = this.tileset.tileWidth;
this.height = this.tileset.tileHeight;
this.x = x;
this.y = y;
this.mapX = mapX;
this.mapY = mapY;
this.func = func;
this.onDeath = onDeath;
}
Sprite.prototype.update = function(mod) {
if (this.x > canvas.width || this.x < 0 - this.width || this.y > canvas.height || this.y < 0 - this.height) {
if (!this.allowLiveOffScreen) {
this.kill = true;
if (typeof this.onDeath != 'undefined') {
this.onDeath(mod);
}
}
}
if (this.playerControlled && !this.beingBumped) {
this.targetX = this.x;
this.targetY = this.y;
if (eng.keysDown[37] || eng.keysDown[39]) {
if (eng.keysDown[37] && !eng.keysDown[39]) { //left
this.targetX -= this.speed * mod;
this.currentState = 'left';
}
if (eng.keysDown[39] && !eng.keysDown[37]) { //right
this.targetX += this.speed * mod;
this.currentState = 'right';
}
} else {
if (eng.keysDown[38] && !eng.keysDown[40]) { //up
this.targetY -= this.speed * mod;
this.currentState = 'up';
}
if (eng.keysDown[40] && !eng.keysDown[38]) { //down
this.targetY += this.speed * mod;
this.currentState = 'down';
}
}
if (this.targetX < 0) { //off map left
game.mapXPos -= 1;
eng.updateMap();
this.targetX = canvas.width - this.width;
this.mapX -= 1;
} else if (this.targetY < 0) { //off map up
game.mapYPos -= 1;
eng.updateMap();
this.targetY = canvas.height - this.height;
this.mapY -= 1;
} else if (this.targetX + this.width > canvas.width) { //off map right
game.mapXPos += 1;
eng.updateMap();
this.targetX = 0;
this.mapX += 1;
} else if (this.targetY + this.height > canvas.height) { //off map down
game.mapYPos += 1;
eng.updateMap();
this.targetY = 0;
this.mapY += 1;
}
} else if (this.beingBumped) {
if (this.targetX < 0) {
this.targetX = 0;
} else if (this.targetY < 0) {
this.targetY = 0;
} else if (this.targetX + this.width > canvas.width) {
this.targetX = canvas.width - this.width;
} else if (this.targetY + this.height > canvas.height) {
this.targetY = canvas.height - this.height;
}
if (Date.now() - this.bumpTimer > 200) {
this.beingBumped = false;
}
}
if (this.invincible) {
if (Date.now() - this.invincibleTimer > 500) {
this.invincible = false;
} else {
if (this.flashing) {
if (Date.now() - this.flashTimer > 500) {
this.flashing = false;
this.flashOn = false;
} else {
if (this.flashOn) {
if (Date.now() - this.flashOnTimer > 50) {
this.flashOn = false;
this.flashOnTimer = Date.now();
}
} else {
if (Date.now() - this.flashOnTimer > 50) {
this.flashOn = true;
this.flashOnTimer = Date.now();
}
}
}
} else {
this.flashing = true;
this.flashTimer = Date.now();
this.flashOnTimer = Date.now();
this.flashOn = true;
}
}
} else {
this.flashOn = false;
}
if (this.collidesWithSolid) {
if (this.targetX < this.x) { //horizontal solid collision
if ( //left
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + 1) / tilesets.maptiles.tileWidth)][Math.floor(this.targetY / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid) &&
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + this.height - 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid)
) {
this.x = this.targetX;
} else {
this.x = Math.ceil(this.targetX / tilesets.maptiles.tileWidth) * tilesets.maptiles.tileWidth;
}
} else if (this.targetX > this.x) {
if ( //right
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + this.width - 1) / tilesets.maptiles.tileWidth)][Math.floor(this.targetY / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid) &&
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + this.width - 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + this.height - 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid)
) {
this.x = this.targetX;
} else {
this.x = Math.floor(this.targetX / tilesets.maptiles.tileWidth) * tilesets.maptiles.tileWidth + tilesets.maptiles.tileWidth - this.width;
}
}
if (this.targetY < this.y) { //vertical solid collision
if ( //up
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid) &&
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + this.width - 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid)
) {
this.y = this.targetY;
} else {
this.y = Math.ceil(this.targetY / tilesets.maptiles.tileHeight) * tilesets.maptiles.tileHeight;
}
} else if (this.targetY > this.y) {
if ( //down
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + this.height - 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid) &&
!eng.inArray(game.currentMap.code[Math.floor((this.targetX + this.width - 1) / tilesets.maptiles.tileWidth)][Math.floor((this.targetY + this.height - 1) / tilesets.maptiles.tileHeight)], tilesets.maptiles.solid)
) {
this.y = this.targetY;
} else {
this.y = Math.floor(this.targetY / tilesets.maptiles.tileHeight) * tilesets.maptiles.tileHeight + tilesets.maptiles.tileHeight - this.height;
}
}
}
if (typeof this.func != 'undefined') {
this.func(mod);
}
if (typeof this.collisions != 'undefined') {
this.collisions(mod);
}
if (this.health <= 0) { //dying
if (this.playerControlled) {
this.mapX = game.respawnPoint.mapX;
this.mapY = game.respawnPoint.mapY;
game.mapXPos = game.respawnPoint.mapX;
game.mapYPos = game.respawnPoint.mapY;
this.health = 5;
eng.updateMap();
this.x = game.respawnPoint.x;
this.y = game.respawnPoint.y;
this.targetX = game.respawnPoint.x;
this.targetY = game.respawnPoint.y;
if (typeof game.respawnPoint.func != 'undefined') {
game.respawnPoint.func();
}
} else {
if (typeof this.onDeath != 'undefined') {
this.onDeath(mod);
}
this.kill = true;
}
}
}
Sprite.prototype.draw = function() {
if (!this.flashOn) {
ctx.drawImage(
this.tileset.image,
this.states[this.currentState].split(',')[0] * this.tileset.tileWidth,
this.states[this.currentState].split(',')[1] * this.tileset.tileHeight,
this.tileset.tileWidth,
this.tileset.tileHeight,
Math.round(this.x),
Math.round(this.y),
this.width,
this.height
);
}
}
Sprite.prototype.bump = function(direction, distance) {
switch (direction) {
case 'left':
this.targetX = this.x - distance;
break;
case 'up':
this.targetY = this.y - distance;
break;
case 'right':
this.targetX = this.x + distance;
break;
case 'down':
this.targetY = this.y + distance;
break;
}
}
Sprite.prototype.bumpPlayer = function(direction, distance) {
switch (direction) {
case 'left':
sprites.player.targetX = sprites.player.x - distance;
break;
case 'up':
sprites.player.targetY = sprites.player.y - distance;
break;
case 'right':
sprites.player.targetX = sprites.player.x + distance;
break;
case 'down':
sprites.player.targetY = sprites.player.y + distance;
break;
}
sprites.player.beingBumped = true;
sprites.player.bumpTimer = Date.now();
}
Sprite.prototype.chasePlayer = function(mod) {
if (this.x + this.width < sprites.player.x) {
this.targetX = this.x + this.speed * mod;
if (typeof this.states['right'] != 'undefined') {
this.currentState = 'right';
}
} else if (this.x > sprites.player.x + sprites.player.width) {
this.targetX = this.x - this.speed * mod;
if (typeof this.states['left'] != 'undefined') {
this.currentState = 'left';
}
} else {
this.targetX = this.x;
}
if (this.y + this.height < sprites.player.y) {
this.targetY = this.y + this.speed * mod;
if (typeof this.states['down'] != 'undefined') {
this.currentState = 'down';
}
} else if (this.y > sprites.player.y + sprites.player.height) {
this.targetY = this.y - this.speed * mod;
if (typeof this.states['up'] != 'undefined') {
this.currentState = 'up';
}
} else {
this.targetY = this.y;
}
}
Sprite.prototype.fireAtPlayer = function(mod, def, interval, random, offset) {
if (typeof this.fireTimer == 'undefined') {
if (typeof offset == 'undefined') {
offset = 0;
}
this.fireTimer = Date.now() + offset;
if (random) {
this.multiplier = Math.random() + 0.5;
} else {
this.multiplier = 1;
}
} else {
if (Date.now() - this.fireTimer > interval * this.multiplier) {
game.uniqueCount ++;
sprites['projectile' + game.uniqueCount] = new Sprite(def, this.x + this.width / 2 - (def.tileset.tileWidth / 2), this.y + this.height / 2 - (def.tileset.tileHeight / 2), this.mapX, this.mapY, this.currentState,
function(mod) {
if (typeof this.xTraj == 'undefined') {
this.trajLength = Math.sqrt(Math.pow((sprites.player.x + sprites.player.width / 2 - def.tileset.tileWidth / 2 - this.x), 2) + Math.pow((sprites.player.y + sprites.player.height / 2 - def.tileset.tileHeight / 2 - this.y), 2));
this.xTraj = (sprites.player.x + sprites.player.width / 2 - this.x) / this.trajLength;
this.yTraj = (sprites.player.y + sprites.player.height / 2 - this.y) / this.trajLength;
} else {
this.x += this.xTraj * this.speed * mod;
this.y += this.yTraj * this.speed * mod;
}
},
function(mod) {
}
);
this.fireTimer = Date.now();
if (random) {
this.multiplier = Math.random();
}
}
}
}
Sprite.prototype.collides = function(colliderSprite, xOffset, yOffset) {
if (typeof colliderSprite != 'undefined') {
if (typeof xOffset == 'undefined') {
xOffset = 0;
}
if (typeof yOffset == 'undefined') {
yOffset = 0;
}
return this.x + xOffset < colliderSprite.x + colliderSprite.width &&
this.x + xOffset + this.width > colliderSprite.x &&
this.y + yOffset < colliderSprite.y + colliderSprite.height &&
this.y + yOffset + this.height > colliderSprite.y;
}
}
Sprite.prototype.collidesTile = function(tile) {
if (this.x + this.width > canvas.width && this.x < canvas.width) { //partially off map right
return game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.height) / tilesets.maptiles.tileHeight)] == tile;
} else if (this.y + this.height > canvas.height && this.y < canvas.height) { //partially off map bottom
return game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile;
} else if (this.x < 0 && this.x + this.width > 0) { //partially off map left
return game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.width) / tilesets.maptiles.tileHeight)] == tile;
} else if (this.y < 0 && this.y + this.height > 0) { //partially off map top
return game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.height) / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.height) / tilesets.maptiles.tileHeight)] == tile;
} else if (this.x > 0 && this.x + this.width < canvas.width && this.y > 0 && this.y + this.height < canvas.height) { //if totally in canvas
return game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor(this.y / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor(this.x / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.height) / tilesets.maptiles.tileHeight)] == tile ||
game.currentMap.code[Math.floor((this.x + this.width) / tilesets.maptiles.tileWidth)][Math.floor((this.y + this.height) / tilesets.maptiles.tileHeight)] == tile;
} else { //if totally off canvas
return false;
}
}
Sprite.prototype.oppositeDirection = function() {
switch (this.currentState) {
case 'up':
return 'down';
break;
case 'right':
return 'left';
break;
case 'down':
return 'up';
break;
case 'left':
return 'right';
break;
}
}
Sprite.prototype.pace = function(mod, direction, range) {
if (typeof this.startingX == 'undefined') {
this.startingX = this.x;
this.startingY = this.y;
}
switch (direction) {
case 'horizontal':
switch (this.currentState) {
case 'left':
if (this.startingX - this.x > range / 2) {
this.currentState = 'right';
}
break;
case 'right':
if (this.x - this.startingX > range / 2) {
this.currentState = 'left';
}
break;
}
break;
case 'vertical':
case 'up':
if (this.startingY - this.y > range / 2) {
this.currentState = 'down';
}
break;
case 'down':
if (this.y - this.startingY > range / 2) {
this.currentState = 'up';
}
break;
break;
}
switch (this.currentState) {
case 'left':
this.x -= this.speed * mod;
break;
case 'up':
this.y -= this.speed * mod;
break;
case 'right':
this.x += this.speed * mod;
break;
case 'down':
this.y += this.speed * mod;
break;
}
}
Sprite.prototype.moveTo = function(mod, x, y, callback) {
if (this.x == x && this.y == y) {
if (typeof callback != 'undefined') {
callback(mod);
}
} else {
if (this.x < x) {
this.targetX = Math.round(this.x + this.speed * mod);
if (this.targetX > x) this.targetX = x;
}
if (this.x > x) {
this.targetX = Math.round(this.x - this.speed * mod);
if (this.targetX < x) this.targetX = x;
}
if (this.y < y) {
this.targetY = Math.round(this.y + this.speed * mod);
if (this.targetY > y) this.targetY = y;
}
if (this.y > y) {
this.targetY = Math.round(this.y - this.speed * mod);
if (this.targetY < y) this.targetY = y;
}
}
}
function Map(code, onload, runFunction) {
this.code = code;
this.onload = onload;
this.runFunction = runFunction;
}
Map.prototype.draw = function() {
for (var x in this.code) {
for (var y in this.code[x]) {
ctx.drawImage(tilesets.maptiles.image, this.code[x][y].toString().split(',')[0] * tilesets.maptiles.tileWidth, this.code[x][y].toString().split(',')[1] * tilesets.maptiles.tileHeight, tilesets.maptiles.tileWidth, tilesets.maptiles.tileHeight, x * tilesets.maptiles.tileWidth, y * tilesets.maptiles.tileHeight, tilesets.maptiles.tileWidth, tilesets.maptiles.tileHeight);
}
}
}
Map.prototype.precip = function(type, intensity) {
switch (type) {
case 'rain':
if (typeof this.raindropCount == 'undefined') {
this.raindropCount = 0;
}
while (this.raindropCount < intensity) {
this.createRainDrop(Math.random() * canvas.width, Math.random() * canvas.height);
}
break;
case 'snow':
if (typeof this.snowflakeCount == 'undefined') {
this.snowflakeCount = 0;
}
while (this.snowflakeCount < intensity) {
this.createSnowFlake(Math.random() * canvas.width, Math.random() * canvas.height);
}
break;
case 'sand':
if (typeof this.sandgrainCount == 'undefined') {
this.sandgrainCount = 0;
}
while (this.sandgrainCount < intensity) {
this.createSandGrain(Math.random() * canvas.width, Math.random() * canvas.height);
}
break;
}
}
Map.prototype.createSnowFlake = function(x, y) {
sprites['snowflake' + game.uniqueCount] = new Sprite(spriteDefinitions.environment.snowflake, x, y, game.mapXPos, game.mapYPos, 'down',
function(mod) {
this.y += this.speed * mod;
},
function() {
game.currentMap.snowflakeCount --;
game.currentMap.createSnowFlake(Math.random() * canvas.width, 0);
}
);
game.uniqueCount ++;
this.snowflakeCount ++;
}
Map.prototype.createRainDrop = function(x, y) {
sprites['raindrop' + game.uniqueCount] = new Sprite(spriteDefinitions.environment.raindrop, x, y, game.mapXPos, game.mapYPos, 'down',
function(mod) {
this.y += this.speed * mod;
if (this.mapX != game.mapXPos || this.mapY != game.mapYPos) {
this.kill = true;
}
},
function() {
game.currentMap.raindropCount --;
game.currentMap.createRainDrop(Math.random() * canvas.width, 0);
}
);
game.uniqueCount ++;
this.raindropCount ++;
}
Map.prototype.createSandGrain = function(x, y) {
sprites['sandgrain' + game.uniqueCount] = new Sprite(spriteDefinitions.environment.sandgrain, x, y, game.mapXPos, game.mapYPos, 'right',
function(mod) {
this.x += this.speed * mod;
if (this.mapX != game.mapXPos || this.mapY != game.mapYPos) {
this.kill = true;
}
},
function() {
game.currentMap.sandgrainCount --;
game.currentMap.createSandGrain(0, Math.random() * canvas.height);
}
);
game.uniqueCount ++;
this.sandgrainCount ++;
}
Code: Select all
var spriteDefinitions = {
turtle: new SpriteDefinition(
tilesets.turtle,
{
right: '0,0',
left: '1,0',
up: '2,0',
down: '3,0'
},
300, //200?
5,
true,
true
),
chest: new SpriteDefinition(
tilesets.maptiles,
{
down: '3,0'
}
),
girlturtle: new SpriteDefinition(
tilesets.girlturtle,
{
right: '0,0',
left: '1,0',
up: '2,0',
down: '3,0'
},
375,
1,
false,
false
),
dragon: new SpriteDefinition(
tilesets.dragon,
{
right: '0,0',
left: '1,0',
dead: '2,0'
},
375,
40
),
hedgehog: new SpriteDefinition(
tilesets.hedgehog,
{
left: '0,0',
right: '1,0'
},
100
),
axe: new SpriteDefinition(
tilesets.axe,
{
up: '0,0',
right: '1,0',
down: '2,0',
left: '3,0'
}
),
ogre: new SpriteDefinition(
tilesets.ogre,
{
down: '0,0'
}
),
fireball: new SpriteDefinition(
tilesets.fireball,
{
left: '2,0',
up: '3,0',
right: '0,0',
down: '1,0'
},
1200,
1,
false,
false,
['projectile']
),
brownwizard: new SpriteDefinition(
tilesets.brownwizard,
{
left: '0,0',
right: '1,0'
},
100
),
lavasnail: new SpriteDefinition(
tilesets.lavasnail,
{
left: '0,0',
right: '1,0',
down: '2,0',
up: '3,0'
},
50,
2,
true,
false,
[],
function(mod) {
if (this.collides(sprites.player) && !sprites.player.invincible) {
this.bumpPlayer(this.currentState, 50);
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
}
if (this.collides(sprites.fireball)) {
if (this.speed < 200) {
this.speed += 25;
}
sprites.fireball.kill = true;
this.bump(sprites.fireball.currentState, 50);
this.invincible = true;
this.invincibleTimer = Date.now();
}
if (this.collides(sprites.axe)) {
this.health -= 1;
this.bump(sprites.axe.currentState, 50);
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.axe.kill = true;
}
}
),
torch: new SpriteDefinition(
tilesets.maptiles,
{
unlit: '2,4',
lit: '3,4'
},
0,
1,
false,
false,
[],
function(mod) {
if (this.collides(sprites.fireball)) {
this.currentState = 'lit';
}
}
),
lavaspitter: new SpriteDefinition(
tilesets.lavaspitter,
{
down: '0,0'
},
25,
3,
false,
false,
[],
function(mod) {
}
),
lavaspitterball: new SpriteDefinition(
tilesets.projectiles,
{
left: '0,0',
up: '0,0',
right: '0,0',
down: '0,0'
},
450,
1,
false,
false,
['projectile'],
function(mod) {
if (this.collides(sprites.player) && !sprites.player.invincible) {
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
this.kill = true;
}
if (this.mapX != game.mapXPos) {
this.kill = true;
}
}
),
lavasnake: new SpriteDefinition(
tilesets.lavasnake,
{
grey: '1,0',
left: '0,0',
up: '0,0',
right: '0,0',
down: '0,0'
},
100,
7,
true,
false,
[],
function(mod) {
}
),
lavasnakeminion: new SpriteDefinition(
tilesets.lavasnakeminion,
{
left: '0,0',
up: '0,0',
right: '0,0',
down: '0,0'
},
150,
1,
true,
false,
[],
function(mod) {
if (this.collides(sprites.axe)) {
this.health -= 1;
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.axe.kill = true;
}
if (this.collides(sprites.player)) {
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
this.bumpPlayer(sprites.player.oppositeDirection(), 50);
}
}
),
snowflake: new SpriteDefinition(
tilesets.projectiles,
{
left: '1,0',
up: '1,0',
right: '1,0',
down: '1,0'
},
1200,
1,
false,
false,
['projectile']
),
whale: new SpriteDefinition(
tilesets.whale,
{
left: '0,0'
},
50
),
environment: {
raindrop: new SpriteDefinition(
tilesets.projectiles,
{
down: '3,0'
},
300,
1,
false,
false,
['projectile', 'precip']
),
snowflake: new SpriteDefinition(
tilesets.projectiles,
{
down: '2,0'
},
75,
1,
false,
false,
['projectile', 'precip']
),
sandgrain: new SpriteDefinition(
tilesets.projectiles,
{
left: '5,0',
right: '5,0'
},
250,
1,
false,
false,
['projectile', 'precip']
)
},
purplespell: new SpriteDefinition(
tilesets.projectiles,
{
left: '4,0',
up: '4,0',
right: '4,0',
down: '4,0'
},
1200,
1,
false,
false,
['projectile']
),
portal: new SpriteDefinition(
tilesets.maptiles,
{
active: '4,5',
sand: '0,8'
},
1
),
smash: new SpriteDefinition(
tilesets.smash,
{
down: '0,0'
}
),
chicken: new SpriteDefinition(
tilesets.chicken,
{
left: '0,0',
right: '1,0'
},
50
),
brownchicken: new SpriteDefinition(
tilesets.chicken,
{
left: '2,0',
right: '3,0'
},
50
),
scorpion: new SpriteDefinition(
tilesets.scorpion,
{
left: '0,0',
right: '1,0'
},
75,
5,
true,
false,
[],
function(mod) {
if (this.collides(sprites.fireball)) {
this.health -= 2;
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.fireball.kill = true;
}
if (this.collides(sprites.snowflake)) {
this.health -= 1;
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.snowflake.kill = true;
}
if (this.collides(sprites.axe)) {
this.health -= 1;
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.axe.kill = true;
}
if (this.collides(sprites.player)) {
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
this.bumpPlayer(sprites.player.oppositeDirection(), 50);
}
}
),
poisonspit: new SpriteDefinition(
tilesets.projectiles,
{
left: '6,0',
up: '6,0',
right: '6,0',
down: '6,0'
},
400,
1,
false,
false,
['projectile'],
function(mod) {
if (this.collides(sprites.snowflake)) {
this.kill = true;
sprites.snowflake.kill = true;
}
if (this.collides(sprites.fireball)) {
this.kill = true;
sprites.fireball.kill = true;
}
if (this.collides(sprites.player) && !sprites.player.invincible) {
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
this.kill = true;
}
}
),
hammeritem: new SpriteDefinition(
tilesets.hammer,
{
up: '0,0'
},
1,
1,
false,
false,
[],
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('hammer');
eng.setMessage('Player got the hammer!');
}
}
),
hammer: new SpriteDefinition(
tilesets.hammer,
{
up: '0,0',
right: '1,0',
down: '2,0',
left: '3,0'
}
),
scorpionboss: new SpriteDefinition(
tilesets.scorpionboss,
{
left: '0,0',
right: '1,0'
},
200,
10,
false,
false,
[],
function(mod) {
if (this.collides(sprites.player) && !sprites.player.invincible) {
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
sprites.player.health -= 1;
}
if (this.collides(sprites.fireball) && !this.invincible) {
sprites.fireball.kill = true;
this.health -= 1;
this.invincible = true;
this.invincibleTimer = Date.now();
}
}
),
rock: new SpriteDefinition(
tilesets.rock,
{
left: '0,0',
up: '0,0',
right: '0,0',
down: '0,0'
},
80,
1,
false,
false,
['projectile'],
function(mod) {
if (typeof this.timer == 'undefined') {
this.timer = Date.now();
this.lifeSpan = Math.random() * 2000 + 1200;
}
if (Date.now() - this.timer > this.lifeSpan) {
this.kill = true;
var x = Math.round(this.x / tilesets.maptiles.tileWidth);
var y = Math.round(this.y / tilesets.maptiles.tileHeight);
if (x != 0 && x != 11 && y != 0 && y != 9 && game.currentMap.code[x][y] != '3,6') {
game.currentMap.code[x][y] = '0,6';
}
}
if (this.collides(sprites.player) && !sprites.player.invincible) {
this.kill = true;
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
}
if (this.collides(sprites.hammer)) {
this.kill = true;
sprites.hammer.kill = true;
}
if (this.collides(sprites.fireball)) {
sprites.fireball.kill = true;
}
}
),
dragontorch: new SpriteDefinition(
tilesets.maptiles,
{
unlit: '5,8',
lit: '7,8',
frozen: '6,8'
},
0,
1,
false,
false,
[],
function(mod) {
if (this.collides(sprites.fireball)) {
this.currentState = 'lit';
//this.timer = Date.now();
//this.timerSet = true;
}
//if (this.currentState == 'lit' && Date.now() - this.timer > 3000) {
// this.currentState = 'unlit';
//}
if (this.collides(sprites.snowflake)) {
this.currentState = 'frozen';
}
}
),
bigfireball: new SpriteDefinition(
tilesets.bigfireball,
{
left: '1,0',
right: '0,0'
},
100,
1,
false,
false,
['projectile'],
function(mod) {
this.speed += 250 * mod;
if (this.collides(sprites.snowflake)) {
sprites.snowflake.kill = true;
this.kill = true;
var x = Math.round(this.x / tilesets.maptiles.tileWidth);
var y = Math.round(this.y / tilesets.maptiles.tileHeight);
if (
x != 0 && x != 11 && y != 0 && y != 9 &&
game.currentMap.code[x][y] == '1,9'
) {
game.currentMap.code[x][y] = '2,11';
}
}
if (this.collides(sprites.player)) {
this.kill = true;
if (!sprites.player.invincible) {
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
sprites.player.health -= 1;
}
}
}
),
heart: new SpriteDefinition(
tilesets.heart,
{
normal: '5,0'
}
),
zombieturtle: new SpriteDefinition(
tilesets.zombieturtle,
{
right: '0,0',
left: '1,0',
shell: '2,0'
},
500,
5,
false,
false,
[],
function(mod) {
if (this.collides(sprites.fireball)) {
if (this.currentState != 'shell') {
this.revertState = this.currentState;
}
this.currentState = 'shell';
this.shellTimer = Date.now();
}
if (this.currentState == 'shell') {
if (Date.now() - this.shellTimer > 1000) {
this.currentState = this.revertState;
}
} else {
this.pace(mod, 'horizontal', 200);
}
if (this.collides(sprites.player) && this.currentState != 'shell' && !sprites.player.invincible) {
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
}
}
)
}
Last edited by Oroton on Sat Jan 30, 2016 1:54 pm, edited 1 time in total.
Re: How to animate sprite
sprites.js
Code: Select all
var sprites = {
player: new Sprite(spriteDefinitions.turtle, 128, 128, 0, 0, 'down',
function(mod) {
}
),
chest1: new Sprite(spriteDefinitions.chest, 512, 320, 0, 1, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('fireball');
eng.setMessage('Player got the fireball spell! Press X to switch between items.');
}
}
),
girlturtle: new Sprite(spriteDefinitions.girlturtle, 448, 256, 0, 2, 'left',
function(mod) {
if (this.collides(sprites.dragon, 64)) {
this.x += this.speed * mod;
}
}
),
dragon: new Sprite(spriteDefinitions.dragon, 0, 200, 0, 2, 'right',
function(mod) {
this.x += this.speed * mod;
}
),
hedgehog: new Sprite(spriteDefinitions.hedgehog, 640, 256, 1, 2, 'left',
function(mod) {
if (this.collides(sprites.player) && game.plotSequence == 2 && eng.keysDown[32] && game.message == '') {
eng.setMessage('Did you see that giant red beast in the sky? It was the evil dragon Algernon. He must be heading back east to his lair in the Chasm of Nightmares.');
delete eng.keysDown[32];
}
}
),
axeItem: new Sprite(spriteDefinitions.axe, 512, 256, 2, 2, 'up',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
sprites.player.inventory.push('axe');
game.selectedItem = 0;
this.kill = true;
eng.setMessage('Axe added to inventory. Press Z to use.');
}
}
),
ogre: new Sprite(spriteDefinitions.ogre, 640, 256, 3, 2, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
if (game.plotSequence == 2) {
eng.setMessage('My camp fire out... Grugga sad...');
} else if (game.plotSequence == 3) {
eng.setMessage('Funny lizard fix Grugga\'s camp fire! Grugga happy! Grugga smash these rocks for funny lizard.');
game.currentMap.code[11][5] = '7,0';
game.currentMap.code[11][6] = '7,0';
game.plotSequence = 4;
}
}
}
),
brownwizard: new Sprite(spriteDefinitions.brownwizard, 448, 384, 4, 2, 'left',
function(mod) {
if (this.collides(sprites.player)) {
eng.setMessage('What is a young turtle like yourself doing way out here? It\'s dangerous. Take this. Good luck, I must go! ... Player got a heart!');
this.kill = true;
sprites.player.hasHeart = true;
}
}
),
lavasnail1: new Sprite(spriteDefinitions.lavasnail, 384, 320, 5, 2, 'left',
function(mod) {
this.chasePlayer(mod);
}
),
chest2: new Sprite(spriteDefinitions.chest, 512, 128, 7, 2, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('potion');
eng.setMessage('Player got a health potion!');
}
}
),
dungeon1: {
torch1: new Sprite(spriteDefinitions.torch, 64, 512, 6, 4, 'unlit'),
torch2: new Sprite(spriteDefinitions.torch, 640, 512, 6, 4, 'unlit',
function(mod) {
if (this.currentState == 'lit' && sprites.dungeon1.torch1.currentState == 'lit' && maps[6][4].code[5][9] != '1,3') {
maps[6][4].code[5][9] = '1,3'; //open doors
maps[6][4].code[6][9] = '1,3';
eng.updateMap();
game.respawnPoint = {
x: 352,
y: 256,
mapX: 6,
mapY: 4,
}
}
}
),
snail1: new Sprite(spriteDefinitions.lavasnail, 576, 256, 6, 5, 'left',
function(mod) {
this.chasePlayer(mod);
},
function(mod) {
game.dungeon1.snailsKilled ++;
if (game.dungeon1.snailsKilled == 2) {
maps[6][5].code[5][9] = '1,3';
maps[6][5].code[6][9] = '1,3';
eng.updateMap();
}
}
),
snail2: new Sprite(spriteDefinitions.lavasnail, 128, 256, 6, 5, 'right',
function(mod) {
this.chasePlayer(mod);
},
function(mod) {
game.dungeon1.snailsKilled ++;
if (game.dungeon1.snailsKilled == 2) {
maps[6][5].code[5][9] = '1,3';
maps[6][5].code[6][9] = '1,3';
eng.updateMap();
}
}
),
lavasnakeminion1: new Sprite(spriteDefinitions.lavasnakeminion, 64, 512, 6, 6, 'down',
function(mod) {
this.fireAtPlayer(mod, spriteDefinitions.lavaspitterball, 1500);
}
),
snail3: new Sprite(spriteDefinitions.lavasnail, 576, 256, 6, 7, 'left',
function(mod) {
this.chasePlayer(mod);
},
function(mod) {
game.dungeon1.snailsKilled ++;
if (game.dungeon1.snailsKilled == 4) {
maps[6][7].code[11][4] = '1,3';
maps[6][7].code[11][5] = '1,3';
}
}
),
snail4: new Sprite(spriteDefinitions.lavasnail, 128, 256, 6, 7, 'right',
function(mod) {
this.chasePlayer(mod);
},
function(mod) {
game.dungeon1.snailsKilled ++;
if (game.dungeon1.snailsKilled == 4) {
maps[6][7].code[11][4] = '1,3';
maps[6][7].code[11][5] = '1,3';
}
}
),
torch3: new Sprite(spriteDefinitions.torch, 384, 256, 7, 7, 'unlit',
function(mod) {
if (this.currentState == 'lit' && !game.dungeon1.chest1Opened) {
sprites.dungeon1['chest1'] = new Sprite(spriteDefinitions.chest, 320, 256, 7, 7, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('potion');
eng.setMessage('Player got a health potion!');
game.dungeon1.chest1Opened = true;
}
}
);
}
}
),
lavasnakeboss: new Sprite(spriteDefinitions.lavasnake, 336, 128, 7, 6, 'grey',
function(mod) {
if (this.currentState == 'grey' && this.collides(sprites.fireball)) {
this.currentState = 'down';
this.chaseTimer = Date.now();
this.spawnTimer = Date.now();
sprites.fireball.kill = true;
}
if (this.currentState != 'grey') {
if (Date.now() - this.chaseTimer < 5000) {
this.chasePlayer(mod);
} else {
this.currentState = 'grey';
}
if (this.collides(sprites.player) && !sprites.player.invincible) {
this.bumpPlayer(this.currentState, 50);
sprites.player.health -= 1;
sprites.player.invincible = true;
sprites.player.invincibleTimer = Date.now();
if (sprites.player.health <= 0) {
this.health = 7;
}
}
if (Date.now() - this.spawnTimer > 3000) {
game.uniqueCount ++;
sprites['lavasnakeminion' + game.uniqueCount] = new Sprite(spriteDefinitions.lavasnakeminion, this.x, this.y, 7, 6, 'down',
function(mod) {
this.fireAtPlayer(mod, spriteDefinitions.lavaspitterball, 4000);
}
);
this.spawnTimer = Date.now();
}
if (this.collides(sprites.axe)) {
this.health -= 1;
this.invincible = true;
this.invincibleTimer = Date.now();
sprites.axe.kill = true;
}
}
},
function(mod) {
sprites.dungeon1['chest2'] = new Sprite(spriteDefinitions.chest, this.x, this.y, 7, 6, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('key');
eng.setMessage('Player got a key!');
game.dungeon1.chest2Opened = true;
}
}
);
game.respawnPoint = {
x: 128,
y: 128,
mapX: 0,
mapY: 0
};
delete sprites.dungeon1.lavasnakeminion1;
}
),
chest3: new Sprite(spriteDefinitions.chest, 128, 64, 5, 5, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32] ) {
if (sprites.player.inventory[game.selectedItem] == 'key') {
this.kill = true;
sprites.player.inventory.push('icewand');
eng.setMessage('Player got the Ice Wand!');
game.dungeon1.chest3Opened = true;
eng.deleteFromInv('key', 1);
} else {
eng.setMessage('It\'s locked...');
}
}
}
)
},
whale: new Sprite(spriteDefinitions.whale, 290, 290, 2, 7, 'left',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32] && game.message == '') {
eng.setMessage('Please help me... *wheez*');
}
if (!this.collidesTile('4,4') && !this.free) {
eng.setMessage('Thank you turtle. Please, take this. Player got the map!');
sprites.player.inventory.push('map');
this.free = true;
}
if (this.free) {
this.x -= this.speed * mod;
}
}
),
brownwizard2: new Sprite(spriteDefinitions.brownwizard, 384, 320, 4, 1, 'left',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32] && game.message == '') {
eng.setMessage('In order to defeat Algernon you will need fire proof armor. Such armor can only be smithed by an ogre named Smash who lives in the far south. I will teleport you there to help your cause.');
sprites.purplespell = new Sprite(spriteDefinitions.purplespell, this.x, this.y, 4, 1, 'left',
function(mod) {
if (typeof this.distanceTravelled == 'undefined') {
this.distanceTravelled = 0;
}
if (this.distanceTravelled >= 256) {
this.kill = true;
sprites.portal = new Sprite(spriteDefinitions.portal, 128, 300, 4, 1, 'active',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
sprites.player.mapX = 0;
sprites.player.mapY = 12;
sprites.player.x = 256;
sprites.player.y = 320;
game.mapXPos = 0;
game.mapYPos = 12;
eng.updateMap();
game.respawnPoint = {
x: 256,
y: 320,
mapX: 0,
mapY: 12
}
delete eng.keysDown[32];
}
}
)
} else {
this.x -= this.speed * mod;
this.distanceTravelled += this.speed * mod;
}
}
);
this.kill = true;
}
}
),
smash: new Sprite(spriteDefinitions.smash, 384, 320, 1, 12, 'down',
function(mod) {
if (typeof this.message == 'undefined') {
this.message = 'What? You want armor? Smash not making any armor till his favorite chicken comes back.';
}
if (this.collides(sprites.player) && eng.keysDown[32]) {
eng.setMessage(this.message);
}
}
),
chickens: {
1: new Sprite(spriteDefinitions.chicken, 192, 192, 1, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 75);
}
),
2: new Sprite(spriteDefinitions.chicken, 576, 320, 1, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 60);
}
),
3: new Sprite(spriteDefinitions.chicken, 192, 512, 1, 12, 'right',
function(mod) {
this.pace(mod, 'horizontal', 100);
}
),
4: new Sprite(spriteDefinitions.chicken, 448, 192, 1, 12, 'right',
function(mod) {
this.pace(mod, 'horizontal', 120);
}
),
5: new Sprite(spriteDefinitions.chicken, 80, 320, 1, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 80);
}
),
6: new Sprite(spriteDefinitions.chicken, 448, 448, 1, 12, 'right',
function(mod) {
this.pace(mod, 'horizontal', 60);
}
)
},
scorpions: {
1: new Sprite(spriteDefinitions.scorpion, 279, 389, 2, 11, 'left',
function(mod) {
this.pace(mod, 'horizontal', 50);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500);
}
),
2: new Sprite(spriteDefinitions.scorpion, 256, 192, 3, 11, 'left',
function(mod) {
this.pace(mod, 'horizontal', 200);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500);
}
),
3: new Sprite(spriteDefinitions.scorpion, 448, 384, 3, 11, 'left',
function(mod) {
this.pace(mod, 'horizontal', 200);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500, false, 1250);
}
),
4: new Sprite(spriteDefinitions.scorpion, 256, 320, 4, 11, 'left',
function(mod) {
this.pace(mod, 'horizontal', 400);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500, false, 1250);
}
),
5: new Sprite(spriteDefinitions.scorpion, 320, 512, 4, 11, 'left',
function(mod) {
this.pace(mod, 'horizontal', 350);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500);
}
),
6: new Sprite(spriteDefinitions.scorpion, 128, 128, 4, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 200);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500);
}
),
7: new Sprite(spriteDefinitions.scorpion, 320, 256, 3, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 200);
this.fireAtPlayer(mod, spriteDefinitions.poisonspit, 2500);
}
)
},
scorpionboss: new Sprite(spriteDefinitions.scorpionboss, 320, 458, 5, 12, 'left',
function(mod) {
this.pace(mod, 'horizontal', 400);
this.fireAtPlayer(mod, spriteDefinitions.rock, 1500);
},
function(mod) {
sprites.brownchicken = new Sprite(spriteDefinitions.brownchicken, this.x, this.y, 5, 12, this.currentState,
function(mod) {
this.pace(mod, 'horizontal', 50);
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('chicken');
eng.setMessage('Player got the chicken!');
}
}
);
}
),
portal2: new Sprite(spriteDefinitions.portal, 256, 320, 0, 12, 'sand',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
sprites.player.mapX = 4;
sprites.player.mapY = 1;
sprites.player.x = 128;
sprites.player.y = 300;
game.mapXPos = 4;
game.mapYPos = 1;
eng.updateMap();
game.respawnPoint = {
x: 128,
y: 128,
mapX: 0,
mapY: 0
}
delete eng.keysDown[32];
}
}
),
finaldungeon: {
torches: {
torch1: new Sprite(spriteDefinitions.dragontorch, 128, 128, 10, 1, 'unlit',
function(mod) {
}
),
torch2: new Sprite(spriteDefinitions.dragontorch, 128, 448, 10, 1, 'unlit',
function(mod) {
}
),
torch3: new Sprite(spriteDefinitions.dragontorch, 576, 128, 10, 1, 'unlit',
function(mod) {
}
),
torch4: new Sprite(spriteDefinitions.dragontorch, 576, 448, 10, 1, 'unlit',
function(mod) {
}
),
torch5: new Sprite(spriteDefinitions.dragontorch, 64, 192, 9, 2, 'unlit', //left lava
function(mod) {
}
),
torch6: new Sprite(spriteDefinitions.dragontorch, 640, 384, 11, 2, 'unlit', //right lava
function(mod) {
}
),
torch7: new Sprite(spriteDefinitions.dragontorch, 64, 64, 10, 3, 'unlit', //blue
function(mod) {
}
),
torch8: new Sprite(spriteDefinitions.dragontorch, 640, 64, 10, 3, 'unlit', //blue
function(mod) {
}
),
torch9: new Sprite(spriteDefinitions.dragontorch, 64, 512, 10, 3, 'unlit', //red
function(mod) {
}
),
torch10: new Sprite(spriteDefinitions.dragontorch, 640, 512, 10, 3, 'unlit', //red
function(mod) {
}
)
},
chest: new Sprite(spriteDefinitions.chest, 128, 128, 10, 4, 'down',
function(mod) {
if (this.collides(sprites.player) && eng.keysDown[32]) {
this.kill = true;
sprites.player.inventory.push('potion');
eng.setMessage('Player got a potion!');
}
}
),
girlturtle2: new Sprite(spriteDefinitions.girlturtle, 576, 128, 10, 4, 'left',
function(mod) {
if (sprites.player.y > this.y + this.height) {
this.currentState = 'down';
} else {
this.currentState = 'left';
}
}
),
zombieturtle1: new Sprite(spriteDefinitions.zombieturtle, 350, 423, 9, 1, 'left'),
zombieturtle2: new Sprite(spriteDefinitions.zombieturtle, 380, 423, 11, 1, 'left'),
}
}
sprites.player.hasHeart = false; //false
sprites.player.inventory = []; //empty