Commit e955fcd0 authored by Matthew Odle's avatar Matthew Odle Committed by Matthew Odle

improve image loading

parent 5b10cc84
...@@ -14,9 +14,19 @@ function Component(args) { ...@@ -14,9 +14,19 @@ function Component(args) {
if (args.fontSize) { if (args.fontSize) {
this.fontSize = args.fontSize; this.fontSize = args.fontSize;
}; };
if (args.constructorFunctions) {
Object.keys(args.constructorFunctions)
.forEach(theFunction => args.constructorFunctions[theFunction](this));
};
this.loadImages = function(images) {
if (!images) {return;};
Object.keys(images).forEach(key => images[key].image.src = knobsAndLevers.mediaPath + images[key].filename);
};
this.name = args.name;
if (args.extraArgs) { if (args.extraArgs) {
this.type = args.extraArgs.type; this.type = args.extraArgs.type;
this.image = new Image(); this.images = args.extraArgs.images;
this.loadImages(this.images);
if (args.extraArgs.speed) { if (args.extraArgs.speed) {
this.speedX = args.extraArgs.speed.x; this.speedX = args.extraArgs.speed.x;
this.speedY = args.extraArgs.speed.y; this.speedY = args.extraArgs.speed.y;
...@@ -32,7 +42,7 @@ function Component(args) { ...@@ -32,7 +42,7 @@ function Component(args) {
this.makeText(ctx); this.makeText(ctx);
} else if (['background', 'laser'].includes(this.type)) { } else if (['background', 'laser'].includes(this.type)) {
this.makeARectangle(ctx); this.makeARectangle(ctx);
} else { } else if (knobsAndLevers.components.imageTypes.includes(this.type)) {
customComponents.drawComponent(ctx, this); customComponents.drawComponent(ctx, this);
}; };
}; };
...@@ -112,20 +122,19 @@ function Component(args) { ...@@ -112,20 +122,19 @@ function Component(args) {
var customComponents = { var customComponents = {
drawComponent : function(ctx, obj) { drawComponent : function(ctx, obj) {
let filename = this.imageFileNameGenerator[obj.type](obj); let key = this.imageKeys[obj.type](obj);
if (!filename) { if (!obj.images) {
throw 'filename error when drawing component'; throw 'images is ' + obj.images;
}; };
obj.image.src = knobsAndLevers.mediaPath + filename + '.png'; ctx.drawImage(obj.images[key].image, obj.x, obj.y, obj.width, obj.height);
ctx.drawImage(obj.image, obj.x, obj.y, obj.width, obj.height);
}, },
imageFileNameGenerator : { imageKeys : {
'centipede' : function(obj) {return 'centipede-head-1-' + customComponents.getCentipedeDirection(obj);}, 'centipede' : function(obj) {return customComponents.getCentipedeDirection(obj);},
'player' : function(obj) {return obj.name ? obj.name : 'player1';}, 'player' : function(obj) {return obj.name ? obj.name : 'player1';},
'spider' : function(obj) {return 'spider-1';}, 'spider' : function(obj) {return 'one';},
'mushroom' : function(obj) {return 'mushroom-' + (obj.poisoned ? 'poisoned-' : '') + obj.hitPoints;}, 'mushroom' : function(obj) {return (obj.poisoned ? 'poisoned' : 'normal') + obj.hitPoints;},
'worm' : function(obj) {return obj.speedX > 0 ? 'worm-2' : 'worm-1';}, 'worm' : function(obj) {return obj.speedX > 0 ? 'two' : 'one';},
'fly' : function(obj) {return 'flea-1';}, 'fly' : function(obj) {return 'one';},
}, },
getCentipedeDirection : function(obj) { getCentipedeDirection : function(obj) {
let direction = ''; let direction = '';
......
...@@ -132,7 +132,6 @@ var centipedes = { ...@@ -132,7 +132,6 @@ var centipedes = {
let theMushroom = this.getTheMushroom(centipede); let theMushroom = this.getTheMushroom(centipede);
if (theMushroom && theMushroom.poisoned) { if (theMushroom && theMushroom.poisoned) {
centipede.poisoned = true; centipede.poisoned = true;
console.log('poisoned mushroom');
}; };
return theMushroom; return theMushroom;
}, },
......
...@@ -33,7 +33,6 @@ var intervalCreatures = { ...@@ -33,7 +33,6 @@ var intervalCreatures = {
if (this[creature].length >= knobsAndLevers[creature].maxNumber) { if (this[creature].length >= knobsAndLevers[creature].maxNumber) {
return; return;
}; };
this.executeConstructorFunctions(creature);
this.make(creature); this.make(creature);
}, },
setMax : function(creature) { setMax : function(creature) {
...@@ -47,13 +46,6 @@ var intervalCreatures = { ...@@ -47,13 +46,6 @@ var intervalCreatures = {
spawnedCreature.hitPoints = knobsAndLevers[creature].hitPoints; spawnedCreature.hitPoints = knobsAndLevers[creature].hitPoints;
this[creature].push(spawnedCreature); this[creature].push(spawnedCreature);
}, },
executeConstructorFunctions : function(creature) {
let args = knobsAndLevers[creature].args;
if (args.constructorFunctions) {
Array.from(Object.keys(args.constructorFunctions))
.forEach(theFunction => args.constructorFunctions[theFunction]());
};
},
clearOutsideCanvas : function(creature) { clearOutsideCanvas : function(creature) {
if (this[creature] == false) { return; }; if (this[creature] == false) { return; };
return this[creature].filter(target => { return this[creature].filter(target => {
......
...@@ -42,15 +42,9 @@ var mushrooms = { ...@@ -42,15 +42,9 @@ var mushrooms = {
return Object.keys(players.players).find(key => players.players[key].crashWith(mushroom)); return Object.keys(players.players).find(key => players.players[key].crashWith(mushroom));
}, },
generate : function(coordinates, color) { generate : function(coordinates, color) {
let mushroomArgs = { let mushroom = new Component(knobsAndLevers.mushrooms.args);
width: knobsAndLevers.mushrooms.side, mushroom.x = coordinates.x + knobsAndLevers.mushrooms.scaleFactor,
height : knobsAndLevers.mushrooms.side, mushroom.y = coordinates.y + knobsAndLevers.mushrooms.scaleFactor,
color : color,
x : coordinates.x + knobsAndLevers.mushrooms.scaleFactor,
y : coordinates.y + knobsAndLevers.mushrooms.scaleFactor,
extraArgs : {type : "mushroom"}
};
mushroom = new Component(mushroomArgs);
mushroom.pointValue = metrics.currentLevel; mushroom.pointValue = metrics.currentLevel;
mushroom.hitPoints = knobsAndLevers.mushrooms.hitPoints; mushroom.hitPoints = knobsAndLevers.mushrooms.hitPoints;
return mushroom; return mushroom;
......
...@@ -29,24 +29,13 @@ var players = { ...@@ -29,24 +29,13 @@ var players = {
died : false, died : false,
init : function() { init : function() {
while (Object.keys(this.players).length < game.numberOfPlayers) { while (Object.keys(this.players).length < game.numberOfPlayers) {
let player = new Component(this.getPlayerArgs()); let player = new Component(knobsAndLevers.player.args);
player.name = 'player' + (Object.keys(this.players).length + 1); player.name = 'player' + (Object.keys(this.players).length + 1);
player.eligibleDirections = supporting.clone(playerConstants.eligibleDirections); player.eligibleDirections = supporting.clone(playerConstants.eligibleDirections);
this.players[player.name] = player; this.players[player.name] = player;
}; };
console.log('players initialized', this.players); console.log('players initialized', this.players);
}, },
getPlayerArgs : function() {
let defaults = knobsAndLevers.player;
return {
width: defaults.dimensions.width,
height : defaults.dimensions.height,
color : defaults.colors[Object.keys(this.players).length],
x : defaults.startX[Object.keys(this.players).length],
y : defaults.startY,
extraArgs : {type : "player", speed : {x : 0, y : 0}}
};
},
manage : function() { manage : function() {
Object.keys(this.players).forEach(key => { Object.keys(this.players).forEach(key => {
let player = this.players[key]; let player = this.players[key];
......
...@@ -6,7 +6,7 @@ var templates = { ...@@ -6,7 +6,7 @@ var templates = {
this.baseMarkerParams = { this.baseMarkerParams = {
width : 15, width : 15,
height : 15, height : 15,
extraArgs : {type : 'player'}, extraArgs : {type : 'player', images : knobsAndLevers.player.args.extraArgs.images},
}; };
this.marker = new Component( this.marker = new Component(
Object.assign(this.baseMarkerParams, { Object.assign(this.baseMarkerParams, {
......
var knobsAndLevers = { var knobsAndLevers = {
init : function() { init : function() {
this.general.init(this); this.general.init(this);
...@@ -44,7 +46,15 @@ var knobsAndLevers = { ...@@ -44,7 +46,15 @@ var knobsAndLevers = {
args : { args : {
color : "blue", color : "blue",
y : 0, y : 0,
extraArgs : {type : "centipede"}, extraArgs : {
type : "centipede",
images : {
up : { filename : 'centipede-head-1-up.png', image : new Image() },
down : { filename : 'centipede-head-1-down.png', image : new Image() },
left : { filename : 'centipede-head-1-left.png', image : new Image() },
right : { filename : 'centipede-head-1-right.png', image : new Image() },
},
},
}, },
init : function(configs) { init : function(configs) {
this.args.width = configs.general.gridSquareSideLength; this.args.width = configs.general.gridSquareSideLength;
...@@ -52,6 +62,9 @@ var knobsAndLevers = { ...@@ -52,6 +62,9 @@ var knobsAndLevers = {
this.args.x = configs.canvas.width / 2; this.args.x = configs.canvas.width / 2;
}, },
}, },
components : {
imageTypes : ['centipede', 'fly', 'worm', 'mushroom', 'spider', 'player'],
},
flies : { flies : {
maxNumber : 0, maxNumber : 0,
hitPoints : 2, hitPoints : 2,
...@@ -62,10 +75,17 @@ var knobsAndLevers = { ...@@ -62,10 +75,17 @@ var knobsAndLevers = {
}, },
mushroomCreateInterval : 100, mushroomCreateInterval : 100,
args : { args : {
color : "green", color : 'green',
extraArgs : {type : "fly", speed : {x : 0, y : 2}}, extraArgs : {
type : 'fly',
speed : {x : 0, y : 2},
images : {
one : { filename : 'flea-1.png', image : new Image() },
two : { filename : 'flea-2.png', image : new Image() },
},
},
constructorFunctions : { constructorFunctions : {
setX : function() { knobsAndLevers.flies.args.x = supporting.getRandom(0, knobsAndLevers.canvas.width) }, setX : function(fly) { fly.x = supporting.getRandom(0, knobsAndLevers.canvas.width) },
} }
}, },
init : function(configs) { init : function(configs) {
...@@ -148,16 +168,48 @@ var knobsAndLevers = { ...@@ -148,16 +168,48 @@ var knobsAndLevers = {
hitPoints : 4, hitPoints : 4,
side : 0, side : 0,
color : 'teal', color : 'teal',
args : {
extraArgs : {
type : 'mushroom',
images : {
normal1 : { filename : 'mushroom-1.png', image : new Image() },
normal2 : { filename : 'mushroom-2.png', image : new Image() },
normal3 : { filename : 'mushroom-3.png', image : new Image() },
normal4 : { filename : 'mushroom-4.png', image : new Image() },
poisoned1 : { filename : 'mushroom-poisoned-1.png', image : new Image() },
poisoned2 : { filename : 'mushroom-poisoned-2.png', image : new Image() },
poisoned3 : { filename : 'mushroom-poisoned-3.png', image : new Image() },
poisoned4 : { filename : 'mushroom-poisoned-4.png', image : new Image() },
},
},
},
init : function(configs) { init : function(configs) {
this.scaleFactor = configs.general.gridSquareSideLength * 0.1; this.scaleFactor = configs.general.gridSquareSideLength * 0.1;
this.side = configs.general.gridSquareSideLength * 0.8; this.args.width = configs.general.gridSquareSideLength * 0.8;
this.args.height = configs.general.gridSquareSideLength * 0.8;
}, },
}, },
player : { player : {
colors : ['red', 'purple'], colors : ['red', 'purple'],
defaultLives : 3, defaultLives : 3,
dimensions : {width : 30, height : 30}, dimensions : {width : 30, height : 30},
extraArgs : {type : "player"}, args : {
width : 30,
height : 30,
extraArgs : {
type : 'player',
speed : {x : 0, y : 0},
images : {
player1 : { filename : 'player1.png', image : new Image() },
player2 : { filename : 'player2.png', image : new Image() },
},
},
constructorFunctions : {
setX : function(player) {
player.x = knobsAndLevers.player.startX[Object.keys(players.players).length];
},
},
},
init : function(configs) { init : function(configs) {
this.areaHeight = configs.canvas.height * 0.2; this.areaHeight = configs.canvas.height * 0.2;
this.topLimit = knobsAndLevers.canvas.height - this.areaHeight; this.topLimit = knobsAndLevers.canvas.height - this.areaHeight;
...@@ -166,6 +218,7 @@ var knobsAndLevers = { ...@@ -166,6 +218,7 @@ var knobsAndLevers = {
(configs.canvas.width + this.dimensions.width * 2) * 0.5, (configs.canvas.width + this.dimensions.width * 2) * 0.5,
], ],
this.startY = configs.canvas.height - this.dimensions.height - 1; this.startY = configs.canvas.height - this.dimensions.height - 1;
this.args.y = this.startY;
}, },
speed : { speed : {
value : 2, value : 2,
...@@ -197,7 +250,14 @@ var knobsAndLevers = { ...@@ -197,7 +250,14 @@ var knobsAndLevers = {
}, },
args : { args : {
color : "fuchsia", color : "fuchsia",
extraArgs : {type : "spider", speed : {x : 1, y : 1}}, extraArgs : {
type : "spider",
speed : {x : 1, y : 1},
images : {
one : { filename : 'spider-1.png', image : new Image() },
two : { filename : 'spider-2.png', image : new Image() },
},
},
}, },
speedLimits : { speedLimits : {
min : 0.01, min : 0.01,
...@@ -240,21 +300,28 @@ var knobsAndLevers = { ...@@ -240,21 +300,28 @@ var knobsAndLevers = {
}, },
args : { args : {
color : "orange", color : "orange",
extraArgs : {type : "worm", speed : {x : 0.5, y : 0}}, extraArgs : {
type : "worm",
speed : {x : 0.5, y : 0},
images : {
one : { filename : 'worm-1.png', image : new Image() },
two : { filename : 'worm-2.png', image : new Image() },
},
},
constructorFunctions : { constructorFunctions : {
setX : function() { setX : function(worm) {
knobsAndLevers.worms.args.extraArgs.speed.x = supporting.getRandom(-1, 1) < 0 ? -1 : 1; worm.speedX = supporting.getRandom(-1, 1) < 0 ? -1 : 1;
if (knobsAndLevers.worms.args.extraArgs.speed.x < 0) { if (worm.speedX < 0) {
knobsAndLevers.worms.args.x = game.gameArea.canvas.width - 1; worm.x = game.gameArea.canvas.width - 1;
} else { } else {
knobsAndLevers.worms.args.x = 1 - knobsAndLevers.worms.args.width; worm.x = 1 - worm.width;
}; };
}, },
setY : function() { setY : function(worm) {
let randomYPos = supporting.getRandom(0, knobsAndLevers.player.topLimit - knobsAndLevers.player.areaHeight); let randomYPos = supporting.getRandom(0, knobsAndLevers.player.topLimit - knobsAndLevers.player.areaHeight);
knobsAndLevers.worms.args.y = supporting.getClosest(game.gameArea.yVertices, randomYPos); worm.y = supporting.getClosest(game.gameArea.yVertices, randomYPos);
}, },
} },
}, },
init : function(configs) { init : function(configs) {
this.initialInterval = supporting.getRandom(this.interval.min, this.interval.max); this.initialInterval = supporting.getRandom(this.interval.min, this.interval.max);
......
/*jslint white: true */ /*jslint white: true */
var script = document.createElement('script');
script.src = 'https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);
var main = { var main = {
framesToWaitToPauseAgain : 0, framesToWaitToPauseAgain : 0,
updateGameState : function() { updateGameState : function() {
// this gets executed every interval
main.updateGamepad(); main.updateGamepad();
if (!game.running) { if (!game.running) {
game.gameArea.loadBackground(); game.gameArea.loadBackground();
......
...@@ -47,3 +47,9 @@ canvas { ...@@ -47,3 +47,9 @@ canvas {
font-family: "Press Start"; font-family: "Press Start";
src: url("css/fonts/prstart.ttf"); src: url("css/fonts/prstart.ttf");
} }
#stats {
position: fixed;
bottom: 0;
left : 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment