Skip to content

Instantly share code, notes, and snippets.

@ylluminate

ylluminate/index.html Secret

Created April 11, 2014 01:50
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<center>
<h1 id="header">Pong</h1>
<h4 id="author">by <a href="http://www.codecademy.com/">Codecademy</a> user <a href="http://www.codecademy.com/ylluminarious">Codicus Wings</a></h4>
<div class="instructions">
<p><strong>Click on the field</strong> and <strong>press the spacebar</strong> to start.</p>
<p>Use <strong>W</strong> and <strong>S</strong> or <strong>&uarr;</strong> and <strong>&darr;</strong> to move up and down.</p>
<p>Score <strong>10 points</strong> to win. Good luck!</p>
</div>
<canvas id="canvas" height="500" width="700">
This text is displayed if your browser doesn't support the HTML5 Canvas element.
</canvas>
</center>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
var canvas = document.getElementById("canvas");
// Frames per second.
var FPS = 50;
// Context of the canvas.
var context = canvas.getContext("2d");
// Halfway line of the playing field.
var halfwayLine = {
x: 347.5,
y: 0,
color: "white",
width: 5,
height: canvas.height,
draw: function () {
context.fillStyle = this.color;
context.fillRect(this.x, this.y, this.width, this.height);
}
};
// Ball object.
var ball = {
x: 350,
y: 250,
velocityX: 0,
velocityY: 0,
radius: 15,
color: "white",
// Draw the ball.
draw: function () {
context.fillStyle = this.color;
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
context.fill();
},
update: function () {
// Update position; x + velocity for the x axis / frames per second = x (velocity is measured in pixels per second / frames per second).
this.x += this.velocityX / FPS;
// Update position; y + velocity for the y axis / frames per second = y (velocity is measured in pixels per second / frames per second).
this.y += this.velocityY / FPS;
// ---------- Collision code for the ball ----------
// Top wall collision.
if ( (this.y - this.radius) < 0 ) {
this.y = this.radius;
this.velocityY = -this.velocityY;
}
// Bottom wall collision.
if ( (this.y + this.radius) > canvas.height ) {
this.y = canvas.height - this.radius;
this.velocityY = -this.velocityY;
}
// Right paddle collison on the front side of the paddle.
if ( (this.x + this.radius) > rightPaddle.x ) {
if ( this.y > rightPaddle.y ) {
if ( this.y < (rightPaddle.y + rightPaddle.height) ) {
this.x = rightPaddle.x - this.radius;
this.velocityX = -this.velocityX;
}
}
}
// Right paddle collision on the top side of the paddle.
if ( (this.x + this.radius) > rightPaddle.x ) {
if ( (this.y + this.radius) > rightPaddle.y ) {
if ( (this.y + this.radius) < (rightPaddle.y + rightPaddle.height) ) {
this.y = rightPaddle.y - this.radius;
this.velocityY = -this.velocityY;
}
}
}
// Right paddle collision on the bottom side of the paddle.
if ( (this.x + this.radius) > rightPaddle.x ) {
if ( (this.y - this.radius) < (rightPaddle.y + rightPaddle.height) ) {
if ( (this.y - this.radius) > rightPaddle.y ) {
this.y = (rightPaddle.y + rightPaddle.height) + this.radius;
this.velocityY = -this.velocityY;
}
}
}
// Left paddle collision on the front side of the paddle.
if ( (this.x - this.radius) < (leftPaddle.x + leftPaddle.width) ) {
if ( this.y > leftPaddle.y ) {
if ( this.y < (leftPaddle.y + leftPaddle.height) ) {
this.x = (leftPaddle.x + leftPaddle.width) + this.radius;
this.velocityX = -this.velocityX;
}
}
}
// Left paddle collision on the top side of the paddle.
if ( (this.x - this.radius) < (leftPaddle.x + leftPaddle.width) ) {
if ( (this.y + this.radius) > leftPaddle.y ) {
if ( (this.y + this.radius) < (leftPaddle.y + leftPaddle.height) ) {
this.y = leftPaddle.y - this.radius;
this.velocityY = -this.velocityY;
}
}
}
// Left paddle collision on the bottom side of the paddle.
if ( (this.x - this.radius) < (leftPaddle.x + leftPaddle.width) ) {
if ( (this.y - this.radius) < (leftPaddle.y + leftPaddle.height) ) {
if ( (this.y - this.radius) > leftPaddle.y ) {
this.y = (leftPaddle.y + leftPaddle.height) + this.radius;
this.velocityY = -this.velocityY;
}
}
}
// ********** Collision code for the ball **********
// Restart at center when the ball leaves the field and score a point for the paddle that scored.
if ( (this.x - this.radius) > canvas.width ) {
this.x = 350;
this.y = 250;
leftPaddle.score++;
}
if ( (this.x + this.radius) < 0 ) {
this.x = 350;
this.y = 250;
rightPaddle.score++;
}
}
};
// Controls for the right paddle when a key is pressed.
window.onkeydown = function (input) {
// IE code.
input = input || window.event;
var code = input.keyCode;
// If key pressed is the spacebar...
if (code === 32) {
// ...set the ball's velocity on the x axis to -400 and the velocity on the y axis to 400.
ball.velocityX = -400;
ball.velocityY = 400;
}
// If key pressed is up arrow or w and and the paddle's y coordinate is greater than 0...
if (code === 38 || code === 87) {
if (rightPaddle.y > 0) {
// ... make the paddle's velocity 250 upwards.
rightPaddle.velocityY = -250;
}
// If key pressed is down arrow or s and the bottom of the paddle is less than the field's height...
} else if (code === 40 || code === 83) {
if ( (rightPaddle.y + rightPaddle.height) < canvas.height ) {
// ... make the paddle's velocity 250 downwards.
rightPaddle.velocityY = 250;
}
}
};
// Controls for the right paddle when a key is released.
window.onkeyup = function (input) {
// IE code.
input = input || window.event;
var code = input.keyCode;
// If up arrow or w is released...
if (code === 38 || code === 87) {
// ... set the paddle's velocity to 0.
rightPaddle.velocityY = 0;
// If down arrow or s is released...
} else if (code === 40 || code === 83) {
// ... set the paddle's velocity to 0.
rightPaddle.velocityY = 0;
}
};
// Right paddle object (AKA, the player's paddle).
var rightPaddle = {
x: 670,
y: 175,
velocityY: 0,
width: 30,
height: 150,
score: 0,
color: "white",
// Draw the right paddle.
draw: function () {
context.fillStyle = this.color;
context.fillRect(this.x, this.y, this.width, this.height);
context.font = "50px Courier";
context.fillText(this.score, 507.5, 70);
},
update: function () {
// Update position; y + velocity / frames per second = y (velocity is measured in pixels per second / frames per second).
this.y += this.velocityY / FPS;
// Make the velocity 0 if the top wall is hit.
if (this.y < 0) {
this.velocityY = 0;
}
// Make the velocity 0 if the bottom wall is hit.
if ( (this.y + this.height) > canvas.height ) {
this.velocityY = 0;
}
}
};
// Left paddle object (AKA, the AI's paddle).
var leftPaddle = {
x: 0,
y: 175,
velocityY: 0,
width: 30,
height: 150,
color: "white",
score: 0,
// Draw the left paddle.
draw: function () {
context.fillStyle = this.color;
context.fillRect(this.x, this.y, this.width, this.height);
context.font = "50px Courier";
context.fillText(this.score, 160, 70);
},
update: function () {
// Update position; y + velocity / frames per second = y (velocity is measured in pixels per second / frames per second).
this.y += this.velocityY / FPS;
// ---------- AI code ----------
// If the ball's y coordinate is less than the center coordinate of the paddle...
if ( ball.y < (this.y + this.height / 2) ) {
// ... make the paddle's velocity 375 upwards.
this.velocityY = -315;
}
// If the ball's y coordinate is greater than the center coordinate of the paddle...
if ( ball.y > (this.y + this.height / 2) ) {
// ...make the paddle's velocity 375 downwards.
this.velocityY = 315;
}
// If the paddle's y coordinate is less than 0...
if ( this.y < 0 && ball.y < (this.y + this.height / 2) ) {
// ...reverse the paddle's velocity.
this.velocityY = 0;
}
// If the bottom of the paddle is greater than the field's height...
if ( (this.y + this.height) > canvas.height && ball.y > (this.y + this.height / 2) ) {
// ...reverse the paddle's velocity.
this.velocityY = 0;
}
// ********** AI code **********
}
};
function draw () {
context.clearRect(0, 0, canvas.width, canvas.height);
halfwayLine.draw();
ball.draw();
rightPaddle.draw();
leftPaddle.draw();
}
function update () {
ball.update();
rightPaddle.update();
leftPaddle.update();
}
function tick () {
draw();
update();
// If the AI wins
if ( leftPaddle.score >= 10 ) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = "20px Courier";
context.fillText("You lost :(", 300, 230);
context.fillText("Reload to play again. Thanks for playing!", 110, 260);
}
// If the player wins
if ( rightPaddle.score >= 10 ) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = "20px Courier";
context.fillText("You won! :)", 300, 230);
context.fillText("Reload to play again. Thanks for playing!", 110, 260);
}
}
window.setInterval(tick, 1000 / FPS);
Raw
style.css
#canvas {
border-style: solid;
border-color: white;
background-color: black;
}
#header {
font-family: Courier;
cursor: default;
}
#author {
cursor: default;
font-family: Courier;
}
.instructions {
font-family: Verdana;
background-color: #6699CC;
border-radius: 5;
width: 500;
}
a:first-child {
text-decoration: none;
color: blue;
}
a:nth-child(2) {
text-decoration: none;
color: lightblue;
}
a:hover {
text-decoration: underline;
}
body {
background-color: gray;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment