HTML5 Game Interactive Object Test
The game now includes an object the character can interact with. Can you find it?
Images
The background image for the scene is:
The item images for the scene are:
The character's sprites are:
Code
I am using BlocksJS to simplify the implementation.
<article id="walk1" class="BlocksGame"></article> <script src="js/blocksjs-0.3.7.min.js"></script>
(function () {
var game, bg, character, bucket, ladder, ladderCover,
leftBounds = 62,
rightBounds = 30,
margin = 100,
prevScrollXIndex,
prevScrollYIndex,
interactionOff,
underground = false,
undergroundRightBounds = 155,
spec = {
width: 500,
height: 388,
bg: {
slices: [{
name: "walkLeft",
src: "images/background.jpg"
}]
},
character: {
slices: [{
name: "walkRight",
src: "images/walk-right.png",
offsetX: -19,
numberOfFrames: 12,
frameDelay: 1,
loop: true
}, {
name: "walkLeft",
src: "images/walk-left.png",
offsetX: -19,
numberOfFrames: 12,
frameDelay: 1,
loop: true
}, {
name: "standRight",
src: "images/stand-right.png",
offsetX: -19
}, {
name: "standLeft",
src: "images/stand-left.png",
offsetX: -19
}, {
name: "climbDown",
src: "images/climb-down.png",
offsetX: -19,
numberOfFrames: 16,
frameDelay: 2,
loop: true
}, {
name: "climbUp",
src: "images/climb-up.png",
offsetX: -19,
numberOfFrames: 16,
frameDelay: 2,
loop: true
}]
},
bucket: {
x: 95,
y: 301,
slices: [{
name: "initial",
src: "images/bucket.png"
}, {
name: "highlight",
src: "images/bucket-highlight.png",
offsetX: -2,
offsetY: -2
}, {
name: "dumped",
src: "images/bucket-dumped.png",
offsetX: 34,
offsetY: 0
}]
},
ladder: {
x: 100,
y: 311,
slices: [{
name: "initial",
src: "images/ladder.png"
}, {
name: "highlight",
src: "images/ladder-highlight.png"
}]
},
ladderCover: {
x: 89,
y: 314,
slices: [{
src: "images/ladder-cover.png"
}]
}
},
walk = function (xDel, callback) {
var x, callbackFunc;
x = character.x + xDel;
// Stop any previous movement
character.stopMotors();
// Face the character left or right
if (x > character.x) {
character.setSlice("walkRight");
callbackFunc = callback || function () {
character.setSlice("standRight");
};
} else {
character.setSlice("walkLeft");
callbackFunc = callback || function () {
character.setSlice("standLeft");
};
}
// Start walking
game.addMotor("move", {
object: character,
x: x - character.x,
speed: 2,
callback: callbackFunc
});
};
// Create a game
game = BLOCKS.game(spec);
game.addEventListener("loaded", function () {
// Create the background
bg = BLOCKS.block({
layer: game.addLayer("bg"),
spec: spec.bg
});
// Create the bucket block
bucket = BLOCKS.block({
layer: game.addLayer("bucket"),
spec: spec.bucket
});
bucket.posX = bucket.x;
bucket.posY = bucket.y;
// Create the ladder block
ladder = BLOCKS.block({
layer: game.addLayer("ladder"),
spec: spec.ladder
});
ladder.posX = ladder.x;
ladder.posY = ladder.y;
// Create the character block
character = BLOCKS.block({
layer: game.addLayer("character"),
spec: spec.character
});
// Create the ladderCover block
ladderCover = BLOCKS.block({
layer: game.addLayer("ladderCover"),
spec: spec.ladderCover
});
ladderCover.posX = ladderCover.x;
ladderCover.posY = ladderCover.y;
ladderCover.hide();
bg.x = -580;
character.y = 275;
// Walk the character around initially
walk(500, function () {
walk(-500, function () {
walk(330);
});
});
// Notify the slice of game loop
game.update = function() {
var newCharX;
if (character.x > game.width - margin) {
bg.x -= character.x - (game.width - margin);
bg.dirty = true;
newCharX = game.width - margin;
character.dirty = true;
} else if (character.x < margin) {
bg.x += margin - character.x;
bg.dirty = true;
newCharX = margin;
character.dirty = true;
}
if (bg.x < -(bg.width - game.width)) {
bg.x = -(bg.width - game.width);
bg.dirty = true;
} else if (bg.x > 0) {
bg.x = 0;
bg.dirty = true;
} else if (newCharX !== undefined) {
character.x = newCharX;
character.dirty = true;
}
if (underground && character.x > game.width - undergroundRightBounds) {
character.x = game.width - undergroundRightBounds;
character.dirty = true;
} else if (character.x < leftBounds) {
character.x = leftBounds;
character.dirty = true;
} else if (character.x > game.width - rightBounds) {
character.x = game.width - rightBounds;
character.dirty = true;
}
if (prevScrollXIndex !== bg.x) {
bucket.x = bucket.posX + bg.x;
bucket.dirty = true;
ladder.x = ladder.posX + bg.x;
ladder.dirty = true;
ladderCover.x = ladderCover.posX + bg.x;
ladderCover.dirty = true;
}
if (prevScrollYIndex !== undefined && prevScrollYIndex !== bg.y) {
bucket.y = bucket.posY + bg.y;
bucket.dirty = true;
ladder.y = ladder.posY + bg.y;
ladder.dirty = true;
ladderCover.y = ladderCover.posY + bg.y;
ladderCover.dirty = true;
character.y -= prevScrollYIndex - bg.y;
character.dirty = true;
}
character.update();
bg.update();
bucket.update();
ladder.update();
ladderCover.update();
prevScrollXIndex = bg.x;
prevScrollYIndex = bg.y;
};
game.render = function() {
bg.render();
if (bucket.dirty) {
game.getLayer("bucket").clear();
}
bucket.render();
if (ladder.dirty) {
game.getLayer("ladder").clear();
}
ladder.render();
if (ladderCover.dirty) {
game.getLayer("ladderCover").clear();
}
ladderCover.render();
if (character.dirty) {
game.getLayer("character").clear();
}
character.render();
};
// Move the character toward tap
game.tap = function (pos) {
var callback;
if (!interactionOff) {
if (bucket.getSlice().name !== "dumped") {
bucket.setSlice("initial");
}
if (bucket.getSlice().name !== "initial") {
ladder.setSlice("initial");
}
if (underground) {
if (ladder.isPointInside(pos)) {
ladder.setSlice("highlight");
callback = function () {
// If we get to the ladder
interactionOff = true;
ladder.setSlice("initial");
// Make sure character is in the center of the ladder
character.x = ladder.x + ladder.width / 2;
ladderCover.show();
character.setSlice("climbUp");
character.stopMotors();
game.addMotor("move", {
object: character,
speed: 1,
y: -182,
callback: function () {
ladderCover.hide();
character.setSlice("standRight");
interactionOff = false;
underground = false;
}
});
bg.stopMotors();
game.addMotor("move", {
object: bg,
speed: 1,
y: -bg.y
});
};
}
} else {
if (bucket.isPointInside(pos) || (bucket.getSlice().name === "dumped" && ladder.isPointInside(pos))) {
if (bucket.getSlice().name !== "dumped") {
bucket.setSlice("highlight");
} else {
ladder.setSlice("highlight");
}
callback = function () {
interactionOff = true;
// Go to the left of the bucket
walk(bucket.x - character.x, function () {
// Go to the center of the bucket
walk(bucket.x - character.x + bucket.width / 2, function () {
// Dump the bucket
if (bucket.getSlice().name !== "dumped") {
bucket.setSlice("dumped");
}
ladder.setSlice("initial");
ladderCover.show();
character.setSlice("climbDown");
character.stopMotors();
game.addMotor("move", {
object: character,
speed: 1,
y: 182,
callback: function () {
ladderCover.hide();
character.setSlice("standRight");
interactionOff = false;
underground = true;
}
});
bg.stopMotors();
game.addMotor("move", {
object: bg,
speed: 1,
y: bg.y - bg.height / 2
});
});
});
};
}
}
walk(pos.x - character.x, callback);
}
};
});
game.load();
}());