mirror of
https://github.com/neogeek23/neogeek23.github.io.git
synced 2026-02-04 02:48:17 +00:00
Add files via upload
This commit is contained in:
GitHub
parent
15e8138176
commit
22aebd426e
36
pong/pong.css
Normal file
36
pong/pong.css
Normal 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
17
pong/pong.html
Normal 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
155
pong/pong.js
Normal 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user