42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added wall

Browse Source 
+ inputs adjustements
This commit is contained in:
LuckyLaszlo
2022-10-15 23:28:03 +02:00
parent 03835c3c2b
commit 0a7fb20857
1 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
pong.html
View File

@@ -18,18 +18,13 @@ canvas {
<body onload="startGame()"> <body onload="startGame()">
<div id="canvas-container"> <div id="canvas-container">
<!-- <p> =) </p> -->
</div> </div>
<script> <script>
// "use strict"; // "use strict";
var player1; var gridDisplay = true;
var player2;
var score1;
var score2;
var ball;
var playerSpeed = 2;
function startGame() { function startGame() {
myGameArea.createGameArea(); myGameArea.createGameArea();
@@ -43,14 +38,23 @@ function startGame() {
const ph = pw*5; const ph = pw*5;
const ball_size = pw; // const ball_size = w/50; const ball_size = pw; // const ball_size = w/50;
const score_size = w/16; const score_size = w/16;
const wall_size = w/100;
const playerSpeed = w/150;
const ballSpeed = w/150;
// Component // Component
player1 = new component(pw, ph, "white", 0+w/50, h_mid-ph/2); 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); 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); 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); 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); 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 // Grid
w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid); w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
w_grid_u1 = new component(w, 1, "yellow", 0, h/4); w_grid_u1 = new component(w, 1, "yellow", 0, h/4);
@@ -64,7 +68,7 @@ function startGame() {
} }
var myGameArea = { var myGameArea = {
keys: new Map(), keys: [],
canvas : document.createElement("canvas"), canvas : document.createElement("canvas"),
createGameArea : function() { createGameArea : function() {
this.canvas.width = 500; this.canvas.width = 500;
@@ -72,17 +76,25 @@ var myGameArea = {
// var heightRatio = 1; // var heightRatio = 1;
// this.canvas.height = this.canvas.width * heightRatio; // this.canvas.height = this.canvas.width * heightRatio;
this.context = this.canvas.getContext("2d"); this.context = this.canvas.getContext("2d");
// document.body.insertBefore(this.canvas, document.body.childNodes[0]); var container = document.getElementById("canvas-container");
document.getElementById("canvas-container").appendChild(this.canvas); container.insertBefore(this.canvas, container.childNodes[0]);
}, },
start : function() { start : function() {
this.interval = setInterval(gameLoop, 20); this.interval = setInterval(gameLoop, 20);
window.addEventListener('keydown', function (e) { window.addEventListener('keydown', function (e)
myGameArea.keys.set(e.key, true); { myGameArea.addKey(e.key); })
}) window.addEventListener('keyup', function (e)
window.addEventListener('keyup', function (e) { { myGameArea.deleteKey(e.key); })
myGameArea.keys.set(e.key, false); },
}) 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() { clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 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.color = color;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.speedX = 0; this.dirX = 0;
this.speedY = 0; this.dirY = 0;
this.speed = 1.0;
this.update = function() { this.update = function() {
ctx = myGameArea.context; ctx = myGameArea.context;
ctx.fillStyle = this.color; ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height); ctx.fillRect(this.x, this.y, this.width, this.height);
} }
this.newPos = function() { this.move = function() {
this.x += this.speedX; this.x += this.dirX * this.speed;
this.y += this.speedY; this.y += this.dirY * this.speed;
} }
this.crashWith = function(otherobj) { // From W3schools. To redo. this.crashWith = function(otherobj) { // From W3schools. To redo.
var myleft = this.x; var myleft = this.x;
@@ -147,20 +160,28 @@ function component(width, height, color, x, y) {
function gameLoop() { function gameLoop() {
if (ball.crashWith(player1)) if (ball.crashWith(player1))
myGameArea.stop(); myGameArea.stop();
playerMove(); handleInput();
// ball.x += -0.5;
// ball.y += +0.2; ball.dirX = -0.5;
ball.dirY = +0.5;
ball.move();
draw(); draw();
drawGrid();
} }
function draw() { function draw() {
myGameArea.clear(); myGameArea.clear();
if (gridDisplay)
drawGrid();
player1.update(); player1.update();
player2.update(); player2.update();
ball.update(); ball.update();
score1.update(); score1.update();
score2.update(); score2.update();
wall_top.update();
wall_bottom.update();
} }
function drawGrid() { function drawGrid() {
@@ -173,35 +194,47 @@ function drawGrid() {
h_grid_d1.update(); h_grid_d1.update();
} }
function playerMove() { function handleInput() {
player1.speedX = 0; var keys = myGameArea.keys;
player1.speedY = 0; if (keys.length == 0)
if ( myGameArea.keys.get("a") ) return;
{ 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; if (keys.indexOf("g") != -1)
player2.speedY = 0; {
if ( myGameArea.keys.get("ArrowLeft") ) gridDisplay = !gridDisplay;
{ player2.speedX += -playerSpeed; } myGameArea.deleteKey("g");
if ( myGameArea.keys.get("ArrowRight") ) }
{ player2.speedX += playerSpeed; } playerMove(keys);
if ( myGameArea.keys.get("ArrowUp") ) }
{ player2.speedY += -playerSpeed; }
if ( myGameArea.keys.get("ArrowDown") ) function playerMove(keys) {
{ player2.speedY += playerSpeed; } player1.dirX = 0;
player2.newPos(); 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> </script>
</body> </body>
</html> </html>