HTML5 Game Side Scrolling Test

Working on scrolling the background for my new character. Tap near the edge of the game to walk the character around the scene.

Images

The background image for the scene is:

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,
	leftBounds = 62,
	rightBounds = 30,
	margin = 100,

	element = document.getElementById("game"), 

	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",
				offsetX: -19,
				src: "images/stand-right.png"
			}, {
				name: "standLeft",
				offsetX: -19,
				src: "images/stand-left.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, element);

game.addEventListener("loaded", function () {

	// Create the background
	bg = BLOCKS.block({
		layer: game.addLayer("bg"), 
		spec: spec.bg
	});

	// Create the character block
	character = BLOCKS.block({
		layer: game.addLayer("character"), 
		spec: spec.character
	});

	bg.x = -486;
	
	character.y = 270;

	// Walk the character around initially
	walk(500, function () {
		walk(-500, function () {
			walk(400);
		});
	});

	// 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 (character.x < leftBounds) {
			character.x = leftBounds;
			character.dirty = true;
		} else if (character.x > game.width - rightBounds) { 
			character.x = game.width - rightBounds;
			character.dirty = true;
		}
		
		character.update();
		bg.update();
	};
	
	game.render = function() {

		bg.render();
		if (character.dirty) {
			game.getLayer("character").clear();
		}
		character.render();
	};

	// Move the character toward tap
	game.tap = function (pos) {
		walk(pos.x - character.x);
	};
});

game.load();

Share This Post