241 lines
5.3 KiB
HTML
241 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
<style>
|
|
#canvas-container {
|
|
text-align: center;
|
|
}
|
|
canvas {
|
|
border:1px solid #d3d3d3;
|
|
background-color: #333333;
|
|
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;
|
|
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, "white", 0, 0);
|
|
wall_bottom = new component(w, wall_size, "white", 0, h-wall_size);
|
|
|
|
// Grid
|
|
w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
|
|
w_grid_u1 = new component(w, 1, "yellow", 0, h/4);
|
|
w_grid_d1 = new component(w, 1, "yellow", 0, h-h/4);
|
|
|
|
h_grid_mid = new component(1, h, "darkgreen", w_mid, 0);
|
|
h_grid_u1 = new component(1, h, "yellow", w/4, 0);
|
|
h_grid_d1 = new component(1, h, "yellow", w-w/4, 0);
|
|
|
|
myGameArea.start();
|
|
}
|
|
|
|
var myGameArea = {
|
|
keys: [],
|
|
canvas : document.createElement("canvas"),
|
|
createGameArea : function() {
|
|
this.canvas.width = 500;
|
|
this.canvas.height = 300;
|
|
// var heightRatio = 1;
|
|
// this.canvas.height = this.canvas.width * heightRatio;
|
|
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) {
|
|
var i = myGameArea.keys.indexOf(key);
|
|
if (i == -1)
|
|
myGameArea.keys.push(key);
|
|
},
|
|
deleteKey : function(key) {
|
|
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.crashWith = function(otherobj) { // 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 = otherobj.x;
|
|
var otherright = otherobj.x + (otherobj.width);
|
|
var othertop = otherobj.y;
|
|
var otherbottom = otherobj.y + (otherobj.height);
|
|
var crash = true;
|
|
if ((mybottom < othertop) ||
|
|
(mytop > otherbottom) ||
|
|
(myright < otherleft) ||
|
|
(myleft > otherright)) {
|
|
crash = false;
|
|
}
|
|
return crash;
|
|
}
|
|
}
|
|
|
|
function gameLoop() {
|
|
if (ball.crashWith(player1))
|
|
myGameArea.stop();
|
|
handleInput();
|
|
|
|
ball.dirX = -0.5;
|
|
ball.dirY = +0.5;
|
|
ball.move();
|
|
|
|
draw();
|
|
}
|
|
|
|
function draw() {
|
|
myGameArea.clear();
|
|
|
|
if (gridDisplay)
|
|
drawGrid();
|
|
|
|
player1.update();
|
|
player2.update();
|
|
ball.update();
|
|
score1.update();
|
|
score2.update();
|
|
wall_top.update();
|
|
wall_bottom.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.dirX = 0;
|
|
player1.dirY = 0;
|
|
if (keys.indexOf("a") != -1)
|
|
{ player1.dirX += -1; }
|
|
if (keys.indexOf("d") != -1)
|
|
{ player1.dirX += 1; }
|
|
if (keys.indexOf("w") != -1)
|
|
{ player1.dirY += -1; }
|
|
if (keys.indexOf("s") != -1)
|
|
{ player1.dirY += 1; }
|
|
player1.move();
|
|
|
|
player2.dirX = 0;
|
|
player2.dirY = 0;
|
|
if (keys.indexOf("ArrowLeft") != -1)
|
|
{ player2.dirX += -1; }
|
|
if (keys.indexOf("ArrowRight") != -1)
|
|
{ player2.dirX += 1; }
|
|
if (keys.indexOf("ArrowUp") != -1)
|
|
{ player2.dirY += -1; }
|
|
if (keys.indexOf("ArrowDown") != -1)
|
|
{ player2.dirY += 1; }
|
|
player2.move();
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|