asteroids.html | searchcode

/asteroids.html

https://bitbucket.org/zombielifestyle/canvas
HTML | 336 lines | 306 code | 30 blank | 0 comment | 0 complexity | 8670191dcfad96a4a52917b342c434ae MD5 | raw file

<html>
 <head>
 <script type="application/javascript" src="jgame.js?sa=fdsjkb"></script>	
  <script type="application/javascript">

onload = function() {
	function collision(p1, r1, p2, r2){
		var a = r1 + r2;
		var dx = p1.x - p2.x;
		var dy = p1.y - p2.y;
		return a * a > (dx * dx + dy * dy);
	}
	var Shot = new jgame.Class({
		$init: function(){
			this.x = 0;
			this.y = 0;
			this.width = 4;
			this.height = 4;
			this.show = true;
			this.dx = 0;
			this.dy = 0;
			this.speed = 6;
		},
		update: function(c, ts){
			if (!this.show) return;
			this.x += this.dx * this.speed;
			this.y += this.dy * this.speed;
			
			// replace at screens edge
			if (this.x + this.width  > WIDTH) {
				this.x = -this.width;
			} else if (this.x + this.width < 0) {
				this.x = WIDTH - this.width;
			}
			if (this.y + this.height  > HEIGHT) {
				this.y = -this.height;
			} else if (this.y + this.height < 0) {
				this.y = HEIGHT - this.height;
			}
			c.beginPath();
			c.strokeStyle = "#0000C8";
			c.arc(this.x, this.y, 5, 0, Math.PI*2, true); 
			c.closePath();
			c.stroke();
		}
	});	
	
	var Explosion = new jgame.Class({
		$init: function(){
			this.x = 0;
			this.y = 0;
			this.width = 80;
			this.height = 80;
			this.show = true;
			this.frameDelay = 2;
			this.frames = [];
			this.frameIndex = 0;
		},
		update: function(c, ts){
			if (!this.show) return;
			if (ts % this.frameDelay == 0) {
				++this.frameIndex
				if (this.frameIndex >= this.frames.length) {
					this.show = false;
					return;
				}
			}
			var img = this.frames[this.frameIndex];
			c.drawImage(img, this.x, this.y, this.width, this.height);
		}
	});

	var Asteroid = new jgame.Class({
		$init: function(){
			this.x = Math.random() * WIDTH;
			this.y = Math.random() * HEIGHT;
			this.width = 64;
			this.height = 64;
			this.show = true;
			var rand = Math.random()*360;
			this.dx=Math.cos(2.0*Math.PI*(rand-90)/360.0);
			this.dy=Math.sin(2.0*Math.PI*(rand-90)/360.0);
			this.speed = Math.random()*1+1;
			this.frameDelay = 2;
			this.frames = [];
			this.frameIndex = Math.floor(Math.random()*16);
		},
		update: function(c, ts){
			this.x += this.dx + this.speed;
			this.y += this.dy + this.speed;
			
			// replace at screens edge
			if (this.x + this.width  > WIDTH) {
				this.x = -this.width;
			} else if (this.x + this.width < 0) {
				this.x = WIDTH - this.width;
			}
			if (this.y + this.height  > HEIGHT) {
				this.y = -this.height;
			} else if (this.y + this.height < 0) {
				this.y = HEIGHT - this.height;
			}
			if (ts % this.frameDelay == 0) {
				if (++this.frameIndex > this.frames.length - 1) {
					this.frameIndex = 0;
				}
			}
			var img = this.frames[this.frameIndex];
			c.drawImage(img, this.x, this.y, this.width, this.height);
			
		}
	});
	var Ship = new jgame.Class({
		$init: function(){
			this.x = 200;
			this.y = 200;
			this.width = 64;
			this.height = 64;
			this.show = true;
			this.angle = 0;
			this.tangle = 0;
			this.dx = 0;
			this.dy = 0;
			this.movex = 0;
			this.movey = 0;
			this.acceleration = .3;
			this.friction = .01;
			this.maxVelocity = 8;
			this.frames = [];
			this.force = 0;
		},
		update: function (c) {
			if (!this.show) return;
			//angle
			this.angle += this.tangle;
			if (this.angle >= 360) {
				this.angle -= 360;
			} else if (this.angle < 0) {
				this.angle += 360;
			}
			// friction
			if (this.movex > 0) {
				this.movex -= this.friction;
			} else if (this.movex < 0) {
				this.movex += this.friction;
			}
			if (this.movey > 0) {
				this.movey -= this.friction;
			} else if (this.movey < 0) {
				this.movey += this.friction;
			}
		
			if (this.force) {
				this.dx=Math.cos(2.0*Math.PI*(this.angle-90)/360.0);
				this.dy=Math.sin(2.0*Math.PI*(this.angle-90)/360.0);
				
				var mxn = this.movex + this.acceleration * this.dx;
				var myn = this.movey + this.acceleration * this.dy;
				var currentSpeed = Math.sqrt(mxn*mxn + myn*myn);
				if (currentSpeed < this.maxVelocity) {
					this.movex=mxn;
					this.movey=myn;
				}
			}
		
			// replace at screens edge
			if (this.x + this.width  > WIDTH) {
				this.x = -this.width;
			} else if (this.x + this.width < 0) {
				this.x = WIDTH - this.width;
			}
			if (this.y + this.height  > HEIGHT) {
				this.y = -this.height;
			} else if (this.y + this.height < 0) {
				this.y = HEIGHT - this.height;
			}
		
			this.x += this.movex;
			this.y += this.movey;
			
			var img = this.frames[this.angle/10];
			c.drawImage(img, this.x, this.y, this.width, this.height);
		}
	});
	

	var loop = new jgame.Loop(24, "canvas");
	var WIDTH = loop.width;
	var HEIGHT = loop.height;
	var c = loop.context;
	
	function loadImages(file, start, end){
		var fileParts = file.split('%d');
		var images = [];
		for (var i = 0; i <= end; i++) {
			var currentFile = fileParts[0] + i + fileParts[1];
			var img = new Image();
			img.src = currentFile;
			images[i] = img;
		}
		return images;
	}
	var bgImage = new Image(640, 480);
	bgImage.src = 'img/space.png';
	
	var explo = new Explosion();
	explo.show = false;
	explo.frames = loadImages("img/explosion/aexplosion_fr_%d.png", 0, 14);
	
	var ship = new Ship();
	ship.frames = loadImages("img/ship/aship_fr_%d.png", 0, 35);
	
	var shot = new Shot();
	shot.show = false;
	ship.frames = loadImages("img/ship/aship_fr_%d.png", 0, 35);
	
	var asteroidFrames = loadImages("img/asteroid/aasteroid_fr_%d.png", 0, 15);
	var asteroids = [];
	for (var i = 0; i < 8; i++) {
		asteroids[i] = new Asteroid();
		asteroids[i].frames = asteroidFrames;
	}
	
	// bg
	c.fillStyle = "#000000";
	//c.fillRect(0, 0, WIDTH, HEIGHT);
	var fps = 0;
	loop.loop = function(){
		fps = fps >= this.fps ? 0 : fps + 1
		c.drawImage(bgImage, 0, 0, WIDTH, HEIGHT);
//		c.fillRect(0, 0, WIDTH, HEIGHT);
		shot.update(c);
		ship.update(c);
		explo.update(c, fps);
		for (var i in asteroids) {
			if (ship.show) {
				if (collision(ship, ship.width/3, asteroids[i], asteroids[i].width/3)) {
					explo.x = ship.x
					explo.y = ship.y
					explo.frameIndex = 0;
					explo.show = true;
					ship.show = false;
				}
			}
			if (shot.show) {
				if (collision(shot, 5, asteroids[i], asteroids[i].width/3)) {
					delete asteroids[i];
					continue;
				}
			}
			asteroids[i].update(c, fps);
		}
	}
	loop.start();
	
	
	
	window.document.onkeypress = function(e){
		//log(e.keyCode);
		if (e.keyCode == '0' && !shot.show && ship.show) { // space
			shot.dx = Math.cos(2.0*Math.PI*(ship.angle-90)/360.0)
			shot.dy = Math.sin(2.0*Math.PI*(ship.angle-90)/360.0)
			shot.x = ship.x + ship.width / 2
			shot.y = ship.y + ship.height / 2
			shot.show = true;
			setTimeout(function(){
				shot.show = false;
			}, 2000);
		}
	}
	
	window.document.onkeydown = function(e){
		// turn left/right
		if (e.keyCode == '37') { // left
			ship.angle -= 10;
		} else if (e.keyCode == '39') { // right
			ship.angle += 10;
		} 
		
		// angle
		if (e.keyCode == '37') { // left
			ship.tangle -= 10;
		} else if (e.keyCode == '39') { // right
			ship.tangle += 10;
		} 
		// movement
		if (e.keyCode == '38') { // up
			ship.force = 1;
		}
	};
	
	window.document.onkeyup = function(e){
		//angle
		if (e.keyCode == '37' || e.keyCode == '39') { // left/right
			ship.tangle = 0;
		}
		// movement
		if (e.keyCode == '38') { // up
			ship.force = 0;
		}
	};

	if (showControls)
		showControls(loop);
}

  </script>
 </head>
 <body >
   <canvas id="canvas" style="border: 1px solid black; padding 10px;" 
   			width="640" height="480"></canvas>
   <script>
   function showControls(loop){
		var e = document.getElementById('ctrl_pause');
		function pauseLoop(e){
			loop.pause();
		}
		e.onclick = pauseLoop;
		var e = document.getElementById('ctrl_fps');
		e.value = loop.fps;
		e.onchange = function(e){
			loop.fps = e.currentTarget.value;
			loop.restart();
		}
	}
   </script>
   <div id="controls">
	   <input type="button" id="ctrl_pause" value="pause" />
	   |
	   FPS:<input type="text" id="ctrl_fps" size="2" />
   </div>
 </body>
 
</html>