ward/willem-truyen-network-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed zoom to difficulty; removed zoom use

Browse Source
This commit is contained in:
Ward Truyen 2024-08-07 16:42:31 +02:00
parent 3163a65b1a
commit d3ae0abac4
3 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/js/game-pong-context2d.js
View File

@ -10,8 +10,8 @@ class PingPong_CTX2D {
static get STATE_PLAYING() { return 1; }; static get STATE_PLAYING() { return 1; };
static get STATE_ENDED() { return 2; }; static get STATE_ENDED() { return 2; };
static get BALL_SIZE() { return 8; }; static get BALL_SIZE() { return 8; };
static get SPEED_HUMAN() { return 180; }; // static get SPEED_HUMAN() { return 180; };
static get SPEED_CPU() { return 210; }; // static get SPEED_CPU() { return 210; };
static get PADDLE_WIDTH() { return 10; }; static get PADDLE_WIDTH() { return 10; };
static get PADDLE_HEIGHT() { return 60; }; static get PADDLE_HEIGHT() { return 60; };
@ -28,12 +28,13 @@ class PingPong_CTX2D {
animationRequestId = 0; animationRequestId = 0;
running = false; running = false;
constructor(divId, width, height, zoom = 1, showFps = false) { constructor(divId, width, height, difficulty = 1, showFps = false) {
this.createCanvas(divId, width, height, zoom); this.createCanvas(divId, width, height);
this.canvasEl.title = "Playing: PingPong"; this.canvasEl.title = "Playing: PingPong";
this.ctx = this.canvasEl.getContext("2d"); this.ctx = this.canvasEl.getContext("2d");
this.ctx.textAlign = "center"; this.ctx.textAlign = "center";
this.difficulty = difficulty;
this.audioCtx = new AudioContext(); this.audioCtx = new AudioContext();
this.sounds = []; this.sounds = [];
this.sounds[0] = new Audio('./snd/glass-knock.mp3'); this.sounds[0] = new Audio('./snd/glass-knock.mp3');
@ -70,7 +71,7 @@ class PingPong_CTX2D {
if (typeof WTerminal === "function") { if (typeof WTerminal === "function") {
WTerminal.terminalAddCommand("restartgame", (t) => this.terminalRestartGame(t)); WTerminal.terminalAddCommand("restartgame", (t) => this.terminalRestartGame(t));
WTerminal.terminalAddCommand("printgame", (t) => t.printVar(this, "pong")); WTerminal.terminalAddCommand("printgame", (t) => t.printVar(this, "pong"));
WTerminal.printLn("new PingPong: @", divId, ' ', width, 'x', height, ':', zoom, ' showFps=', showFps); WTerminal.printLn("new PingPong: @", divId, ' ', width, 'x', height, ' difficulty=', difficulty, ' showFps=', showFps);
} }
this.drawCanvas(); this.drawCanvas();
@ -95,10 +96,33 @@ class PingPong_CTX2D {
newRound() { newRound() {
this.countDown = 3; // seconds; this.countDown = 3; // seconds;
this.gameState = PingPong_CTX2D.STATE_COUNTDOWN; this.gameState = PingPong_CTX2D.STATE_COUNTDOWN;
// set paddle speeds
if (this.difficulty == 0) {
this.speedHuman = 100;
this.speedCPU = 80;
} else if (this.difficulty == 1) {
this.speedHuman = 180;
this.speedCPU = 210;
} else {
this.speedHuman = 150 + 30 * this.difficulty;
this.speedCPU = 170 + 40 * this.difficulty;
}
// randomize ball speed // randomize ball speed
let vx = 200 + Math.random() * 100; let vx = 100;
let vy = -20 + Math.random() * 20; let vy = 0;
if (this.difficulty == 0) {
vx = 100 + Math.random() * 50;
vy = -10 + Math.random() * 10;
} else if (this.difficulty == 1) {
vx = 200 + Math.random() * 100;
vy = -20 + Math.random() * 20;
if (Math.random() > 0.5) vx = - vx; if (Math.random() > 0.5) vx = - vx;
} else {
vx = 200 + 100 * this.difficulty + Math.random() * 80 * this.difficulty;
vy = -30 + 10 * this.difficulty + Math.random() * 10 * this.difficulty;
if (Math.random() > 0.5) vx = - vx;
}
if (Math.random() > 0.5) vy = - vy; if (Math.random() > 0.5) vy = - vy;
// generate objects // generate objects
this.ball = new Ball(this.width / 2 - PingPong_CTX2D.BALL_SIZE / 2, this.height / 2 - PingPong_CTX2D.BALL_SIZE / 2, this.ball = new Ball(this.width / 2 - PingPong_CTX2D.BALL_SIZE / 2, this.height / 2 - PingPong_CTX2D.BALL_SIZE / 2,
@ -235,9 +259,9 @@ class PingPong_CTX2D {
} else if (this.gameState == PingPong_CTX2D.STATE_PLAYING) { } else if (this.gameState == PingPong_CTX2D.STATE_PLAYING) {
//cpu actions //cpu actions
if (this.ball.y + this.ball.height / 2 < this.cpu.y + this.cpu.height / 2) { if (this.ball.y + this.ball.height / 2 < this.cpu.y + this.cpu.height / 2) {
this.cpu.vy = -PingPong_CTX2D.SPEED_CPU; this.cpu.vy = -this.speedCPU;
} else if (this.ball.y > this.cpu.y + this.cpu.height / 2) { } else if (this.ball.y > this.cpu.y + this.cpu.height / 2) {
this.cpu.vy = PingPong_CTX2D.SPEED_CPU; this.cpu.vy = this.speedCPU;
} else { } else {
this.cpu.vy = 0; this.cpu.vy = 0;
} }
@ -351,11 +375,11 @@ class PingPong_CTX2D {
return false; return false;
} }
if (e.key == PingPong_CTX2D.KEY_ARROW_UP || e.key == PingPong_CTX2D.KEY_W) { if (e.key == PingPong_CTX2D.KEY_ARROW_UP || e.key == PingPong_CTX2D.KEY_W) {
this.human.vy = -PingPong_CTX2D.SPEED_HUMAN; this.human.vy = -this.speedHuman;
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.key == PingPong_CTX2D.KEY_ARROW_DOWN || e.key == PingPong_CTX2D.KEY_S) { } else if (e.key == PingPong_CTX2D.KEY_ARROW_DOWN || e.key == PingPong_CTX2D.KEY_S) {
this.human.vy = PingPong_CTX2D.SPEED_HUMAN; this.human.vy = this.speedHuman;
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.key == PingPong_CTX2D.KEY_ENTER || e.key == PingPong_CTX2D.KEY_SPACEBAR) { } else if (e.key == PingPong_CTX2D.KEY_ENTER || e.key == PingPong_CTX2D.KEY_SPACEBAR) {
@ -466,6 +490,6 @@ class Paddle extends Rectangle {
} }
} }
function startPingPong(divId, width = 480, height = 320, zoom = 1, showFps = true) { function startPingPong(divId, width = 480, height = 320, difficulty = 1, showFps = true) {
return new PingPong_CTX2D(divId, width, height, zoom, showFps); return new PingPong_CTX2D(divId, width, height, difficulty, showFps);
} }

30
src/js/game-tetris-context2d.js
View File

@ -5,7 +5,7 @@ class Tetris_CTX2D {
static get DEBUG_PARENT_OBJECT() { return true; }; static get DEBUG_PARENT_OBJECT() { return true; };
static get AUTO_CONTINUE_ON_FOCUS() { return false; }; static get AUTO_CONTINUE_ON_FOCUS() { return false; };
static get SHOW_FPS_INTERVAL() { return 1000 / 4; }; // four times per second static get SHOW_FPS_INTERVAL() { return 1000 / 4; }; // four times per second
static get TICK_TIME() { return 1 / 4; }; // static get TICK_TIME() { return 1 / 4; };
static get STATE_RUNNING() { return 0; }; static get STATE_RUNNING() { return 0; };
static get STATE_ENDED() { return 1; }; static get STATE_ENDED() { return 1; };
@ -58,11 +58,12 @@ class Tetris_CTX2D {
running = false; running = false;
animationRequestId = 0; animationRequestId = 0;
constructor(divId, width, height, zoom = 1, showFps = false) { constructor(divId, width, height, difficulty = 1, showFps = false) {
this.createCanvas(divId, width, height, zoom); this.createCanvas(divId, width, height);
this.canvasEl.title = "Playing: Tetris"; this.canvasEl.title = "Playing: Tetris";
this.ctx = this.canvasEl.getContext("2d"); this.ctx = this.canvasEl.getContext("2d");
this.ctx.textAlign = "center"; this.ctx.textAlign = "center";
this.difficulty = difficulty;
this.BLOCK_WIDTH = this.width / Tetris_CTX2D.GRID_COLUMS; this.BLOCK_WIDTH = this.width / Tetris_CTX2D.GRID_COLUMS;
this.BLOCK_HEIGHT = this.height / Tetris_CTX2D.GRID_ROWS; this.BLOCK_HEIGHT = this.height / Tetris_CTX2D.GRID_ROWS;
@ -103,7 +104,7 @@ class Tetris_CTX2D {
if (Tetris_CTX2D.DEBUG_PARENT_OBJECT) window.game = this; if (Tetris_CTX2D.DEBUG_PARENT_OBJECT) window.game = this;
if (typeof terminalAddCommand === "function") terminalAddCommand("restartgame", (t) => this.terminalRestartGame(t)); if (typeof terminalAddCommand === "function") terminalAddCommand("restartgame", (t) => this.terminalRestartGame(t));
if (typeof terminalPrintLn === "function") terminalPrintLn("new Tetris_CTX2D: @", divId, ' ', width, 'x', height, ':', zoom, ' showFps=', showFps); if (typeof terminalPrintLn === "function") terminalPrintLn("new Tetris_CTX2D: @", divId, ' ', width, 'x', height, ' difficulty=', difficulty, ' showFps=', showFps);
this.drawCanvas(); this.drawCanvas();
} }
@ -288,6 +289,12 @@ class Tetris_CTX2D {
newGame() { newGame() {
this.gameState = Tetris_CTX2D.STATE_RUNNING; this.gameState = Tetris_CTX2D.STATE_RUNNING;
this.tickTime = 0; this.tickTime = 0;
this.stepTime = 1/4;
if(this.difficulty == 0){
this.stepTime = 1/2;
}else{
this.stepTime = this.stepTime/ this.difficulty;
}
this.initBoard(); this.initBoard();
this.score = 0; this.score = 0;
this.nextShape = this.newShape(); this.nextShape = this.newShape();
@ -339,8 +346,8 @@ class Tetris_CTX2D {
//#state switch //#state switch
if (this.gameState == Tetris_CTX2D.STATE_RUNNING) { if (this.gameState == Tetris_CTX2D.STATE_RUNNING) {
this.tickTime += timeDelta; this.tickTime += timeDelta;
if (this.tickTime >= Tetris_CTX2D.TICK_TIME) { if (this.tickTime >= this.stepTime) {
this.tickTime -= Tetris_CTX2D.TICK_TIME; this.tickTime -= this.stepTime;
this.tick(); this.tick();
} }
} }
@ -416,7 +423,7 @@ class Tetris_CTX2D {
} }
// tickTime // tickTime
ctx.strokeStyle = '#8080B0'; ctx.strokeStyle = '#8080B0';
const rotation = this.tickTime / Tetris_CTX2D.TICK_TIME * Math.PI / 2; const rotation = this.tickTime / this.stepTime * Math.PI / 2;
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
const r = rotation + i * Math.PI / 2; const r = rotation + i * Math.PI / 2;
ctx.beginPath(); ctx.beginPath();
@ -498,9 +505,8 @@ class Tetris_CTX2D {
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.key == Tetris_CTX2D.KEY_ARROW_DOWN || e.key == Tetris_CTX2D.KEY_S) { } else if (e.key == Tetris_CTX2D.KEY_ARROW_DOWN || e.key == Tetris_CTX2D.KEY_S) {
if (this.isValidMove(0, 1)) { this.tick();
this.currentY++; this.tickTime = 0;
}
e.preventDefault(); e.preventDefault();
return false; return false;
} else if (e.key == Tetris_CTX2D.KEY_ARROW_LEFT || e.key == Tetris_CTX2D.KEY_A) { } else if (e.key == Tetris_CTX2D.KEY_ARROW_LEFT || e.key == Tetris_CTX2D.KEY_A) {
@ -555,6 +561,6 @@ class Tetris_CTX2D {
} }
} }
function startTetris(divId, width = 300, height = 600, zoom = 1, showFps = true) { function startTetris(divId, width = 300, height = 600, difficulty = 1, showFps = true) {
return new Tetris_CTX2D(divId, width, height, zoom, showFps); return new Tetris_CTX2D(divId, width, height, difficulty, showFps);
} }

16
src/js/games-launcher.js
View File

@ -47,7 +47,7 @@ class GamesLauncher {
this.widthEl = createElement('input', { type: 'number', id: 'width', value: '480', style: 'float: right;' }); this.widthEl = createElement('input', { type: 'number', id: 'width', value: '480', style: 'float: right;' });
this.heightEl = createElement('input', { type: 'number', id: 'height', value: '320', style: 'float: right;' }); this.heightEl = createElement('input', { type: 'number', id: 'height', value: '320', style: 'float: right;' });
this.zoomEl = createElement('input', { type: 'number', id: 'zoom', value: '1', style: 'float: right;' }); this.difficultyEl = createElement('input', { type: 'number', id: 'difficulty', value: '1', style: 'float: right;' });
this.showFpsEl = createElement('input', { type: 'checkbox', id: 'showFps', style: 'float: right;' }); this.showFpsEl = createElement('input', { type: 'checkbox', id: 'showFps', style: 'float: right;' });
this.gameEl.appendChild(createElement('label', { for: 'width' }, 'Width: ')); this.gameEl.appendChild(createElement('label', { for: 'width' }, 'Width: '));
@ -56,8 +56,8 @@ class GamesLauncher {
this.gameEl.appendChild(createElement('label', { for: 'height' }, 'Height: ')); this.gameEl.appendChild(createElement('label', { for: 'height' }, 'Height: '));
this.gameEl.appendChild(this.heightEl); this.gameEl.appendChild(this.heightEl);
this.gameEl.appendChild(createElement('br')); this.gameEl.appendChild(createElement('br'));
this.gameEl.appendChild(createElement('label', { for: 'zoom' }, 'Zoom: ')); this.gameEl.appendChild(createElement('label', { for: 'difficulty' }, 'difficulty: '));
this.gameEl.appendChild(this.zoomEl); this.gameEl.appendChild(this.difficultyEl);
this.gameEl.appendChild(createElement('br')); this.gameEl.appendChild(createElement('br'));
this.gameEl.appendChild(createElement('label', { for: 'showFps' }, 'showFps: ')); this.gameEl.appendChild(createElement('label', { for: 'showFps' }, 'showFps: '));
this.gameEl.appendChild(this.showFpsEl); this.gameEl.appendChild(this.showFpsEl);
@ -86,12 +86,12 @@ class GamesLauncher {
case 'pong-context2d': case 'pong-context2d':
this.widthEl.value = 480; this.widthEl.value = 480;
this.heightEl.value = 320; this.heightEl.value = 320;
this.zoomEl.value = 1; // this.difficultyEl.value = 1;
break; break;
case 'tetris-context2d': case 'tetris-context2d':
this.widthEl.value = 300; this.widthEl.value = 300;
this.heightEl.value = 600; this.heightEl.value = 600;
this.zoomEl.value = 1; // this.difficultyEl.value = 1;
break; break;
} }
} }
@ -100,17 +100,17 @@ class GamesLauncher {
const selectedValue = this.selectGameEl.value;//this.selectGameEl.options[this.selectGameEl.selectedIndex].value; const selectedValue = this.selectGameEl.value;//this.selectGameEl.options[this.selectGameEl.selectedIndex].value;
const width = this.widthEl.value; const width = this.widthEl.value;
const height = this.heightEl.value; const height = this.heightEl.value;
const zoom = this.zoomEl.value; const difficulty = this.difficultyEl.value;
const showFps = this.showFpsEl.checked; const showFps = this.showFpsEl.checked;
switch (selectedValue) { switch (selectedValue) {
case 'pong-context2d': case 'pong-context2d':
this.createCloseExitGameButton(); this.createCloseExitGameButton();
this.currentGame = new PingPong_CTX2D(this.gameId, width, height, zoom, showFps); this.currentGame = new PingPong_CTX2D(this.gameId, width, height, difficulty, showFps);
this.currentGame.canvasEl.focus(); this.currentGame.canvasEl.focus();
break; break;
case 'tetris-context2d': case 'tetris-context2d':
this.createCloseExitGameButton(); this.createCloseExitGameButton();
this.currentGame = new Tetris_CTX2D(this.gameId, width, height, zoom, showFps); this.currentGame = new Tetris_CTX2D(this.gameId, width, height, difficulty, showFps);
this.currentGame.canvasEl.focus(); this.currentGame.canvasEl.focus();
break; break;
default: default: