ohrstrom/monster.html

## monster.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object</title>

		<style type="text/css">
			#stage .monster {
				top: 0px;
				left: 0px;
				position: absolute;
			}

			body {
				overflow: hidden;
			}
		</style>


	</head>
	<body>

		<section>

			<div id="stage">

			</div>

		</section>

		<script src="js/object.js"></script>

	</body>
</html>

## monster.js
console.log('ready');

var refreshRate = 50;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

pxToNumber = function(str) {
	return Number(str.replace('px', ''));
}

Monster = function() {

	var self = this;

	this.speedX = 0;
	this.speedY = 0;

	this.startX = 0;
	this.startY = 0;

	this.size = 100;
	this.color = 'ff00ff';
	this.isMoving = false;
	this.domId = false;
	this.domElement = false;
	this.name = false;

	this.cycle = 0;

	this.init = function() {

		var monsterHtml = '<div class="monster" id="' + this.domId + '"></div>';
		document.getElementById('stage').innerHTML += monsterHtml;

		this.domElement = document.getElementById(this.domId);

		this.domElement.style.backgroundImage = 'url(img/monster/monster_a.png)';

		this.domElement.style.left = this.startX + 'px';
		this.domElement.style.top = this.startY + 'px';


		// this.setColor();
		this.setSize();

		this.interval = setInterval(function() {
			self.draw();
		}, refreshRate);

	};

	this.setColor = function() {
		this.domElement.style.backgroundColor = '#' + this.color;
	};

	this.setSize = function() {
		this.domElement.style.width = this.size + 'px';
		this.domElement.style.height = this.size + 'px';
	};


	this.move = function() {

		var currentX = pxToNumber(this.domElement.style.left);
		var newX = currentX + this.speedX;

		var currentY = pxToNumber(this.domElement.style.top);
		var newY = currentY + this.speedY;

		if(newY + this.size >= windowHeight && this.speedY > 0) {
			this.speedY = this.speedY * -1;
		};
		if(newY <= 0 && this.speedY < 0) {
			this.speedY = this.speedY * -1;
		};

		if(newX >= windowWidth && this.speedX > 0) {
			newX =  - this.size;
		};
		if(newX + this.size < 0 && this.speedX < 0) {
			newX = windowWidth;
		};


		this.domElement.style.left = newX + 'px';
		this.domElement.style.top = newY + 'px';
		// console.log(newX);

	};

	this.setImage = function() {

		var direction;
		if(this.speedX >= 0) {
			this.domElement.style.backgroundPositionX = '100%';
		}
		if(this.speedX < 0) {
			this.domElement.style.backgroundPositionX = '0%';
		}

		if(this.cycle == 0) {
			this.domElement.style.backgroundPositionY = '100%';
		}
		if(this.cycle == 1) {
			this.domElement.style.backgroundPositionY = '0%';
		}

		this.domElement.style.backgroundSize = this.size * 2 + 'px';

	};


	this.draw = function() {

		this.domElement = document.getElementById(this.domId);

		this.domElement.onclick = function(event){
			currentMonster = self;
		};


		//this.setColor();
		this.setSize();
		this.move();
		this.setImage();


		this.cycle += 1;
		if(this.cycle > 1) {
			this.cycle = 0;
		}

		this.domElement = document.getElementById(this.domId);

	};

};


/*
m = new Monster;
m.name = 'Peter';
m.domId = 'monster_1';
m.size = 60;
m.color = '00ffff';
m.speedX = 0;
m.speedY = 0;
m.init();
*/

var monsters = new Array;

for (var i=0; i<60; i++) {
	monsters[i] = new Monster;
	monsters[i].domId = 'monster_' + i;
	monsters[i].speedX = Math.floor(Math.random() * 10 -5);
	monsters[i].speedY = Math.floor(Math.random() * 10 -5);
	monsters[i].startX = Math.floor(Math.random() * windowWidth);
	monsters[i].startY = Math.floor(Math.random() * windowHeight);
	monsters[i].size = Math.floor(Math.random() * 50 + 20);
	monsters[i].init();
};

var currentMonster = monsters[0];


/*
var monsters = Array;
for (var i=0; i<10; i++)
{
	monsters[i] = new Monster;
	monsters[i].domId = 'monster_' + i;
	monsters[i].speedX = i;
	monsters[i].speedY = i;
	monsters[i].init();
}
*/


