bstein/neogeek23.github.io
1
0
Fork 0
mirror of https://github.com/neogeek23/neogeek23.github.io.git synced 2026-02-04 10:58:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Brad Stein 2018-01-03 02:30:09 -06:00 committed by GitHub
parent 15e8138176
commit 22aebd426e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pong/pong.css Normal file
View File

@ -0,0 +1,36 @@
body{
text-align: center;
background-color: black;
color:white;
}
#board{
width: calc(95% - 2px);
margin-top: 5%;
border: 1px white solid;
border-radius: 4px;
}
.human_points,
.bot_points{
margin-top: 2.5%;
display: inline-block;
}
.human_points{
position: absolute;
left: 5%;
}
.bot_points{
position: absolute;
right: calc(4% + 3ch);
}
.human_points:before{
content: 'Home Team: ';
}
.bot_points:before{
content: 'Hal Team: ';
}

17
pong/pong.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beep-Boop</title>
<script src="pong.js"></script>
<link rel="stylesheet" href="pong.css">
</head>
<body>
<div class="instructions">Game is controlled via mouse. Hover your mouse to control the green paddel. First to ten wins and halts game. Three cheers for the home team!</div>
<canvas id="board"></canvas>
<div class="score_zone">
<div class="human_points">0</div>
<div class="bot_points">0</div>
</div>
</body>
</html>

155
pong/pong.js Normal file
View File

@ -0,0 +1,155 @@
window.onload=function(){
fps = 30;
ms_in_sec = 1000;
paddel_h = 35;
paddel_w = 4;
AI_speed = 5;
ball_speed = 6;
setup()
};
function setup(){
var canvas = document.getElementById("board");
var canvas_context = canvas.getContext('2d');
var human = new Paddel(0, 0, paddel_w, paddel_h, "green", canvas_context);
var bot = new Paddel(canvas.width - paddel_w, canvas.height - paddel_h, paddel_w, paddel_h, "red", canvas_context);
var ball = new Ball(canvas.width/2, canvas.height/2, paddel_w/1.5, "blue", canvas_context);
game = window.setInterval(function(){update(canvas, canvas_context, human, bot, ball)}, ms_in_sec/fps);
window.addEventListener("mousemove", function(e){human.follow_mouse(e)}, false);
}
function update(canvas, canvas_context, human, bot, ball){
paint_background(canvas, canvas_context);
ball.paint();
human.paint();
bot.paint()
bot.move(ball);
ball.move(human, bot);
};
function paint_background(canvas, canvas_context){
canvas_context.fillStyle = "white";
canvas_context.fillRect(0,0, canvas.width, canvas.height);
};
class Paddel{
constructor(x, y, w, h, color, board){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.mid_y = y + h/2;
this.color = color;
this.board = board;
this.points = 0;
}
follow_mouse(event){
var c = this.board.canvas.getBoundingClientRect();
var scale_y = this.board.canvas.height/c.height;
this.y = (event.clientY - c.top)*scale_y - this.h/2;
this.mid_y = this.y + this.h/2;
}
move(ball){
if (this.mid_y < ball.get_y()){
this.y += AI_speed;
} else {
this.y -= AI_speed;
}
this.mid_y = this.y + this.h/2;
}
get_y(){
return this.y;
}
get_h(){
return this.h;
}
get_mid_y(){
return this.mid_y;
}
paint(){
this.board.fillStyle = this.color;
this.board.fillRect(this.x, this.y, this.w, this.h);
}
score(){
this.points++;
if(this.color == "red"){
document.getElementsByClassName("bot_points")[0].innerHTML = this.points.toString();
} else{
document.getElementsByClassName("human_points")[0].innerHTML = this.points.toString();
}
if(this.points == 10){
clearInterval(game);
window.removeEventListener("mousemove", function(e){this.follow_mouse(e)}, true);
}
}
}
class Ball{
constructor(x, y, r, color, board){
this.x = x;
this.y = y;
this.vx = Math.random() * ball_speed + 2;
this.vy = Math.random() * ball_speed + 2;
this.r = r;
this.color = color;
this.board = board;
}
get_y(){
return this.y;
}
paint(){
this.board.fillStyle = this.color;
this.board.beginPath();
this.board.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
this.board.closePath();
this.board.fill();
}
reset(){
this.x = this.board.canvas.width/2;
this.y = this.board.canvas.height/2;
this.vx = Math.random() * ball_speed + 2;
this.vy = Math.random() * ball_speed + 2;
}
move(left, right){
this.x += this.vx;
this.y += this.vy;
if ((this.y < 0 && this.vy < 0) || (this.y > this.board.canvas.height && this.vy > 0)){
this.vy = -this.vy;
}
if (this.x < 0){
if(this.y > left.get_y() && this.y < (left.get_y() + left.get_h())){
this.vx = -this.vx;
this.vy = (this.y - left.get_mid_y());
} else {
right.score();
this.reset();
}
}
if (this.x > this.board.canvas.width){
if(this.y > right.get_y() && this.y < (right.get_y() + right.get_h())){
this.vx = -this.vx;
this.vy = (this.y - right.get_mid_y());
} else {
left.score();
this.reset();
}
}
}
}