265 lines
5.8 KiB
HTML
265 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
<style>
|
|
#canvas-container {
|
|
text-align: center;
|
|
border: dashed red 5px;
|
|
/* max-height: 80vh; */
|
|
/* overflow: hidden; */
|
|
}
|
|
canvas {
|
|
background-color: #333333;
|
|
max-width: 90vw;
|
|
/* max-height: 100vh; */
|
|
/* width: 80%; */
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body onload="startGame()">
|
|
|
|
<div id="canvas-container">
|
|
<!-- <p> =) </p> -->
|
|
</div>
|
|
|
|
<script>
|
|
// "use strict";
|
|
|
|
var gridDisplay = true;
|
|
|
|
function startGame()
|
|
{
|
|
myGameArea.createGameArea();
|
|
|
|
// Const
|
|
const w = myGameArea.canvas.width;
|
|
const h = myGameArea.canvas.height;
|
|
const w_mid = w/2;
|
|
const h_mid = h/2;
|
|
const pw = w/50;
|
|
const ph = pw*5;
|
|
const ball_size = pw; // const ball_size = w/50;
|
|
const score_size = w/16;
|
|
const wall_size = w/100;
|
|
const playerSpeed = w/150;
|
|
const ballSpeed = w/150;
|
|
|
|
// Component
|
|
player1 = new component(pw, ph, "white", 0+w/50, h_mid-ph/2);
|
|
player2 = new component(pw, ph, "white", w-w/50-pw, h_mid-ph/2);
|
|
ball = new component(ball_size, ball_size, "white", w_mid-ball_size/2, h_mid-ball_size/2);
|
|
player1.speed = playerSpeed;
|
|
player2.speed = playerSpeed;
|
|
ball.speed = ballSpeed;
|
|
ball.dirX = -0.5;
|
|
ball.dirY = +0.5;
|
|
score1 = new score(score_size+"px", "Consolas", "white", w_mid-w/8, w/12);
|
|
score2 = new score(score_size+"px", "Consolas", "white", w_mid+w/8-score_size/2, w/12);
|
|
|
|
wall_top = new component(w, wall_size, "grey", 0, 0);
|
|
wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size);
|
|
|
|
// Grid
|
|
const grid_size = w/500;
|
|
w_grid_mid = new component(w, grid_size, "darkgreen", 0, h_mid);
|
|
w_grid_u1 = new component(w, grid_size, "darkgreen", 0, h/4);
|
|
w_grid_d1 = new component(w, grid_size, "darkgreen", 0, h-h/4);
|
|
h_grid_mid = new component(grid_size, h, "darkgreen", w_mid, 0);
|
|
h_grid_u1 = new component(grid_size, h, "darkgreen", w/4, 0);
|
|
h_grid_d1 = new component(grid_size, h, "darkgreen", w-w/4, 0);
|
|
|
|
myGameArea.start();
|
|
}
|
|
|
|
var myGameArea = {
|
|
keys: [],
|
|
canvas : document.createElement("canvas"),
|
|
createGameArea : function() {
|
|
/* ratio 5/3 (1.66) */
|
|
var ratio = 1.66666;
|
|
this.canvas.width = 1500;
|
|
this.canvas.height = this.canvas.width / ratio;
|
|
this.context = this.canvas.getContext("2d");
|
|
var container = document.getElementById("canvas-container");
|
|
container.insertBefore(this.canvas, container.childNodes[0]);
|
|
},
|
|
start : function() {
|
|
this.interval = setInterval(gameLoop, 20);
|
|
window.addEventListener('keydown', function (e)
|
|
{ myGameArea.addKey(e.key); })
|
|
window.addEventListener('keyup', function (e)
|
|
{ myGameArea.deleteKey(e.key); })
|
|
},
|
|
addKey : function(key) {
|
|
key = key.toLowerCase();
|
|
var i = myGameArea.keys.indexOf(key);
|
|
if (i == -1)
|
|
myGameArea.keys.push(key);
|
|
},
|
|
deleteKey : function(key) {
|
|
key = key.toLowerCase();
|
|
var i = myGameArea.keys.indexOf(key);
|
|
if (i != -1)
|
|
myGameArea.keys.splice(i, 1);
|
|
},
|
|
clear : function() {
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
},
|
|
stop : function() {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
|
|
function score(size, font, color, x, y)
|
|
{
|
|
this.size = size;
|
|
this.font = font;
|
|
this.color = color;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.text = "0";
|
|
this.update = function() {
|
|
ctx = myGameArea.context;
|
|
ctx.font = this.size + " " + this.font;
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillText(this.text, this.x, this.y);
|
|
}
|
|
}
|
|
|
|
function component(width, height, color, x, y)
|
|
{
|
|
this.width = width;
|
|
this.height = height;
|
|
this.color = color;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.dirX = 0;
|
|
this.dirY = 0;
|
|
this.speed = 1.0;
|
|
this.update = function() {
|
|
ctx = myGameArea.context;
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
this.move = function() {
|
|
this.x += this.dirX * this.speed;
|
|
this.y += this.dirY * this.speed;
|
|
}
|
|
this.collision = function(collider) { // From W3schools. To redo.
|
|
var myleft = this.x;
|
|
var myright = this.x + (this.width);
|
|
var mytop = this.y;
|
|
var mybottom = this.y + (this.height);
|
|
var otherleft = collider.x;
|
|
var otherright = collider.x + (collider.width);
|
|
var othertop = collider.y;
|
|
var otherbottom = collider.y + (collider.height);
|
|
if ((mybottom < othertop) ||
|
|
(mytop > otherbottom) ||
|
|
(myright < otherleft) ||
|
|
(myleft > otherright)) {
|
|
return false;
|
|
}
|
|
else
|
|
return true;
|
|
}
|
|
this.bounce = function() { // WIP
|
|
ball.dirX = ball.dirX * -1;
|
|
ball.dirY = ball.dirY * -1;
|
|
}
|
|
}
|
|
|
|
function gameLoop()
|
|
{
|
|
handleInput();
|
|
|
|
ball.move();
|
|
if (ball.collision(wall_top))
|
|
ball.bounce();
|
|
if (ball.collision(wall_bottom))
|
|
ball.bounce();
|
|
if (ball.collision(player1))
|
|
ball.bounce();
|
|
if (ball.collision(player2))
|
|
ball.bounce();
|
|
|
|
draw();
|
|
}
|
|
|
|
function draw()
|
|
{
|
|
myGameArea.clear();
|
|
|
|
if (gridDisplay)
|
|
drawGrid();
|
|
|
|
wall_top.update();
|
|
wall_bottom.update();
|
|
player1.update();
|
|
player2.update();
|
|
ball.update();
|
|
score1.update();
|
|
score2.update();
|
|
}
|
|
|
|
function drawGrid()
|
|
{
|
|
w_grid_mid.update();
|
|
w_grid_u1.update();
|
|
w_grid_d1.update();
|
|
|
|
h_grid_mid.update();
|
|
h_grid_u1.update();
|
|
h_grid_d1.update();
|
|
}
|
|
|
|
function handleInput()
|
|
{
|
|
var keys = myGameArea.keys;
|
|
if (keys.length == 0)
|
|
return;
|
|
|
|
if (keys.indexOf("g") != -1)
|
|
{
|
|
gridDisplay = !gridDisplay;
|
|
myGameArea.deleteKey("g");
|
|
}
|
|
playerMove(keys);
|
|
}
|
|
|
|
function playerMove(keys)
|
|
{
|
|
player1.dirY = 0;
|
|
if (keys.indexOf("w") != -1)
|
|
{ player1.dirY += -1; }
|
|
if (keys.indexOf("s") != -1)
|
|
{ player1.dirY += 1; }
|
|
player1.move();
|
|
if (player1.collision(wall_top) || player1.collision(wall_bottom))
|
|
{
|
|
player1.dirY = player1.dirY * -1;
|
|
player1.move();
|
|
}
|
|
|
|
player2.dirY = 0;
|
|
if (keys.indexOf("ArrowUp".toLowerCase()) != -1)
|
|
{ player2.dirY += -1; }
|
|
if (keys.indexOf("ArrowDown".toLowerCase()) != -1)
|
|
{ player2.dirY += 1; }
|
|
player2.move();
|
|
if (player2.collision(wall_top) || player2.collision(wall_bottom))
|
|
{
|
|
player2.dirY = player2.dirY * -1;
|
|
player2.move();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|