jQuery addClass example

Change class name on click in jQuery

by Michael Prosser

HTML

<div id="status">

</div>

JavaScript

var dreamland = {

}

dreamland.TEXT = {
	
  jcanvas: null,
	canvas: null,
  canvasWidth: 400,
	canvasHeight: 200,
	context: null,
  
  reader: {
  
  	x: 0,
    y: 0
    
  },
	
	render: function(options){
		
		$("#textCanvas").remove();
		
		if(!options.font){
			
			options.font = "Arial";
			
		}
		
		if(!options.fontSize){
			
			options.fontSize = "30px";
			
		}
		
		if(!options.text){
			
			options.text = "Hello World";
			
		}
		
		this.jcanvas = $('<canvas width="' + this.canvasWidth + '" height="' + this.canvasHeight + '"></canvas>');
   
		this.canvas = this.jcanvas[0];
		this.context = this.canvas.getContext("2d");
		this.context.font = options.fontSize + " " + options.font;
		this.context.fillText(options.text, 10, 25);
		
		// now we have the text in a canvas so we can find the edges
		
		$('body').append(this.jcanvas);
    
	},
  
  textAt: function(x,y){
  
  	var c = this.context.getImageData(x, y, 1, 1).data;
    
    
    if(c[3] === 0){
    
    	return false;
    
    } else {
    
    	return true;
    
    }
  
  },
  
  direction: 315,
  
  directionalOffset:  function(direction){
  
  	switch(direction){
    
    	case 0:
      return { x: 0, y: -1 }
      break;
    
    	case 45:
      return { x: 1, y: -1 }
      break;
    
    	case 90:
      return { x: 1, y: 0 }
      break;
    
    	case 135:
      return { x: 1, y: 1 }
      break;
    
    	case 180:
      return { x: 0, y: 1 }
      break;
    
    	case 225:
      return { x: -1, y: 1 }
      break;
    
    	case 270:
      return { x: -1, y: 0 }
      break;
    	
    	case 315:
      return { x: -1, y: -1 }
      break;
    
    }
  
  },
  
  getStartPosition: function(){
  
  	var seeking = true;
    
      for(var i = 0; i<this.canvasHeight;i++){

        for(var j = 0; j<this.canvasWidth;j++){

          if(this.textAt(j,i)){

            return { x: j, y: i };

          }

        }
        
      }
      
  },
  
  turn: function(direction){
  
 //...