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

a little more responsive (a little)

Browse Source
This commit is contained in:
LuckyLaszlo
2022-10-16 17:14:59 +02:00
parent 0f98e3328e
commit 0cca04e350
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
pong.html
View File

@@ -6,11 +6,15 @@
<style> <style>
#canvas-container { #canvas-container {
text-align: center; text-align: center;
border: dashed red 5px;
/* max-height: 80vh; */
/* overflow: hidden; */
} }
canvas { canvas {
border:1px solid #d3d3d3;
background-color: #333333; background-color: #333333;
width: 80%; max-width: 90vw;
/* max-height: 100vh; */
/* width: 80%; */
} }
</style> </style>
@@ -59,13 +63,13 @@ function startGame()
wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size); wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size);
// Grid // Grid
w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid); const grid_size = w/500;
w_grid_u1 = new component(w, 1, "yellow", 0, h/4); w_grid_mid = new component(w, grid_size, "darkgreen", 0, h_mid);
w_grid_d1 = new component(w, 1, "yellow", 0, h-h/4); w_grid_u1 = new component(w, grid_size, "darkgreen", 0, h/4);
w_grid_d1 = new component(w, grid_size, "darkgreen", 0, h-h/4);
h_grid_mid = new component(1, h, "darkgreen", w_mid, 0); h_grid_mid = new component(grid_size, h, "darkgreen", w_mid, 0);
h_grid_u1 = new component(1, h, "yellow", w/4, 0); h_grid_u1 = new component(grid_size, h, "darkgreen", w/4, 0);
h_grid_d1 = new component(1, h, "yellow", w-w/4, 0); h_grid_d1 = new component(grid_size, h, "darkgreen", w-w/4, 0);
myGameArea.start(); myGameArea.start();
} }
@@ -74,10 +78,10 @@ var myGameArea = {
keys: [], keys: [],
canvas : document.createElement("canvas"), canvas : document.createElement("canvas"),
createGameArea : function() { createGameArea : function() {
this.canvas.width = 500; /* ratio 5/3 (1.66) */
this.canvas.height = 300; var ratio = 1.66666;
// var heightRatio = 1; this.canvas.width = 1500;
// this.canvas.height = this.canvas.width * heightRatio; this.canvas.height = this.canvas.width / ratio;
this.context = this.canvas.getContext("2d"); this.context = this.canvas.getContext("2d");
var container = document.getElementById("canvas-container"); var container = document.getElementById("canvas-container");
container.insertBefore(this.canvas, container.childNodes[0]); container.insertBefore(this.canvas, container.childNodes[0]);