viewport

Move the player in a large map with nice viewport handler.

by Gustavo Carvalho

HTML

<!-- Arrow keys moves the player(black rectangle)-->

<canvas id="gameCanvas" width=400 height=400 />

JavaScript

// wrapper for our game "classes", "methods" and "objects"
	window.Game = {};

	// wrapper for "class" Rectangle
	(function() {
	  function Rectangle(left, top, width, height) {
	    this.left = left || 0;
	    this.top = top || 0;
	    this.width = width || 0;
	    this.height = height || 0;
	    this.right = this.left + this.width;
	    this.bottom = this.top + this.height;
	  }

	  Rectangle.prototype.set = function(left, top, /*optional*/ width, /*optional*/ height) {
	    this.left = left;
	    this.top = top;
	    this.width = width || this.width;
	    this.height = height || this.height
	    this.right = (this.left + this.width);
	    this.bottom = (this.top + this.height);
	  }

	  Rectangle.prototype.within = function(r) {
	    return (r.left <= this.left &&
	      r.right >= this.right &&
	      r.top <= this.top &&
	      r.bottom >= this.bottom);
	  }

	  Rectangle.prototype.overlaps = function(r) {
	    return (this.left < r.right &&
	      r.left < this.right &&
	      this.top < r.bottom &&
	      r.top < this.bottom);
	  }

	  // add "class" Rectangle to our Game object
	  Game.Rectangle = Rectangle;
	})();

	// wrapper for "class" Camera (avoid global objects)
	(function() {

	  // possibles axis to move the camera
	  var AXIS = {
	    NONE: 1,
	    HORIZONTAL: 2,
	    VERTICAL: 3,
	    BOTH: 4
	  };

	  // Camera constructor
	  function Camera(xView, yView, viewportWidth, viewportHeight, worldWidth, worldHeight) {
	    // position of camera (left-top coordinate)
	    this.xView = xView || 0;
	    this.yView = yView || 0;

	    // distance from followed object to border before camera starts move
	    this.xDeadZone = 0; // min distance to horizontal borders
	    this.yDeadZone = 0; // min distance to vertical borders

	    // viewport dimensions
	    this.wView = viewportWidth;
	    this.hView = viewportHeight;

	    // allow camera to move in vertical and horizontal axis
	    this.axis = AXIS.BOTH;

	    // object that should be followed
	   ...