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) {
if (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) {
this.type = args.extraArgs.type;
this.image = new Image();
this.images = args.extraArgs.images;
this.loadImages(this.images);
if (args.extraArgs.speed) {
this.speedX = args.extraArgs.speed.x;
this.speedY = args.extraArgs.speed.y;
......@@ -32,7 +42,7 @@ function Component(args) {
this.makeText(ctx);
} else if (['background', 'laser'].includes(this.type)) {
this.makeARectangle(ctx);
} else {
} else if (knobsAndLevers.components.imageTypes.includes(this.type)) {
customComponents.drawComponent(ctx, this);
};
};
......@@ -112,20 +122,19 @@ function Component(args) {
var customComponents = {
drawComponent : function(ctx, obj) {
let filename = this.imageFileNameGenerator[obj.type](obj);
if (!filename) {
throw 'filename error when drawing component';
let key = this.imageKeys[obj.type](obj);
if (!obj.images) {
throw 'images is ' + obj.images;
};
obj.image.src = knobsAndLevers.mediaPath + filename + '.png';
ctx.drawImage(obj.image, obj.x, obj.y, obj.width, obj.height);
ctx.drawImage(obj.images[key].image, obj.x, obj.y, obj.width, obj.height);
},
imageFileNameGenerator : {
'centipede' : function(obj) {return 'centipede-head-1-' + customComponents.getCentipedeDirection(obj);},
imageKeys : {
'centipede' : function(obj) {return customComponents.getCentipedeDirection(obj);},
'player' : function(obj) {return obj.name ? obj.name : 'player1';},
'spider' : function(obj) {return 'spider-1';},
'mushroom' : function(obj) {return 'mushroom-' + (obj.poisoned ? 'poisoned-' : '') + obj.hitPoints;},
'worm' : function(obj) {return obj.speedX > 0 ? 'worm-2' : 'worm-1';},
'fly' : function(obj) {return 'flea-1';},
'spider' : function(obj) {return 'one';},
'mushroom' : function(obj) {return (obj.poisoned ? 'poisoned' : 'normal') + obj.hitPoints;},
'worm' : function(obj) {return obj.speedX > 0 ? 'two' : 'one';},
'fly' : function(obj) {return 'one';},
},
getCentipedeDirection : function(obj) {
let direction = '';
......
......@@ -132,7 +132,6 @@ var centipedes = {
let theMushroom = this.getTheMushroom(centipede);
if (theMushroom && theMushroom.poisoned) {
centipede.poisoned = true;
console.log('poisoned mushroom');
};
return theMushroom;
},
......
......@@ -33,7 +33,6 @@ var intervalCreatures = {
if (this[creature].length >= knobsAndLevers[creature].maxNumber) {
return;
};
this.executeConstructorFunctions(creature);
this.make(creature);
},
setMax : function(creature) {
......@@ -47,13 +46,6 @@ var intervalCreatures = {
spawnedCreature.hitPoints = knobsAndLevers[creature].hitPoints;
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) {
if (this[creature] == false) { return; };
return this[creature].filter(target => {
......
......@@ -42,15 +42,9 @@ var mushrooms = {
return Object.keys(players.players).find(key => players.players[key].crashWith(mushroom));
},
generate : function(coordinates, color) {
let mushroomArgs = {
width: knobsAndLevers.mushrooms.side,
height : knobsAndLevers.mushrooms.side,
color : color,
x : coordinates.x + knobsAndLevers.mushrooms.scaleFactor,
y : coordinates.y + knobsAndLevers.mushrooms.scaleFactor,
extraArgs : {type : "mushroom"}
};
mushroom = new Component(mushroomArgs);
let mushroom = new Component(knobsAndLevers.mushrooms.args);
mushroom.x = coordinates.x + knobsAndLevers.mushrooms.scaleFactor,
mushroom.y = coordinates.y + knobsAndLevers.mushrooms.scaleFactor,
mushroom.pointValue = metrics.currentLevel;
mushroom.hitPoints = knobsAndLevers.mushrooms.hitPoints;
return mushroom;
......
......@@ -29,24 +29,13 @@ var players = {
died : false,
init : function() {
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.eligibleDirections = supporting.clone(playerConstants.eligibleDirections);
this.players[player.name] = player;
};
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() {
Object.keys(this.players).forEach(key => {
let player = this.players[key];
......
......@@ -6,7 +6,7 @@ var templates = {
this.baseMarkerParams = {
width : 15,
height : 15,
extraArgs : {type : 'player'},
extraArgs : {type : 'player', images : knobsAndLevers.player.args.extraArgs.images},
};
this.marker = new Component(
Object.assign(this.baseMarkerParams, {
......
var knobsAndLevers = {
init : function() {
this.general.init(this);
......@@ -44,7 +46,15 @@ var knobsAndLevers = {
args : {
color : "blue",
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) {
this.args.width = configs.general.gridSquareSideLength;
......@@ -52,6 +62,9 @@ var knobsAndLevers = {
this.args.x = configs.canvas.width / 2;
},
},
components : {
imageTypes : ['centipede', 'fly', 'worm', 'mushroom', 'spider', 'player'],
},
flies : {
maxNumber : 0,
hitPoints : 2,
......@@ -62,10 +75,17 @@ var knobsAndLevers = {
},
mushroomCreateInterval : 100,
args : {
color : "green",
extraArgs : {type : "fly", speed : {x : 0, y : 2}},
color : 'green',
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 : {
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) {
......@@ -148,16 +168,48 @@ var knobsAndLevers = {
hitPoints : 4,
side : 0,
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) {
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 : {
colors : ['red', 'purple'],
defaultLives : 3,
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) {
this.areaHeight = configs.canvas.height * 0.2;
this.topLimit = knobsAndLevers.canvas.height - this.areaHeight;
......@@ -166,6 +218,7 @@ var knobsAndLevers = {
(configs.canvas.width + this.dimensions.width * 2) * 0.5,
],
this.startY = configs.canvas.height - this.dimensions.height - 1;
this.args.y = this.startY;
},
speed : {
value : 2,
......@@ -197,7 +250,14 @@ var knobsAndLevers = {
},
args : {
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 : {
min : 0.01,
......@@ -240,21 +300,28 @@ var knobsAndLevers = {
},
args : {
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 : {
setX : function() {
knobsAndLevers.worms.args.extraArgs.speed.x = supporting.getRandom(-1, 1) < 0 ? -1 : 1;
if (knobsAndLevers.worms.args.extraArgs.speed.x < 0) {
knobsAndLevers.worms.args.x = game.gameArea.canvas.width - 1;
setX : function(worm) {
worm.speedX = supporting.getRandom(-1, 1) < 0 ? -1 : 1;
if (worm.speedX < 0) {
worm.x = game.gameArea.canvas.width - 1;
} 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);
knobsAndLevers.worms.args.y = supporting.getClosest(game.gameArea.yVertices, randomYPos);
worm.y = supporting.getClosest(game.gameArea.yVertices, randomYPos);
},
},
}
},
init : function(configs) {
this.initialInterval = supporting.getRandom(this.interval.min, this.interval.max);
......
/*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 = {
framesToWaitToPauseAgain : 0,
updateGameState : function() {
// this gets executed every interval
main.updateGamepad();
if (!game.running) {
game.gameArea.loadBackground();
......
......@@ -47,3 +47,9 @@ canvas {
font-family: "Press Start";
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