joeegan · February 7, 2012 00:24
diff --git a/js1k.1.js b/js1k.1.js
 <!doctype html>
 <html>
    
    <head>
        <title>JS1k, 1k demo submission [ID]</title>
        <meta charset="utf-8" />
    </head>
    
    <body>
        <script>
            window.log = function () {
                log.history = log.history || []; // store logs to an array for reference
                log.history.push(arguments);
                if (this.console) {
                    console.log(Array.prototype.slice.call(arguments));
                }
            };

        </script>
        <canvas id=c height=300></canvas>
        <style>
            body {
                position: relative;
            }
            #c {
                border: 1px solid #666;
                margin: 0 auto;
                width: 300px;
                display: block;
            }
        </style>
        <script>
            var b = document.body,
                c = document.getElementsByTagName('canvas')[0],
                ctx = c.getContext('2d'),
                canvasW = 300,
                canvasH = 300,
                FPS = 30;

            ctx.lineWidth = 1;
            ctx.strokeStyle = "#666";

            function clearBulletZone() {
               ctx.clearRect(0,0,canvasW,canvasH-20);
            }

            function Weapon(x) {
                this.w = 8;
                this.x = (canvasW/2) - (this.w);
                this.h = 6;
            }

            Weapon.prototype.drawTurret = function () {
                ctx.beginPath();
                ctx.arc(this.x + 2, canvasH + 1, 20, 0, Math.PI, true);
                ctx.closePath();
                ctx.stroke();
            };

            Weapon.prototype.up = function () {
                this.launchBullet();
            };

            Weapon.prototype.down = function () {
            };

            Weapon.prototype.left = function () {
                this.x -= 2;
            };

            Weapon.prototype.right = function () {
                this.x += 2;
            };

            Weapon.prototype.clear = function(){
                ctx.clearRect(0,canvasH-20,canvasW,50);
            };

            Weapon.prototype.launchBullet = function () {
                var bullet = new Missile(this.x);
                bullet.startTrajectory();
            };

            function Missile(x){
                this.w = 2;
                this.x = x;
                this.h = 6;
            }

            Missile.prototype.startTrajectory = function(){
                var self = this;
                var pos = canvasH - 20;
                var journey = setInterval(function() {
                    clearBulletZone();
                    if (pos > 0) {
                        pos--;
                        ctx.fillRect(self.x + 3, pos, 2, 2);
                    }
                }, 1000/FPS);
            };

            function onkeySmack(evt) {
                var k = evt.keyCode;
                switch (k) {
                case 38:
                    turret.up();
                    break;
                case 40:
                    turret.down();
                    break;
                case 37:
                    turret.left();
                    break;
                case 39:
                    turret.right();
                    break;
                }
                turret.clear();
                turret.drawTurret();
            }

            window.turret = new Weapon();
            turret.drawTurret();
            window.addEventListener('keydown', onkeySmack, true);

        </script>
    </body>

 </html>
