ohrstrom · November 15, 2012 18:52
diff --git a/monster.html b/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>
diff --git a/monster.js b/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
	};


	});