208 lines
4.7 KiB
HTML
208 lines
4.7 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">
|
|
</div>
|
|
|
|
<script>
|
|
// "use strict";
|
|
|
|
var player1;
|
|
var player2;
|
|
var score1;
|
|
var score2;
|
|
var ball;
|
|
|
|
var playerSpeed = 2;
|
|
|
|
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;
|
|
|
|
// 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);
|
|
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);
|
|
|
|
// 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: new Map(),
|
|
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");
|
|
// document.body.insertBefore(this.canvas, document.body.childNodes[0]);
|
|
document.getElementById("canvas-container").appendChild(this.canvas);
|
|
},
|
|
start : function() {
|
|
this.interval = setInterval(gameLoop, 20);
|
|
window.addEventListener('keydown', function (e) {
|
|
myGameArea.keys.set(e.key, true);
|
|
})
|
|
window.addEventListener('keyup', function (e) {
|
|
myGameArea.keys.set(e.key, false);
|
|
})
|
|
},
|
|
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.speedX = 0;
|
|
this.speedY = 0;
|
|
this.update = function() {
|
|
ctx = myGameArea.context;
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
this.newPos = function() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
}
|
|
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();
|
|
playerMove();
|
|
// ball.x += -0.5;
|
|
// ball.y += +0.2;
|
|
draw();
|
|
drawGrid();
|
|
}
|
|
|
|
function draw() {
|
|
myGameArea.clear();
|
|
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 playerMove() {
|
|
player1.speedX = 0;
|
|
player1.speedY = 0;
|
|
if ( myGameArea.keys.get("a") )
|
|
{ player1.speedX += -playerSpeed; }
|
|
if ( myGameArea.keys.get("d") )
|
|
{ player1.speedX += playerSpeed; }
|
|
if ( myGameArea.keys.get("w") )
|
|
{ player1.speedY += -playerSpeed; }
|
|
if ( myGameArea.keys.get("s") )
|
|
{ player1.speedY += playerSpeed; }
|
|
player1.newPos();
|
|
|
|
player2.speedX = 0;
|
|
player2.speedY = 0;
|
|
if ( myGameArea.keys.get("ArrowLeft") )
|
|
{ player2.speedX += -playerSpeed; }
|
|
if ( myGameArea.keys.get("ArrowRight") )
|
|
{ player2.speedX += playerSpeed; }
|
|
if ( myGameArea.keys.get("ArrowUp") )
|
|
{ player2.speedY += -playerSpeed; }
|
|
if ( myGameArea.keys.get("ArrowDown") )
|
|
{ player2.speedY += playerSpeed; }
|
|
player2.newPos();
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|