diff --git a/src/js/game-pong-context2d.js b/src/js/game-pong-context2d.js index 8ccc812..1c43f0a 100644 --- a/src/js/game-pong-context2d.js +++ b/src/js/game-pong-context2d.js @@ -10,8 +10,8 @@ class PingPong_CTX2D { static get STATE_PLAYING() { return 1; }; static get STATE_ENDED() { return 2; }; static get BALL_SIZE() { return 8; }; - static get SPEED_HUMAN() { return 180; }; - static get SPEED_CPU() { return 210; }; + // static get SPEED_HUMAN() { return 180; }; + // static get SPEED_CPU() { return 210; }; static get PADDLE_WIDTH() { return 10; }; static get PADDLE_HEIGHT() { return 60; }; @@ -28,12 +28,13 @@ class PingPong_CTX2D { animationRequestId = 0; running = false; - constructor(divId, width, height, zoom = 1, showFps = false) { - this.createCanvas(divId, width, height, zoom); + constructor(divId, width, height, difficulty = 1, showFps = false) { + this.createCanvas(divId, width, height); this.canvasEl.title = "Playing: PingPong"; this.ctx = this.canvasEl.getContext("2d"); this.ctx.textAlign = "center"; + this.difficulty = difficulty; this.audioCtx = new AudioContext(); this.sounds = []; this.sounds[0] = new Audio('./snd/glass-knock.mp3'); @@ -70,7 +71,7 @@ class PingPong_CTX2D { if (typeof WTerminal === "function") { WTerminal.terminalAddCommand("restartgame", (t) => this.terminalRestartGame(t)); 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(); @@ -95,10 +96,33 @@ class PingPong_CTX2D { newRound() { this.countDown = 3; // seconds; 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 - let vx = 200 + Math.random() * 100; - let vy = -20 + Math.random() * 20; - if (Math.random() > 0.5) vx = - vx; + let vx = 100; + 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; + } 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; // generate objects 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) { //cpu actions 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) { - this.cpu.vy = PingPong_CTX2D.SPEED_CPU; + this.cpu.vy = this.speedCPU; } else { this.cpu.vy = 0; } @@ -351,11 +375,11 @@ class PingPong_CTX2D { return false; } 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(); return false; } 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(); return false; } 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) { - return new PingPong_CTX2D(divId, width, height, zoom, showFps); +function startPingPong(divId, width = 480, height = 320, difficulty = 1, showFps = true) { + return new PingPong_CTX2D(divId, width, height, difficulty, showFps); } diff --git a/src/js/game-tetris-context2d.js b/src/js/game-tetris-context2d.js index 5d2a6ba..0bd53fe 100755 --- a/src/js/game-tetris-context2d.js +++ b/src/js/game-tetris-context2d.js @@ -5,7 +5,7 @@ class Tetris_CTX2D { static get DEBUG_PARENT_OBJECT() { return true; }; static get AUTO_CONTINUE_ON_FOCUS() { return false; }; 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_ENDED() { return 1; }; @@ -58,11 +58,12 @@ class Tetris_CTX2D { running = false; animationRequestId = 0; - constructor(divId, width, height, zoom = 1, showFps = false) { - this.createCanvas(divId, width, height, zoom); + constructor(divId, width, height, difficulty = 1, showFps = false) { + this.createCanvas(divId, width, height); this.canvasEl.title = "Playing: Tetris"; this.ctx = this.canvasEl.getContext("2d"); this.ctx.textAlign = "center"; + this.difficulty = difficulty; this.BLOCK_WIDTH = this.width / Tetris_CTX2D.GRID_COLUMS; 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 (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(); } @@ -288,6 +289,12 @@ class Tetris_CTX2D { newGame() { this.gameState = Tetris_CTX2D.STATE_RUNNING; 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.score = 0; this.nextShape = this.newShape(); @@ -339,8 +346,8 @@ class Tetris_CTX2D { //#state switch if (this.gameState == Tetris_CTX2D.STATE_RUNNING) { this.tickTime += timeDelta; - if (this.tickTime >= Tetris_CTX2D.TICK_TIME) { - this.tickTime -= Tetris_CTX2D.TICK_TIME; + if (this.tickTime >= this.stepTime) { + this.tickTime -= this.stepTime; this.tick(); } } @@ -416,7 +423,7 @@ class Tetris_CTX2D { } // tickTime 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++) { const r = rotation + i * Math.PI / 2; ctx.beginPath(); @@ -498,9 +505,8 @@ class Tetris_CTX2D { e.preventDefault(); return false; } else if (e.key == Tetris_CTX2D.KEY_ARROW_DOWN || e.key == Tetris_CTX2D.KEY_S) { - if (this.isValidMove(0, 1)) { - this.currentY++; - } + this.tick(); + this.tickTime = 0; e.preventDefault(); return false; } 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) { - return new Tetris_CTX2D(divId, width, height, zoom, showFps); +function startTetris(divId, width = 300, height = 600, difficulty = 1, showFps = true) { + return new Tetris_CTX2D(divId, width, height, difficulty, showFps); } diff --git a/src/js/games-launcher.js b/src/js/games-launcher.js index fb903dc..6ce1a67 100644 --- a/src/js/games-launcher.js +++ b/src/js/games-launcher.js @@ -47,7 +47,7 @@ class GamesLauncher { 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.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.gameEl.appendChild(createElement('label', { for: 'width' }, 'Width: ')); @@ -56,8 +56,8 @@ class GamesLauncher { this.gameEl.appendChild(createElement('label', { for: 'height' }, 'Height: ')); this.gameEl.appendChild(this.heightEl); this.gameEl.appendChild(createElement('br')); - this.gameEl.appendChild(createElement('label', { for: 'zoom' }, 'Zoom: ')); - this.gameEl.appendChild(this.zoomEl); + this.gameEl.appendChild(createElement('label', { for: 'difficulty' }, 'difficulty: ')); + this.gameEl.appendChild(this.difficultyEl); this.gameEl.appendChild(createElement('br')); this.gameEl.appendChild(createElement('label', { for: 'showFps' }, 'showFps: ')); this.gameEl.appendChild(this.showFpsEl); @@ -86,12 +86,12 @@ class GamesLauncher { case 'pong-context2d': this.widthEl.value = 480; this.heightEl.value = 320; - this.zoomEl.value = 1; + // this.difficultyEl.value = 1; break; case 'tetris-context2d': this.widthEl.value = 300; this.heightEl.value = 600; - this.zoomEl.value = 1; + // this.difficultyEl.value = 1; break; } } @@ -100,17 +100,17 @@ class GamesLauncher { const selectedValue = this.selectGameEl.value;//this.selectGameEl.options[this.selectGameEl.selectedIndex].value; const width = this.widthEl.value; const height = this.heightEl.value; - const zoom = this.zoomEl.value; + const difficulty = this.difficultyEl.value; const showFps = this.showFpsEl.checked; switch (selectedValue) { case 'pong-context2d': 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(); break; case 'tetris-context2d': 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(); break; default: