anabarasan/space_ranger.html

## space_ranger.html
<!doctype html>
<html>
    <head>
        <title>Space Rangers</title>
        <script src="space_ranger.js"></script>
        <style>
            canvas { display:block; margin:0px auto; }
        </style>
    </head>
    <body style="width:99%;">
    </body>
</html>

## space_ranger.js
function Bullet(x, y) {
    this.x = x;
    this.y = y;
    this.width = 3;
    this.height = 3;
    this.color = '#f00';
    this.active = true;
    this.x_velocity = 0;
    this.y_velocity = -5;
}

Bullet.prototype.render = function (context) {
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, this.width, this.height);
};

Bullet.prototype.update = function (canvas) {
    this.x += this.x_velocity;
    this.y += this.y_velocity;
    this.active = this.active &&
                    this.x >= 0 && this.x <= canvas.width &&
                    this.y >= 0 && this.y <= canvas.height;
};

var player_bullets = [];

function Ranger (canvas) {
    this.height = 32;
    this.width = 32;
    this.x = (canvas.width / 2) - (this.width / 2);
    this.y = canvas.height - (this.height + 10);
}

Ranger.prototype.render = function (context) {
    context.fillStyle = '#0f0';
    context.fillRect(this.x, this.y, this.width, this.height);
};

Ranger.prototype.update = function (canvas, keyDowns) {
    var key;
    for (key in keyDowns) {
        key = Number(key);
        if (key === 37) { // left arrow
            if (this.x <= 0) {
                this.x = 0;
            } else {
                this.x -= 4;
            }
        } else if (key === 39) { // right arrow
            if ((this.x + this.width) >= canvas.width) {
                this.x = canvas.width - this.width;
            } else {
                this.x += 4;
            }
        } else if (key === 32) { // space bar
            this.shoot();
        }
    }
};

Ranger.prototype.shoot = function () {
    var x_bullet_position = this.x + (this.width / 2),
        y_bullet_position = this.y + (this.height / 2);
    player_bullets.push(new Bullet(x_bullet_position, y_bullet_position));
};

var animate = window.requestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              function (callback) { window.setTimeout(callback, 1000 / 60); };
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 600;
var player = new Ranger(canvas);
var keyDowns = {};

var update = function () {
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.height);
    player.update(canvas, keyDowns);
    player_bullets.forEach(function (bullet) {
        bullet.update(canvas);
    });
    player_bullets = player_bullets.filter(function (bullet) {
        return bullet.active;
    });
};

var render = function () {
    player.render(context);
    player_bullets.forEach(function (bullet) {
        bullet.render(context);
    });
};

var step = function () {
    update();
    render();
    animate(step);
};

window.addEventListener('keydown', function (event) {
    keyDowns[event.keyCode] = true;
});

window.addEventListener('keyup', function (event) {
    delete keyDowns[event.keyCode];
});

window.onload = function () {
    document.body.appendChild(canvas);
    animate(step);
};
	<!doctype html>
	<html>
	<head>
	<title>Space Rangers</title>
	<script src="space_ranger.js"></script>
	<style>
	canvas { display:block; margin:0px auto; }
	</style>
	</head>
	<body style="width:99%;">
	</body>
	</html>
	function Bullet(x, y) {
	this.x = x;
	this.y = y;
	this.width = 3;
	this.height = 3;
	this.color = '#f00';
	this.active = true;
	this.x_velocity = 0;
	this.y_velocity = -5;
	}

	Bullet.prototype.render = function (context) {
	context.fillStyle = this.color;
	context.fillRect(this.x, this.y, this.width, this.height);
	};

	Bullet.prototype.update = function (canvas) {
	this.x += this.x_velocity;
	this.y += this.y_velocity;
	this.active = this.active &&
	this.x >= 0 && this.x <= canvas.width &&
	this.y >= 0 && this.y <= canvas.height;
	};

	var player_bullets = [];

	function Ranger (canvas) {
	this.height = 32;
	this.width = 32;
	this.x = (canvas.width / 2) - (this.width / 2);
	this.y = canvas.height - (this.height + 10);
	}

	Ranger.prototype.render = function (context) {
	context.fillStyle = '#0f0';
	context.fillRect(this.x, this.y, this.width, this.height);
	};

	Ranger.prototype.update = function (canvas, keyDowns) {
	var key;
	for (key in keyDowns) {
	key = Number(key);
	if (key === 37) { // left arrow
	if (this.x <= 0) {
	this.x = 0;
	} else {
	this.x -= 4;
	}
	} else if (key === 39) { // right arrow
	if ((this.x + this.width) >= canvas.width) {
	this.x = canvas.width - this.width;
	} else {
	this.x += 4;
	}
	} else if (key === 32) { // space bar
	this.shoot();
	}
	}
	};

	Ranger.prototype.shoot = function () {
	var x_bullet_position = this.x + (this.width / 2),
	y_bullet_position = this.y + (this.height / 2);
	player_bullets.push(new Bullet(x_bullet_position, y_bullet_position));
	};

	var animate = window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	function (callback) { window.setTimeout(callback, 1000 / 60); };
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');
	canvas.width = 400;
	canvas.height = 600;
	var player = new Ranger(canvas);
	var keyDowns = {};

	var update = function () {
	context.fillStyle = '#000';
	context.fillRect(0, 0, canvas.width, canvas.height);
	player.update(canvas, keyDowns);
	player_bullets.forEach(function (bullet) {
	bullet.update(canvas);
	});
	player_bullets = player_bullets.filter(function (bullet) {
	return bullet.active;
	});
	};

	var render = function () {
	player.render(context);
	player_bullets.forEach(function (bullet) {
	bullet.render(context);
	});
	};

	var step = function () {
	update();
	render();
	animate(step);
	};

	window.addEventListener('keydown', function (event) {
	keyDowns[event.keyCode] = true;
	});

	window.addEventListener('keyup', function (event) {
	delete keyDowns[event.keyCode];
	});

	window.onload = function () {
	document.body.appendChild(canvas);
	animate(step);
	};