Sometime ago I started creating Pong in HTML5 to experiment with the canvas element. I never got around to finishing the game. However I'd love to see it work, so if you feel like putting the finishing touch to it, please do so and repost.
<!DOCTYPE HTML>
<html>
<body>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/pong/javascript/jquery.hotkeys.js" type="text/javascript"></script>
<script language="javascript" src="/pong/javascript/key_status.js" type="text/javascript"></script>
<script language="javascript" src="/pong/javascript/util.js" type="text/javascript"></script>
<script type="text/javascript">
<p id='score'>0</p>
// canvas
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvas.fillStyle='#000000';
canvasElement.appendTo('body');
window.localStorage.setItem('score', 0);
var ball = {
color: "#00A",
x: 250,
y: 270,
x_velocity: -3,
y_velocity: -3,
radius: 3,
draw: function() {
canvas.beginPath();
canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
canvas.closePath();
canvas.fillStyle = this.color;
canvas.fill();
},
update: function() {
this.x = this.x + this.x_velocity;
this.y = this.y - this.y_velocity;
}
};
var court = {
color: "#00A",
x: 10,
y: 10,
width: 460,
height: 300,
draw: function() {
canvas.strokeStyle = this.color;
canvas.strokeRect(this.x, this.y, this.width, this.height);
}
}
// game objects
var racket = {
color: "#00A",
x: 20,
y: court.y + (court.height/2) ,
width: 5,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};
// game loop
var FPS = 30;
var loop = setInterval(function() {
update();
draw();
if (collides_ball_baseline()) {
set_score();
window.clearInterval(loop);
}
}, 1000/FPS);
function set_score() {
score = parseInt(window.localStorage.getItem('score'));
score += 1;
window.localStorage.setItem('score', score);
document.getElementById('score').innerHTML = score;
}
function update() {
if (keydown.up) {
racket.y -= 2;
}
if (keydown.down) {
racket.y += 2;
}
racket.y = racket.y.clamp(0, CANVAS_HEIGHT - racket.height); // clamp racket
ball.update();
}
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
racket.draw();
ball.draw();
court.draw();
if (collides_ball_racket()) {
ball.x_velocity = ball.x_velocity*-1;
}
if (collides_ball_sideline()) {
ball.y_velocity = ball.y_velocity*-1;
}
}
// collision detection
function collides_ball_racket() {
return racket.x + racket.width > ball.x - ball.radius &&
racket.y + racket.height > ball.y + ball.radius &&
racket.y < ball.y - ball.radius;
}
function collides_ball_sideline() {
return court.y > ball.y - ball.radius ||
court.y + court.height < ball.y + ball.radius;
}
function collides_ball_baseline() {
return court.x > ball.x - ball.radius ||
court.x + court.width < ball.x + ball.radius;
}
/**
function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
});
enemies.forEach(function(enemy) {
if (collides(enemy, player)) {
enemy.explode();
player.explode();
}
});
}
*/
</script>
</body>
</html>
No comments:
Post a Comment