javascript
/
tentone.escher.js
mirror de https://github.com/tentone/escher.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html>
<head>
	<title>Snake</title>
	<meta charset="utf-8">
</head>
<body>
	<script type="text/javascript" src="../build/escher.js"></script>

	<script type="text/javascript">

		var canvas = document.createElement("canvas");
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.style.position = "absolute";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		document.body.appendChild(canvas);

		canvas.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};

		document.body.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};

		document.body.onkeydown = function(event)
		{
			arena.snake.keyInput(event.keyCode);
		};

		function Snake(x, y)
		{
			Escher.Object2D.call(this);

			this.body = [];

			for(var i = 0; i < 3; i++)
			{
				this.body.push(new Escher.Vector2(x - i, y));
			}

			this.speed = new Escher.Vector2(1, 0);
		}

		Snake.prototype = Object.create(Escher.Object2D.prototype);

		Snake.prototype.eat = function(arena)
		{
			var first = new Escher.Vector2();
			first.copy(this.body[0]);
			first.add(this.speed);

			for(var i = 0; i < arena.fruits.length; i++)
			{
				if(arena.fruits[i].equals(first))
				{
					this.body.unshift(first);
					arena.fruits = [];
					arena.addFruit()
					return true;
				}
			}

			return false;
		};

		Snake.prototype.move = function()
		{
			var first = new Escher.Vector2();
			first.copy(this.body[0]);
			first.add(this.speed);

			for(var i = this.body.length - 1; i > 0; i--)
			{
				this.body[i].copy(this.body[i - 1]);
			}

			
			if(first.x < 0)
			{
				first.x = arena.width - 1;
			}
			if(first.x > arena.width - 1)
			{
				first.x = 0;
			}
			if(first.y < 0)
			{
				first.y = arena.height - 1;
			}
			if(first.y > arena.height - 1)
			{
				first.y= 0;
			}

			this.body[0].copy(first);
		};

		Snake.prototype.dead = function()
		{
			var first = this.body[0];

			for(var i = 1; i < this.body.length; i++)
			{
				if(this.body[i].equals(first))
				{
					return true;
				}
			}

			return false;
		};

		Snake.prototype.update = function()
		{

			if(!this.eat(arena))
			{
				this.move();
			}

			if(this.dead())
			{
				alert("Game over");
				arena.restart();
			}
		};

		Snake.prototype.keyInput = function(keyCode)
		{
			//Up
			if(keyCode === 38)
			{
				this.speed.set(0, -1);
			}
			//Down
			if(keyCode === 40)
			{
				this.speed.set(0, 1);
			}
			//Left
			if(keyCode === 37)
			{
				this.speed.set(-1, 0);
			}
			//Right
			if(keyCode === 39)
			{
				this.speed.set(1, 0);
			}
		};

		function Arena(w, h)
		{
			Escher.Object2D.call(this);

			this.width = w;
			this.height = h;
			this.restart();
		}

		Arena.prototype = Object.create(Escher.Object2D.prototype);

		Arena.prototype.restart = function()
		{
			this.snake = new Snake(Math.floor(this.width / 2), Math.floor(this.height / 2));
			this.fruits = [];
			this.addFruit();
		};

		Arena.prototype.addFruit = function()
		{
			var collides = true;

			while(collides === true)
			{
				collides = false;
				var fruit = new Escher.Vector2(Math.floor(Math.random() * this.width), Math.floor(Math.random() * this.height));

				for(var i = 0; i < this.snake.body.length; i++)
				{
					if(this.snake.body[i].x === fruit.x && this.snake.body[i].y === fruit.y)
					{
						collides = true;
						break;
					}
				}
			}

			this.fruits.push(fruit);
		};

		Arena.prototype.draw = function(context, viewport, canvas)
		{
			context.strokeStyle = "#000000";
			context.lineHeight = 2;

			var s = 30;

			var w = s * this.width;
			var h = s * this.height;

			for(var x = 0; x < w; x += s)
			{
				for(var y = 0; y < h; y += s)
				{
					context.strokeRect(x, y, s, s);
				}
			}

			context.fillStyle = "#FF0000";

			for(var i = 0; i < this.snake.body.length; i++)
			{
				context.fillRect(this.snake.body[i].x * s, this.snake.body[i].y * s, s, s);
			}


			context.fillStyle = "#00FF00";

			for(var i = 0; i < this.fruits.length; i++)
			{
				context.fillRect(this.fruits[i].x * s, this.fruits[i].y * s, s, s);
			}

		};

		var arena = new Arena(30, 20);

		function updateSnake()
		{
			arena.snake.update();
			setTimeout(updateSnake, 120);
		}
	
		var viewport = new Escher.Viewport(canvas);

		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(arena, viewport);
		updateSnake();

	</script>
</body>
</html>