a little more responsive (a little)
This commit is contained in:
30
pong.html
30
pong.html
@@ -6,11 +6,15 @@
|
||||
<style>
|
||||
#canvas-container {
|
||||
text-align: center;
|
||||
border: dashed red 5px;
|
||||
/* max-height: 80vh; */
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
canvas {
|
||||
border:1px solid #d3d3d3;
|
||||
background-color: #333333;
|
||||
width: 80%;
|
||||
max-width: 90vw;
|
||||
/* max-height: 100vh; */
|
||||
/* width: 80%; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,13 +63,13 @@ function startGame()
|
||||
wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size);
|
||||
|
||||
// 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);
|
||||
const grid_size = w/500;
|
||||
w_grid_mid = new component(w, grid_size, "darkgreen", 0, h_mid);
|
||||
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(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);
|
||||
|
||||
myGameArea.start();
|
||||
}
|
||||
@@ -74,10 +78,10 @@ var myGameArea = {
|
||||
keys: [],
|
||||
canvas : document.createElement("canvas"),
|
||||
createGameArea : function() {
|
||||
this.canvas.width = 500;
|
||||
this.canvas.height = 300;
|
||||
// var heightRatio = 1;
|
||||
// this.canvas.height = this.canvas.width * heightRatio;
|
||||
/* ratio 5/3 (1.66) */
|
||||
var ratio = 1.66666;
|
||||
this.canvas.width = 1500;
|
||||
this.canvas.height = this.canvas.width / ratio;
|
||||
this.context = this.canvas.getContext("2d");
|
||||
var container = document.getElementById("canvas-container");
|
||||
container.insertBefore(this.canvas, container.childNodes[0]);
|
||||
|
||||
Reference in New Issue
Block a user