260 : Items
Balthazar:
Now we'll add support for items
Balthazar:
Create the images/player directory.
Create the following directory in your project:
- images/items
Balthazar:
Copy 3 item images in to the images/items directory: key.png, gem.png and potion.png.
key.png
gem.png
potion.png
Copy the following files into your project:
- images/items/key.png
- images/items/gem.png
- images/items/potion.png
function init_level_defaults(level) {
level.player_start_x = 0;
level.player_start_y = 0;
level.platforms = [];
level.monsters = [];
level.items = [];
}
level.items = [];
}
function init_level1() {
...
add_monsters(level, monster_data);
var item_data = [
[480, 110, 18, 20, "key", "key"],
[465, 170, 16, 23, "potion", "potion"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 1);
...
}
var item_data = [
[480, 110, 18, 20, "key", "key"],
[465, 170, 16, 23, "potion", "potion"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 1);
...
}
Balthazar:
and level 2
function init_level2() {
...
add_default_platforms(level);
var item_data = [
[250, 360, 18, 20, "key", "key"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 2);
...
}
var item_data = [
[250, 360, 18, 20, "key", "key"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 2);
...
}
Balthazar:
and level 3
function init_level3() {
...
add_default_platforms(level);
var item_data = [
[500, 360, 21, 27, "finish", "gem"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 0);
...
}
var item_data = [
[500, 360, 21, 27, "finish", "gem"],
];
add_items(level, item_data);
level.goal = create_goal(500, 360, 0);
...
}
Balthazar:
Now that we have a 'finish' gem, we should remove the goal from level 3.
function init_level3() {
...
add_items(level, item_data);
level.goal = create_goal(500, 360, 0);
_levels.push(level);
}
level.goal = create_goal(500, 360, 0);
_levels.push(level);
}
Balthazar:
If you run the code now, the game will stop when you reach the third level. This is because we have code that assumes that each level has a 'goal' object. Since this is no longer the case, it will throw an exception (error) and stop when you get to a level without a goal (level 3 in our case).
Balthazar:
We can fix this by making the code work by having the draw_goal() and check_goal_collisions() functions check to make sure it has a valid goal object before trying to draw it.
function draw_goal(ctx) {
var level = _levels[_game.current_level];
var goal = level.goal;
if (goal) {
ctx.fillStyle = "green";
ctx.fillRect(goal.x - goal.origin_x, goal.y - goal.origin_y,
goal.width, goal.height);
}
}
if (goal) {
ctx.fillStyle = "green";
ctx.fillRect(goal.x - goal.origin_x, goal.y - goal.origin_y,
goal.width, goal.height);
}
}
function check_goal_collisions() {
var level = _levels[_game.current_level];
var goal = level.goal;
if (goal) {
if (collide(goal, _player)) {
start_level(goal.next_level);
}
}
}
if (goal) {
if (collide(goal, _player)) {
start_level(goal.next_level);
}
}
}
function create_monster(x, y, width, height, min_x, max_x, move_x, image) {
...
}
// item_data: [x, y, width, height, type, image]
function add_items(level, item_data) {
for (var i = 0; i < item_data.length; i++) {
var d = item_data[i];
var item = create_item(d[0], d[1], d[2], d[3], d[4], d[5]);
level.items.push(item);
}
}
function create_item(x, y, width, height, type, image) {
var d = {};
d.x = x;
d.y = y;
d.width = width;
d.height = height;
d.origin_x = width / 2;
d.origin_y = height;
d.type = type;
d.found = false;
d.img = new Image();
d.img.src = _game.imagedir_items + image + ".png";
return d;
}
// item_data: [x, y, width, height, type, image]
function add_items(level, item_data) {
for (var i = 0; i < item_data.length; i++) {
var d = item_data[i];
var item = create_item(d[0], d[1], d[2], d[3], d[4], d[5]);
level.items.push(item);
}
}
function create_item(x, y, width, height, type, image) {
var d = {};
d.x = x;
d.y = y;
d.width = width;
d.height = height;
d.origin_x = width / 2;
d.origin_y = height;
d.type = type;
d.found = false;
d.img = new Image();
d.img.src = _game.imagedir_items + image + ".png";
return d;
}
function draw() {
...
erase(ctx);
draw_platforms(ctx);
draw_goal(ctx);
draw_monsters(ctx);
draw_items(ctx);
draw_player(ctx);
...
}
draw_items(ctx);
draw_player(ctx);
...
}
function draw_monsters(ctx) {
...
}
function draw_items(ctx) {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var t = items[i];
if (!t.found) {
ctx.drawImage(t.img, t.x - t.origin_x, t.y - t.origin_y);
}
}
}
function draw_items(ctx) {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var t = items[i];
if (!t.found) {
ctx.drawImage(t.img, t.x - t.origin_x, t.y - t.origin_y);
}
}
}
function check_collisions() {
check_platform_collisions();
check_monster_collisions();
check_item_collisions();
check_goal_collisions();
}
check_item_collisions();
check_goal_collisions();
}
function check_monster_collisions() {
...
}
function check_item_collisions() {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!item.found) {
if (collide(item, _player)) {
item.found = true;
}
}
}
}
function check_item_collisions() {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!item.found) {
if (collide(item, _player)) {
item.found = true;
}
}
}
}
function init_level_defaults(level) {
level.player_has_key = false;
level.player_start_x = 0;
level.player_start_y = 0;
level.platforms = [];
level.monsters = [];
level.items = [];
}
level.player_has_key = false;
level.player_start_x = 0;
level.player_start_y = 0;
level.platforms = [];
level.monsters = [];
level.items = [];
}
function check_goal_collisions() {
var level = _levels[_game.current_level];
var goal = level.goal;
if (goal) {
if (collide(goal, _player)) {
if (collide(goal, _player) && level.player_has_key) {
start_level(goal.next_level);
}
}
}
if (collide(goal, _player)) {
if (collide(goal, _player) && level.player_has_key) {
start_level(goal.next_level);
}
}
}
Congratulations! You've earned the Treasure I - Key badge!
Balthazar:
We need images of the gate open and closed.
gate-closed.png
gate-open.png
Copy the following files into your project:
- images/backgrounds/gate-closed.png
- images/backgrounds/gate-open.png
Balthazar:
Since we'e changing the size of the goal, we need to update the width and height.
function create_goal(x, y, next_level) {
var goal = {};
goal.x = x;
goal.y = y;
goal.width = 20;
goal.width = 30;
goal.height = 20;
goal.height = 40;
goal.origin_x = goal.width / 2;
goal.origin_y = goal.height;
goal.next_level = next_level;
goal.img_open = new Image();
goal.img_open.src = _game.imagedir_backgrounds + "gate-open.png";
goal.img_closed = new Image();
goal.img_closed.src = _game.imagedir_backgrounds + "gate-closed.png";
return goal;
}
goal.width = 20;
goal.width = 30;
goal.height = 20;
goal.height = 40;
goal.origin_x = goal.width / 2;
goal.origin_y = goal.height;
goal.next_level = next_level;
goal.img_open = new Image();
goal.img_open.src = _game.imagedir_backgrounds + "gate-open.png";
goal.img_closed = new Image();
goal.img_closed.src = _game.imagedir_backgrounds + "gate-closed.png";
return goal;
}
function draw_goal(ctx) {
var level = _levels[_game.current_level];
var goal = level.goal;
if (goal) {
ctx.fillStyle = "green";
ctx.fillRect(goal.x - goal.origin_x, goal.y - goal.origin_y,
goal.width, goal.height);
var image = goal.img_closed;
if (level.player_has_key) {
image = goal.img_open;
}
set_transform(ctx, goal);
ctx.drawImage(image, 0, 0);
reset_transform(ctx);
}
}
ctx.fillStyle = "green";
ctx.fillRect(goal.x - goal.origin_x, goal.y - goal.origin_y,
goal.width, goal.height);
var image = goal.img_closed;
if (level.player_has_key) {
image = goal.img_open;
}
set_transform(ctx, goal);
ctx.drawImage(image, 0, 0);
reset_transform(ctx);
}
}
function check_item_collisions() {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!item.found) {
if (collide(item, _player)) {
if (item.type == "key") {
level.player_has_key = true;
} else if (item.type == "finish") {
_game.game_over = true;
_game.game_win = true;
}
item.found = true;
}
}
}
}
if (item.type == "key") {
level.player_has_key = true;
} else if (item.type == "finish") {
_game.game_over = true;
_game.game_win = true;
}
item.found = true;
}
}
}
}
Congratulations! You've earned the Treasure II - Finish badge!
function init_game() {
...
_game.meter_width = 150;
_game.meter_height = 20;
// Status images
_game.img_key = new Image();
_game.img_key.src = _game.imagedir_items + "key.png";
_game.img_player = new Image();
_game.img_player.src = _game.imagedir_player + "icon.png";
}
// Status images
_game.img_key = new Image();
_game.img_key.src = _game.imagedir_items + "key.png";
_game.img_player = new Image();
_game.img_player.src = _game.imagedir_player + "icon.png";
}
function draw_status(ctx) {
...
ctx.strokeStyle = "black";
ctx.strokeRect(_game.meter_x, _game.meter_y, _game.meter_width, _game.meter_height);
// If the player has the key, draw it in the status area.
var level = _levels[_game.current_level];
if (level.player_has_key) {
ctx.drawImage(_game.img_key, _game.meter_width + 15, 11);
}
// Draw player icons to indicate how many extra lives remain.
for (var i = 0; i < _game.player_lives-1; i++) {
ctx.drawImage(_game.img_player, _game.width - 30 - (i * 20), 12);
}
}
// If the player has the key, draw it in the status area.
var level = _levels[_game.current_level];
if (level.player_has_key) {
ctx.drawImage(_game.img_key, _game.meter_width + 15, 11);
}
// Draw player icons to indicate how many extra lives remain.
for (var i = 0; i < _game.player_lives-1; i++) {
ctx.drawImage(_game.img_player, _game.width - 30 - (i * 20), 12);
}
}
function check_item_collisions() {
var level = _levels[_game.current_level];
var items = level.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!item.found) {
if (collide(item, _player)) {
if (item.type == "key") {
level.player_has_key = true;
} else if (item.type == "potion") {
adjust_health(30);
} else if (item.type == "finish") {
_game.game_over = true;
_game.game_win = true;
}
item.found = true;
}
}
}
}
} else if (item.type == "potion") {
adjust_health(30);
} else if (item.type == "finish") {
_game.game_over = true;
_game.game_win = true;
}
item.found = true;
}
}
}
}
Congratulations! You've earned the Treasure III - Potion badge!