added wall
+ inputs adjustements
This commit is contained in:
LuckyLaszlo
131
pong.html
131
pong.html
@@ -18,18 +18,13 @@ canvas {
|
||||
<body onload="startGame()">
|
||||
|
||||
<div id="canvas-container">
|
||||
<!-- <p> =) </p> -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// "use strict";
|
||||
|
||||
var player1;
|
||||
var player2;
|
||||
var score1;
|
||||
var score2;
|
||||
var ball;
|
||||
|
||||
var playerSpeed = 2;
|
||||
var gridDisplay = true;
|
||||
|
||||
function startGame() {
|
||||
myGameArea.createGameArea();
|
||||
@@ -43,13 +38,22 @@ function startGame() {
|
||||
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);
|
||||
@@ -64,7 +68,7 @@ function startGame() {
|
||||
}
|
||||
|
||||
var myGameArea = {
|
||||
keys: new Map(),
|
||||
keys: [],
|
||||
canvas : document.createElement("canvas"),
|
||||
createGameArea : function() {
|
||||
this.canvas.width = 500;
|
||||
@@ -72,17 +76,25 @@ var myGameArea = {
|
||||
// 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);
|
||||
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.keys.set(e.key, true);
|
||||
})
|
||||
window.addEventListener('keyup', function (e) {
|
||||
myGameArea.keys.set(e.key, false);
|
||||
})
|
||||
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);
|
||||
@@ -113,16 +125,17 @@ function component(width, height, color, x, y) {
|
||||
this.color = color;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.speedX = 0;
|
||||
this.speedY = 0;
|
||||
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.newPos = function() {
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
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;
|
||||
@@ -147,20 +160,28 @@ function component(width, height, color, x, y) {
|
||||
function gameLoop() {
|
||||
if (ball.crashWith(player1))
|
||||
myGameArea.stop();
|
||||
playerMove();
|
||||
// ball.x += -0.5;
|
||||
// ball.y += +0.2;
|
||||
handleInput();
|
||||
|
||||
ball.dirX = -0.5;
|
||||
ball.dirY = +0.5;
|
||||
ball.move();
|
||||
|
||||
draw();
|
||||
drawGrid();
|
||||
}
|
||||
|
||||
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() {
|
||||
@@ -173,35 +194,47 @@ function drawGrid() {
|
||||
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();
|
||||
function handleInput() {
|
||||
var keys = myGameArea.keys;
|
||||
if (keys.length == 0)
|
||||
return;
|
||||
|
||||
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();
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user