109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
class GameInfo {
|
|
constructor(game) {
|
|
this.fieldSize = {x: 12, y: 20};
|
|
this.arena = new Arena(this, game);
|
|
|
|
this.player = new LocalPlayer(this, game);
|
|
|
|
const container = document.createElement('div');
|
|
container.className = 'game-instance';
|
|
manager.container.appendChild(container);
|
|
|
|
this.score = document.createElement('div');
|
|
this.score.classList.add('game-stats', 'score');
|
|
container.appendChild(this.score);
|
|
|
|
this.canvasContainer = document.createElement('div');
|
|
this.canvasContainer.className = 'canvas-container';
|
|
container.appendChild(this.canvasContainer);
|
|
|
|
this.canvasHold = document.createElement('canvas');
|
|
this.canvasHold.className = 'tetris-hold';
|
|
this.contextHold = this.canvasHold.getContext('2d');
|
|
this.canvasContainer.appendChild(this.canvasHold);
|
|
|
|
this.canvasBg = document.createElement('canvas');
|
|
this.canvasBg.className = 'tetris-background';
|
|
this.contextBg = this.canvasBg.getContext('2d');
|
|
this.canvasContainer.appendChild(this.canvasBg);
|
|
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.className = 'tetris-arena';
|
|
this.context = this.canvas.getContext('2d');
|
|
this.canvasContainer.appendChild(this.canvas);
|
|
|
|
this.canvasUpcoming = document.createElement('canvas');
|
|
this.canvasUpcoming.className = 'tetris-upcoming';
|
|
this.contextUpcoming = this.canvasUpcoming.getContext('2d');
|
|
this.canvasContainer.appendChild(this.canvasUpcoming);
|
|
|
|
this.time = document.createElement('div');
|
|
this.time.classList.add('game-stats', 'time');
|
|
container.appendChild(this.time);
|
|
|
|
this.isPaused = true;
|
|
|
|
this.dropCounter = 0;
|
|
this.dropInterval = 1000;
|
|
|
|
this.keys = {
|
|
down: {
|
|
keys: [40, 83],
|
|
action: () => {
|
|
this.player.drop();
|
|
this.player.score++;
|
|
this.player.game.updateScore(false);
|
|
},
|
|
},
|
|
left: {
|
|
keys: [37, 65],
|
|
action: () => this.player.move(-1),
|
|
},
|
|
right: {
|
|
keys: [39, 68],
|
|
action: () => this.player.move(1),
|
|
},
|
|
rotateLeft: {
|
|
keys: [81],
|
|
action: () => this.player.rotate(-1),
|
|
},
|
|
rotateRight: {
|
|
keys: [69],
|
|
action: () => this.player.rotate(1),
|
|
},
|
|
holdTile: {
|
|
keys: [38, 87],
|
|
action: () => this.player.hold(),
|
|
},
|
|
};
|
|
|
|
this.prevUpdateScore = 0;
|
|
|
|
this.lastScore = 0;
|
|
this.lastTime = 0;
|
|
this.lastTimeUpdate = Date.now();
|
|
|
|
this.startTime = 0;
|
|
|
|
this.upcomingTiles = [];
|
|
|
|
/*
|
|
default -> plain squares
|
|
retro -> original look
|
|
modern -> rounded corners
|
|
snake -> all tiles are connected
|
|
*/
|
|
this.theme = new DefaultTheme();
|
|
}
|
|
|
|
updateScore(animate) {
|
|
this.score.innerText = this.lastScore;
|
|
if (animate) {
|
|
this.score.classList.add('update');
|
|
setTimeout(() => {
|
|
this.score.classList.remove('update');
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|