diff --git a/JS1k.html b/JS1k.html
 <!doctype html>
 <html>
 	<head>
 		<title>JS1k, 1k demo submission [ID]</title>
 		<meta charset="utf-8" />
 	</head>
 	<body>
 		<canvas id="c" height=300></canvas>
 		<script>
 			// boilerplate...
 			var b = document.body;
 			var c = document.getElementsByTagName('canvas')[0];
 			var ctx = c.getContext('2d');
 			var canvasWidth = 300;
 			var canvasHeight = 300;
 			function wipeCanvas() {
 				ctx.clearRect(0,0,canvasWidth,canvasHeight);
 			}



 			function Weapon(x){
 				this.w = 3;
 				this.x = this.w;
 				this.h = 6;
 				this.drawStructure();
 			}

 			Weapon.prototype.drawStructure = function(){
 				wipeCanvas();
 				ctx.fillStyle = "rgb(40,0,0)";
 				ctx.fillRect(this.x, canvasHeight-this.h, this.w, this.h);
 			};
 			Weapon.prototype.up = function(){
 				this.launchBullet();	
 			};
 			Weapon.prototype.down = function(){
 				console.log('down fired');	
 			};
 			Weapon.prototype.left = function(){
 				this.x -=1;
 				this.drawStructure();
 			};
 			Weapon.prototype.right = function(){
 				this.x +=1;
 				this.drawStructure();
 			};
 			Weapon.prototype.launchBullet = function(){
 				var i = 0;
 				var self = this;
 				var x = self.x;
 				setInterval(function(){
 					self.drawStructure();
 					ctx.fillStyle = "rgb(40,0,0)";
 					ctx.fillRect(x, canvasHeight - self.h - 2 - i, 2, 2);
 					i++;	
 				},100);
 			};


 			(function(){
 				
 				var turret;

 				function onkeySmack(evt){
 					switch (evt.keyCode) {
 						case 38: turret.up();
 						break;
 						case 40: turret.down();
 						break;
 						case 37: turret.left();
 						break;
 						case 39: turret.right();
 						break;
 						case 18: //alt, silent fail for tab switching etc. 
 						break;
 						default: console.error('keycode not supported, arrow keys only');
 					}
 				}

 				function draw(){
 					turret = new Weapon();
 					window.addEventListener('keydown',onkeySmack,true);
 				}
 				
 				draw();

 			})();
 		</script>
 	</body>
 </html>
	<!doctype html>
	<html>

	<head>
	<title>JS1k, 1k demo submission [ID]</title>
	<meta charset="utf-8" />
	</head>

	<body>
	<script>
	window.log = function () {
	log.history = log.history \|\| []; // store logs to an array for reference
	log.history.push(arguments);
	if (this.console) {
	console.log(Array.prototype.slice.call(arguments));
	}
	};

	</script>
	<canvas id=c height=300></canvas>
	<style>
	body {
	position: relative;
	}
	#c {
	border: 1px solid #666;
	margin: 0 auto;
	width: 300px;
	display: block;
	}
	</style>
	<script>
	var b = document.body,
	c = document.getElementsByTagName('canvas')[0],
	ctx = c.getContext('2d'),
	canvasW = 300,
	canvasH = 300,
	FPS = 30;

	ctx.lineWidth = 1;
	ctx.strokeStyle = "#666";

	function clearBulletZone() {
	ctx.clearRect(0,0,canvasW,canvasH-20);
	}

	function Weapon(x) {
	this.w = 8;
	this.x = (canvasW/2) - (this.w);
	this.h = 6;
	}

	Weapon.prototype.drawTurret = function () {
	ctx.beginPath();
	ctx.arc(this.x + 2, canvasH + 1, 20, 0, Math.PI, true);
	ctx.closePath();
	ctx.stroke();
	};

	Weapon.prototype.up = function () {
	this.launchBullet();
	};

	Weapon.prototype.down = function () {
	};

	Weapon.prototype.left = function () {
	this.x -= 2;
	};

	Weapon.prototype.right = function () {
	this.x += 2;
	};

	Weapon.prototype.clear = function(){
	ctx.clearRect(0,canvasH-20,canvasW,50);
	};

	Weapon.prototype.launchBullet = function () {
	var bullet = new Missile(this.x);
	bullet.startTrajectory();
	};

	function Missile(x){
	this.w = 2;
	this.x = x;
	this.h = 6;
	}

	Missile.prototype.startTrajectory = function(){
	var self = this;
	var pos = canvasH - 20;
	var journey = setInterval(function() {
	clearBulletZone();
	if (pos > 0) {
	pos--;
	ctx.fillRect(self.x + 3, pos, 2, 2);
	}
	}, 1000/FPS);
	};

	function onkeySmack(evt) {
	var k = evt.keyCode;
	switch (k) {
	case 38:
	turret.up();
	break;
	case 40:
	turret.down();
	break;
	case 37:
	turret.left();
	break;
	case 39:
	turret.right();
	break;
	}
	turret.clear();
	turret.drawTurret();
	}

	window.turret = new Weapon();
	turret.drawTurret();
	window.addEventListener('keydown', onkeySmack, true);

	</script>
	</body>

	</html>
No results found