pong offline toujours casse mais tkt
This commit is contained in:
Kbz-8
parent
2bc42e3349
commit
9aa2001185
@ -1,4 +1,7 @@
|
||||
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
|
||||
import "../3D/maths/gl-matrix-min.js"
|
||||
import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
|
||||
import { initBuffers } from "../3D/buffers.js"
|
||||
|
||||
export class PongOfflineView extends AbstractAuthenticatedView {
|
||||
constructor(params) {
|
||||
@ -20,6 +23,8 @@ export class PongOfflineView extends AbstractAuthenticatedView {
|
||||
this.round = -1;
|
||||
|
||||
this.game_mode = 1; // 1 is 2D, 2 is 3D
|
||||
|
||||
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
@ -46,7 +51,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
|
||||
document.getElementById('stopGameButton').hidden = 1;
|
||||
document.getElementById('startTournament').onclick = this.startTournament.bind(this);
|
||||
document.getElementById('gameMode').hidden = 1;
|
||||
document.getElementById("gameMode").onclick = this.toggleGameMode.bind(this);
|
||||
document.getElementById('gameMode').onclick = this.toggleGameMode.bind(this);
|
||||
}
|
||||
|
||||
async leavePage() {
|
||||
@ -55,7 +60,6 @@ export class PongOfflineView extends AbstractAuthenticatedView {
|
||||
|
||||
async toggleGameMode()
|
||||
{
|
||||
console.log(this.game_mode);
|
||||
if(this.game_mode === 1) // 3D
|
||||
{
|
||||
this.game_mode = 2;
|
||||
@ -296,21 +300,17 @@ class Game {
|
||||
|
||||
this.players = [
|
||||
{
|
||||
paddle: new Paddle(this.context,
|
||||
this.def.PADDLEMARGIN,
|
||||
this.def),
|
||||
paddle: new Paddle(this.def.PADDLEMARGIN, this.def),
|
||||
score: 0
|
||||
},
|
||||
{
|
||||
paddle: new Paddle(this.context,
|
||||
this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH,
|
||||
this.def),
|
||||
paddle: new Paddle(this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH, this.def),
|
||||
score: 0
|
||||
}
|
||||
];
|
||||
this.ballStartSide = 0;
|
||||
this.ballRespawned = false;
|
||||
this.ball = new Ball(this.context, this.def, this.ballStartSide);
|
||||
this.ball = new Ball(this.def, this.ballStartSide);
|
||||
|
||||
this.interval = setInterval(this.updateGame.bind(this), 10);
|
||||
|
||||
@ -328,6 +328,10 @@ class Game {
|
||||
this.cam_up = [0, 0, -1];
|
||||
}
|
||||
|
||||
initGame()
|
||||
{
|
||||
}
|
||||
|
||||
initWebGL()
|
||||
{
|
||||
this.canvas = document.createElement("canvas");
|
||||
@ -361,7 +365,6 @@ class Game {
|
||||
this.canvas.style.backgroundColor = '#f1f1f1';
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.app.appendChild(this.canvas);
|
||||
|
||||
}
|
||||
|
||||
finish(winner) {
|
||||
@ -447,10 +450,39 @@ class Game {
|
||||
this.ball.y += this.ball.vy;
|
||||
}
|
||||
|
||||
if(this.ctx instanceof CanvasRenderingContext2D)
|
||||
{
|
||||
this.clear();
|
||||
this.players[0].paddle.update();
|
||||
this.players[1].paddle.update();
|
||||
this.ball.update();
|
||||
}
|
||||
else if(this.ctx instanceof WebGLRenderingContext)
|
||||
{
|
||||
this.context.clearColor(0.1, 0.1, 0.1, 1.0);
|
||||
this.context.clearDepth(1.0);
|
||||
this.context.enable(this.context.DEPTH_TEST);
|
||||
this.context.depthFunc(this.context.LEQUAL);
|
||||
this.context.clear(this.context.COLOR_BUFFER_BIT | this.context.DEPTH_BUFFER_BIT);
|
||||
|
||||
const projectionMatrix = mat4.create();
|
||||
const viewMatrix = mat4.create();
|
||||
|
||||
mat4.perspective(projectionMatrix, (90 * Math.PI) / 180, this.context.canvas.clientWidth / this.context.canvas.clientHeight, 0.1, 10000000.0);
|
||||
mat4.lookAt(viewMatrix, this.cam_pos, this.cam_target, this.cam_up);
|
||||
|
||||
this.setPositionAttribute();
|
||||
this.setNormalAttribute();
|
||||
|
||||
this.context.useProgram(shaderInfos.program);
|
||||
|
||||
this.context.uniformMatrix4fv(shaderInfos.uniformLocations.projectionMatrix, false, projectionMatrix);
|
||||
this.context.uniformMatrix4fv(shaderInfos.uniformLocations.viewMatrix, false, viewMatrix);
|
||||
}
|
||||
else
|
||||
{
|
||||
alert('Unknown rendering context type');
|
||||
}
|
||||
this.players[0].paddle.update(this.context);
|
||||
this.players[1].paddle.update(this.context);
|
||||
this.ball.update(this.context);
|
||||
}
|
||||
|
||||
updateScore(p1Score, p2Score) {
|
||||
@ -511,12 +543,12 @@ class Game {
|
||||
setNormalAttribute()
|
||||
{
|
||||
const numComponents = 3;
|
||||
const type = this.ctx.FLOAT;
|
||||
const type = this.context.FLOAT;
|
||||
const normalize = false;
|
||||
const stride = 0;
|
||||
const offset = 0;
|
||||
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffers.normal);
|
||||
this.ctx.vertexAttribPointer(
|
||||
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.normal);
|
||||
this.context.vertexAttribPointer(
|
||||
shaderInfos.attribLocations.vertexNormal,
|
||||
numComponents,
|
||||
type,
|
||||
@ -524,7 +556,7 @@ class Game {
|
||||
stride,
|
||||
offset,
|
||||
);
|
||||
this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal);
|
||||
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexNormal);
|
||||
}
|
||||
|
||||
setPositionAttribute()
|
||||
@ -534,9 +566,9 @@ class Game {
|
||||
const normalize = false;
|
||||
const stride = 0;
|
||||
const offset = 0;
|
||||
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffers.vertex);
|
||||
this.ctx.bindBuffer(this.ctx.ELEMENT_ARRAY_BUFFER, this.buffers.index);
|
||||
this.ctx.vertexAttribPointer(
|
||||
this.context.bindBuffer(this.context.ARRAY_BUFFER, this.buffers.vertex);
|
||||
this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.buffers.index);
|
||||
this.context.vertexAttribPointer(
|
||||
shaderInfos.attribLocations.vertexPosition,
|
||||
numComponents,
|
||||
type,
|
||||
@ -544,23 +576,33 @@ class Game {
|
||||
stride,
|
||||
offset
|
||||
);
|
||||
this.ctx.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
|
||||
this.context.enableVertexAttribArray(shaderInfos.attribLocations.vertexPosition);
|
||||
}
|
||||
}
|
||||
|
||||
class Paddle {
|
||||
constructor(context, paddleSide, def) {
|
||||
constructor(paddleSide, def) {
|
||||
this.width = def.PADDLEWIDTH;
|
||||
this.height = def.PADDLEHEIGHT;
|
||||
this.x = paddleSide;
|
||||
this.y = def.CANVASHEIGHT / 2 - this.height / 2;
|
||||
this.ctx = context;
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.ctx.fillStyle = 'black';
|
||||
this.ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
update(ctx) {
|
||||
if(this.ctx instanceof CanvasRenderingContext2D)
|
||||
{
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
}
|
||||
else if(this.ctx instanceof WebGLRenderingContext)
|
||||
{
|
||||
// const size = this.game.config.BALL_SIZE * 2;
|
||||
// const sizex = this.len() / 2;
|
||||
// const posx = (this.x - this.game.config.MAP_CENTER_X);
|
||||
// const posy = (this.y - this.game.config.MAP_CENTER_Y);
|
||||
// renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
|
||||
}
|
||||
}
|
||||
|
||||
getCenter() {
|
||||
@ -572,7 +614,7 @@ class Paddle {
|
||||
}
|
||||
|
||||
class Ball {
|
||||
constructor(context, def, startSide) {
|
||||
constructor(def, startSide) {
|
||||
this.radius = def.BALLRADIUS;
|
||||
this.speed = def.BALLSPEED;
|
||||
this.x = def.CANVASWIDTH / 2;
|
||||
@ -582,14 +624,23 @@ class Ball {
|
||||
this.vx = -this.speed;
|
||||
else
|
||||
this.vx = this.speed;
|
||||
this.ctx = context;
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.ctx.fillStyle = 'black';
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||||
this.ctx.fill();
|
||||
update(ctx) {
|
||||
if(this.ctx instanceof CanvasRenderingContext2D)
|
||||
{
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
else if(this.ctx instanceof WebGLRenderingContext)
|
||||
{
|
||||
//const size = this.size * 3;
|
||||
//const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2;
|
||||
//const posy = (this.position.location.y - this.size / 2) - this.game.config.MAP_SIZE_Y / 2;
|
||||
//renderCube(ctx, posx, 0, posy, 0, size, size, size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -225,7 +225,6 @@ export class PongOnlineView extends AbstractAuthenticatedView
|
||||
document.removeEventListener('keyup', this.keyReleaseHandler);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {int} game_mode
|
||||
* @returns { Cramptex }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user