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

miscs littles adjustements

Browse Source
This commit is contained in:
LuckyLaszlo
2022-10-16 20:08:24 +02:00
parent 0cca04e350
commit 6b495399c0
1 changed files with 57 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
pong.html
View File

@@ -12,7 +12,7 @@
}
canvas {
background-color: #333333;
max-width: 90vw;
max-width: 75vw;
/* max-height: 100vh; */
/* width: 80%; */
}
@@ -28,23 +28,23 @@ canvas {
<script>
// "use strict";
var gridDisplay = true;
var gridDisplay = false;
function startGame()
{
myGameArea.createGameArea();
gameArea.createGameArea();
// Const
const w = myGameArea.canvas.width;
const h = myGameArea.canvas.height;
const w_mid = w/2;
const h_mid = h/2;
w = gameArea.canvas.width;
h = gameArea.canvas.height;
w_mid = w/2;
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 playerSpeed = w/75;
const ballSpeed = w/150;
// Component
@@ -70,11 +70,14 @@ function startGame()
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);
// dashed line TODO
// midLine = new component(grid_size, h, "white", w_mid, 0);
myGameArea.start();
gameArea.start();
}
var myGameArea = {
var gameArea = {
keys: [],
canvas : document.createElement("canvas"),
createGameArea : function() {
@@ -82,31 +85,31 @@ var myGameArea = {
var ratio = 1.66666;
this.canvas.width = 1500;
this.canvas.height = this.canvas.width / ratio;
this.context = this.canvas.getContext("2d");
this.ctx = 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); })
{ gameArea.addKey(e.key); })
window.addEventListener('keyup', function (e)
{ myGameArea.deleteKey(e.key); })
{ gameArea.deleteKey(e.key); })
},
addKey : function(key) {
key = key.toLowerCase();
var i = myGameArea.keys.indexOf(key);
var i = gameArea.keys.indexOf(key);
if (i == -1)
myGameArea.keys.push(key);
gameArea.keys.push(key);
},
deleteKey : function(key) {
key = key.toLowerCase();
var i = myGameArea.keys.indexOf(key);
var i = gameArea.keys.indexOf(key);
if (i != -1)
myGameArea.keys.splice(i, 1);
gameArea.keys.splice(i, 1);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
@@ -122,7 +125,7 @@ function score(size, font, color, x, y)
this.y = y;
this.text = "0";
this.update = function() {
ctx = myGameArea.context;
ctx = gameArea.ctx;
ctx.font = this.size + " " + this.font;
ctx.fillStyle = this.color;
ctx.fillText(this.text, this.x, this.y);
@@ -140,7 +143,7 @@ function component(width, height, color, x, y)
this.dirY = 0;
this.speed = 1.0;
this.update = function() {
ctx = myGameArea.context;
ctx = gameArea.ctx;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
@@ -172,6 +175,35 @@ function component(width, height, color, x, y)
}
}
// Bad drawLine, TODO make a drawLine with fillRect()
function drawLine(start, end, color, pattern)
{
ctx = gameArea.ctx;
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(start[0], start[1]);
ctx.lineTo(end[0], end[1]);
ctx.strokeStyle = color;
ctx.stroke();
}
function line(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 = gameArea.ctx;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function gameLoop()
{
handleInput();
@@ -191,11 +223,13 @@ function gameLoop()
function draw()
{
myGameArea.clear();
gameArea.clear();
if (gridDisplay)
drawGrid();
// drawLine([w_mid, 0], [w_mid, h], "white", [10, 10]); // bad
wall_top.update();
wall_bottom.update();
player1.update();
@@ -218,14 +252,14 @@ function drawGrid()
function handleInput()
{
var keys = myGameArea.keys;
var keys = gameArea.keys;
if (keys.length == 0)
return;
if (keys.indexOf("g") != -1)
{
gridDisplay = !gridDisplay;
myGameArea.deleteKey("g");
gameArea.deleteKey("g");
}
playerMove(keys);
}