210 : Monster images
Balthazar:
Create the images/monsters directory.
Create the following directory in your project:
- images/monsters
Balthazar:
Copy 2 monster images: vlad.png, henrietta.png.
vlad.png
henrietta.png
Copy the following files into your project:
- images/monsters/vlad.png
- images/monsters/henrietta.png
Balthazar:
Note that the width and height of the monsters is changed to match the size of the bitmap
Balthazar:
Vlad is 20x24 and Henrietta is 30x30
function init_level1() {
...
var monster_data = [
[350, 360, 20, 20, 60, 470, -1.0],
[350, 360, 20, 24, 60, 470, -1.0, "vlad"],
[400, 360, 20, 20, 60, 470, 0.8],
[400, 360, 30, 30, 60, 470, 0.8, "henrietta"],
];
add_monsters(level, monster_data);
...
}
[350, 360, 20, 20, 60, 470, -1.0],
[350, 360, 20, 24, 60, 470, -1.0, "vlad"],
[400, 360, 20, 20, 60, 470, 0.8],
[400, 360, 30, 30, 60, 470, 0.8, "henrietta"],
];
add_monsters(level, monster_data);
...
}
// monster_data: [x, y, width, height, min_x, max_x, move_x]
// monster_data: [x, y, width, height, min_x, max_x, move_x, image]
function add_monsters(level, monster_data) {
for (var i = 0; i < monster_data.length; i++) {
var m = monster_data[i];
var monst = create_monster(m[0], m[1], m[2], m[3], m[4], m[5], m[6]);
var monst = create_monster(m[0], m[1], m[2], m[3], m[4], m[5], m[6], m[7]);
level.monsters.push(monst);
}
}
function create_monster(x, y, width, height, min_x, max_x, move_x) {
function create_monster(x, y, width, height, min_x, max_x, move_x, image) {
...
m.min_x = min_x;
m.max_x = max_x;
m.move_x = move_x;
m.dir = (move_x > 0) ? 1 : -1;
m.img = new Image();
m.img.src = _game.imagedir_monsters + image + ".png";
return m;
}
function draw_monsters(ctx) {
var level = _levels[_game.current_level];
var monsters = level.monsters;
for (var i = 0; i < monsters.length; i++) {
var m = monsters[i];
ctx.fillStyle = "#800000";
ctx.fillRect(m.x - m.origin_x, m.y - m.origin_y, m.width, m.height);
set_transform(ctx, m);
ctx.drawImage(m.img, 0, 0);
reset_transform(ctx);
}
}
ctx.fillStyle = "#800000";
ctx.fillRect(m.x - m.origin_x, m.y - m.origin_y, m.width, m.height);
set_transform(ctx, m);
ctx.drawImage(m.img, 0, 0);
reset_transform(ctx);
}
}
function update_monsters() {
var level = _levels[_game.current_level];
var monsters = level.monsters;
for (var i = 0; i < monsters.length; i++) {
var m = monsters[i];
m.x += m.move_x;
if (m.x <= m.min_x || m.x >= m.max_x) {
m.move_x *= -1;
m.dir *= -1;
}
}
}
m.dir *= -1;
}
}
}
Congratulations! You've earned the Sprite II - Image badge!
Congratulations! You've earned the Sprite III - Direction badge!