window.addEventListener('keydown', function(event){
	console.log(event.keyCode);
	switch (event.keyCode) {
		// right
		case 39: {
			currentMonster.speedX += 1;
			break;
		};
		case 37: {
			currentMonster.speedX -= 1;
			break;
		};
		case 40: {
			currentMonster.speedY += 1;
			break;
		};
		case 38: {
			currentMonster.speedY -= 1;
			break;
		};
		case 32: {
			currentMonster.speedX = 0;
			currentMonster.speedY = 0;
			break;
		};


		// etc
	};


});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Object</title>

	<style type="text/css">
	#stage .monster {
	top: 0px;
	left: 0px;
	position: absolute;
	}

	body {
	overflow: hidden;
	}
	</style>


	</head>
	<body>

	<section>

	<div id="stage">

	</div>

	</section>

	<script src="js/object.js"></script>

	</body>
	</html>
	console.log('ready');

	var refreshRate = 50;
	var windowWidth = window.innerWidth;
	var windowHeight = window.innerHeight;

	pxToNumber = function(str) {
	return Number(str.replace('px', ''));
	}

	Monster = function() {

	var self = this;

	this.speedX = 0;
	this.speedY = 0;

	this.startX = 0;
	this.startY = 0;

	this.size = 100;
	this.color = 'ff00ff';
	this.isMoving = false;
	this.domId = false;
	this.domElement = false;
	this.name = false;

	this.cycle = 0;

	this.init = function() {

	var monsterHtml = '<div class="monster" id="' + this.domId + '"></div>';
	document.getElementById('stage').innerHTML += monsterHtml;

	this.domElement = document.getElementById(this.domId);

	this.domElement.style.backgroundImage = 'url(img/monster/monster_a.png)';

	this.domElement.style.left = this.startX + 'px';
	this.domElement.style.top = this.startY + 'px';


	// this.setColor();
	this.setSize();

	this.interval = setInterval(function() {
	self.draw();
	}, refreshRate);

	};

	this.setColor = function() {
	this.domElement.style.backgroundColor = '#' + this.color;
	};

	this.setSize = function() {
	this.domElement.style.width = this.size + 'px';
	this.domElement.style.height = this.size + 'px';
	};



	this.move = function() {

	var currentX = pxToNumber(this.domElement.style.left);
	var newX = currentX + this.speedX;

	var currentY = pxToNumber(this.domElement.style.top);
	var newY = currentY + this.speedY;

	if(newY + this.size >= windowHeight && this.speedY > 0) {
	this.speedY = this.speedY * -1;
	};
	if(newY <= 0 && this.speedY < 0) {
	this.speedY = this.speedY * -1;
	};

	if(newX >= windowWidth && this.speedX > 0) {
	newX = - this.size;
	};
	if(newX + this.size < 0 && this.speedX < 0) {
	newX = windowWidth;
	};


	this.domElement.style.left = newX + 'px';
	this.domElement.style.top = newY + 'px';
	// console.log(newX);

	};

	this.setImage = function() {

	var direction;
	if(this.speedX >= 0) {
	this.domElement.style.backgroundPositionX = '100%';
	}
	if(this.speedX < 0) {
	this.domElement.style.backgroundPositionX = '0%';
	}

	if(this.cycle == 0) {
	this.domElement.style.backgroundPositionY = '100%';
	}
	if(this.cycle == 1) {
	this.domElement.style.backgroundPositionY = '0%';
	}

	this.domElement.style.backgroundSize = this.size * 2 + 'px';

	};


	this.draw = function() {

	this.domElement = document.getElementById(this.domId);

	this.domElement.onclick = function(event){
	currentMonster = self;
	};


	//this.setColor();
	this.setSize();
	this.move();
	this.setImage();


	this.cycle += 1;
	if(this.cycle > 1) {
	this.cycle = 0;
	}

	this.domElement = document.getElementById(this.domId);

	};

	};


	/*
	m = new Monster;
	m.name = 'Peter';
	m.domId = 'monster_1';
	m.size = 60;
	m.color = '00ffff';
	m.speedX = 0;
	m.speedY = 0;
	m.init();
	*/

	var monsters = new Array;

	for (var i=0; i<60; i++) {
	monsters[i] = new Monster;
	monsters[i].domId = 'monster_' + i;
	monsters[i].speedX = Math.floor(Math.random() * 10 -5);
	monsters[i].speedY = Math.floor(Math.random() * 10 -5);
	monsters[i].startX = Math.floor(Math.random() * windowWidth);
	monsters[i].startY = Math.floor(Math.random() * windowHeight);
	monsters[i].size = Math.floor(Math.random() * 50 + 20);
	monsters[i].init();
	};

	var currentMonster = monsters[0];



	/*
	var monsters = Array;
	for (var i=0; i<10; i++)
	{
	monsters[i] = new Monster;
	monsters[i].domId = 'monster_' + i;
	monsters[i].speedX = i;
	monsters[i].speedY = i;
	monsters[i].init();
	}
	*/






	window.addEventListener('keydown', function(event){
	console.log(event.keyCode);
	switch (event.keyCode) {
	// right
	case 39: {
	currentMonster.speedX += 1;
	break;
	};
	case 37: {
	currentMonster.speedX -= 1;
	break;
	};
	case 40: {
	currentMonster.speedY += 1;
	break;
	};
	case 38: {
	currentMonster.speedY -= 1;
	break;
	};
	case 32: {
	currentMonster.speedX = 0;
	currentMonster.speedY = 0;
	break;
	};





	// etc
	};


	});