A9_Final

Game 1

by Alan Harris

HTML

<div id="instructions">
<p>
<STRONG>About this game</STRONG>: Each of the rectangles have a message that is displayed below. The rectangles also change back to the original color when they collide with each other. The colors are emotions in relation to the message. 
</p>

<p>
<STRONG>Instructions</STRONG>: To display the message of a grey box, just click on it and it will be displayed below. The box will change color and change direction. 
</p>
</div>
<br>

<div>
<div id="message"></div><br>
<canvas width=500 height=500 id="output"></canvas>


</div>

<!-- <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script> -->

CSS

#output {
 border: 1px solid black;
}

#message {
  font-size:24px;
}

JavaScript

$('#output').click(function(a){
	var offX = $('#output').offset().left;
  var offY = $('#output').offset().top;
  
  mouseClick(a.pageX - offX, a.pageY - offY);
});

var timer = window.setInterval(callAnimation, 30);

var canvas = document.getElementById('output');
var context = canvas.getContext('2d');

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();


var stepcount = 2;

var ob1 = {
	x: 150,
  y: 250,
  xstep: 1,
  ystep: 3,
  width: 40,
  height: 30,
  movement: 'xy',
  message: "This is not the rectangle you are looking for...",
  borderWidth: 1,
  borderColor: 'black',
  cColor: 'blue',
  fillColor: 'grey',
  currentColor: 'grey'
};


var ob2 = {
	x: 300,
  y: 200,
  xstep: 1,
  ystep: 3,
  width: 40,
  height: 30,
  message: "No, Don't hurt me!",
  movement: 'xy',
  borderWidth: 1,
  borderColor: 'black',
  cColor: 'white',
  fillColor: 'grey',
  currentColor: 'grey'
};


var ob3 = {
	x: 250,
  y: 150,
  xstep: 2,
  ystep: 1,
  width: 40,
  height: 30,
  message: "This rectangle is so powerful, it is writing in third person.",
  movement: 'xy',
  borderWidth: 1,
  borderColor: 'black',
  fillColor: 'grey',
  cColor: 'red',
  currentColor: 'grey'
};

var ob4 = {
	x: 200,
  y: 250,
  xstep: 1,
  ystep: 1,
  width: 40,
  height: 30,
  movement: 'xy',
  borderWidth: 1,
  borderColor: 'black',
  message: "Whatcha Looking At?",
  fillColor: 'grey',
  cColor: 'red',
  currentColor: 'grey'
};

var objects = new Array();
objects[0] = ob1;
objects[1] = ob2;
objects[2] = ob3;
objects[3] = ob4;


function draw(r, c) {
	c.beginPath();
  c.rect(r.x, r.y, r.width, r.height);
  c.fillStyle = r.currentColor;
  c.fill();
  c.lineWidth = r.borderWidth;
  c.strokeStyle = r.borderColor;
  c.stroke();
}

function...