const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbarLinks')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
const audio = new Audio();
audio.src = "js/music/tetrisMusic.mp3"
audio.loop = true;
audio.volume = 0.5
function volumeDown(){
if (audio.volume >= 1) {
audio.volume -= 0.1;
}
else {
audio.volume -= 0.1;
}
}
function volumeUp(){
if (audio.volume <= 1) {
audio.volume += 0.1;
}
else {
audio.volume += 0.1;
}
}
let int = document.getElementById('points');
let integer = 0;
let int2 = document.getElementById('points2')
let integer2 = 0;
function onePoint(){
integer += 1;
int.innerHTML = integer
integer2 += 1;
int2.innerHTML = integer2
}
function tenPoints(){
integer += 10;
int.innerHTML = integer
integer2 += 10;
int2.innerHTML = integer2
}
function fiftyPoints(){
integer += 50;
int.innerHTML = integer
integer2 += 50;
int2.innerHTML = integer2
}
const anzeige = document.getElementById("seconds");
const anzeige2 = document.getElementById("seconds2");
var gestoppteZeit = 0;
var pausiert = true;
var letzterDurchlauf = new Date();
function aktualisiereZeit() {
if(pausiert === false) {
gestoppteZeit += new Date() - letzterDurchlauf;
aktualisiereAnzeige();
}
letzterDurchlauf = new Date();
setTimeout(aktualisiereZeit, 1);
}
function aktualisiereAnzeige() {
let sekunden = Math.floor(gestoppteZeit / 1000) % 60;
let minuten = Math.floor(gestoppteZeit / 60000) % 60;
let stunden = Math.floor(gestoppteZeit / 3600000);
stunden = stunden < 10 ? "0" + stunden : stunden;
minuten = minuten < 10 ? "0" + minuten : minuten;
sekunden = sekunden < 10 ? "0" + sekunden : sekunden;
anzeige.innerHTML = stunden + ":" + minuten + ":" + sekunden;
anzeige2.innerHTML = stunden + ":" + minuten + ":" + sekunden;
}
aktualisiereZeit();
function play(){
audio.play();
rAF = requestAnimationFrame(loop);
pausiert = false;
}
function pause() {
audio.pause();
cancelAnimationFrame(rAF);
showPause();
pausiert = true;
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateSequence() {
const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z'];
while (sequence.length) {
const rand = getRandomInt(0, sequence.length - 1);
const name = sequence.splice(rand, 1)[0];
tetrominoSequence.push(name);
}
}
function getNextTetromino() {
if (tetrominoSequence.length === 0) {
generateSequence();
}
const name = tetrominoSequence.pop();
const matrix = tetrominos[name];
const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2);
const row = name === 'I' ? -1 : -2;
return {
name: name,
matrix: matrix,
row: row,
col: col,
};
}
function rotate(matrix) {
const N = matrix.length - 1;
const result = matrix.map((row, i) =>
row.map((val, j) => matrix[N - j][i])
);
return result;
}
function isValidMove(matrix, cellRow, cellCol) {
for (let row = 0; row < matrix.length; row++) {
for (let col = 0; col < matrix[row].length; col++) {
if (matrix[row][col] && (
cellCol + col < 0 ||
cellCol + col >= playfield[0].length ||
cellRow + row >= playfield.length ||
playfield[cellRow + row][cellCol + col])
) {
return false;
}
}
}
return true;
}
function placeTetromino() {
tenPoints();
for (let row = 0; row < tetromino.matrix.length; row++) {
for (let col = 0; col < tetromino.matrix[row].length; col++) {
if (tetromino.matrix[row][col]) {
if (tetromino.row + row < 0) {
return showGameOver();
}
playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;
}
}
}
for (let row = playfield.length - 1; row >= 0; ) {
if (playfield[row].every(cell => !!cell)) {
fiftyPoints();
for (let r = row; r >= 0; r--) {
for (let c = 0; c < playfield[r].length; c++) {
playfield[r][c] = playfield[r-1][c];
}
}
}
else {
row--;
}
}
tetromino = getNextTetromino();
}
const popupScreen = document.querySelector(".popupScreen");
const popupBox = document.querySelector(".popupBox");
const closeBtn = document.querySelector(".closeBtn");
function showGameOver() {
audio.pause();
pausiert = true;
cancelAnimationFrame(rAF);
gameOver = true;
setTimeout(() => {
popupScreen.classList.add("aktive");
}, 0000);
closeBtn.addEventListener("click", () => {
location.reload();
});
}
function showPause() {
context.fillStyle = 'black';
context.globalAlpha = 0.75;
context.fillRect(0, canvas.height / 2 - 30, canvas.width, 60);
context.globalAlpha = 1;
context.fillStyle = 'white';
context.font = '36px Open Sans, sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('Pause', canvas.width / 2, canvas.height / 2);
}
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const grid = 32;
const tetrominoSequence = [];
const playfield = [];
for (let row = -2; row < 20; row++) {
playfield[row] = [];
for (let col = 0; col < 10; col++) {
playfield[row][col] = 0;
}
}
const tetrominos = {
'I': [
[0,0,0,0],
[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
],
'J': [
[2,0,0],
[2,2,2],
[0,0,0],
],
'L': [
[0,0,3],
[3,3,3],
[0,0,0],
],
'O': [
[4,4],
[4,4],
],
'S': [
[0,5,5],
[5,5,0],
[0,0,0],
],
'Z': [
[6,6,0],
[0,6,6],
[0,0,0],
],
'T': [
[0,7,0],
[7,7,7],
[0,0,0],
],
};
const colors = {
'I': '#00eeef',
'O': '#f3f106',
'T': '#9e02ec',
'S': '#00f300',
'Z': '#f30005',
'J': '#0103eb',
'L': '#f0a003'
};
let count = 0;
let tetromino = getNextTetromino();
let rAF = null;
let gameOver = false;
function loop() {
rAF = requestAnimationFrame(loop);
context.clearRect(0,0,canvas.width,canvas.height);
for (let row = 0; row < 20; row++) {
for (let col = 0; col < 10; col++) {
if (playfield[row][col]) {
const name = playfield[row][col];
context.fillStyle = colors[name];
context.fillRect(col * grid, row * grid, grid-1, grid-1);
}
}
}
if (tetromino) {
if (++count > 35) {
tetromino.row++;
count = 0;
if (!isValidMove(tetromino.matrix, tetromino.row, tetromino.col)) {
tetromino.row--;
placeTetromino();
}
}
context.fillStyle = colors[tetromino.name];
for (let row = 0; row < tetromino.matrix.length; row++) {
for (let col = 0; col < tetromino.matrix[row].length; col++) {
if (tetromino.matrix[row][col]) {
context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid-1, grid-1);
}
}
}
}
}
document.addEventListener('keydown', function(e) {
if (gameOver) return;
if (e.which === 65 || e.which === 68) {
const col = e.which === 65
? tetromino.col - 1
: tetromino.col + 1;
if (isValidMove(tetromino.matrix, tetromino.row, col)) {
tetromino.col = col;
}
}
if (e.which === 87) {
const matrix = rotate(tetromino.matrix);
if (isValidMove(matrix, tetromino.row, tetromino.col)) {
tetromino.matrix = matrix;
}
}
if(e.which === 83) {
const row = tetromino.row + 1;
if (!isValidMove(tetromino.matrix, row, tetromino.col)) {
tetromino.row = row - 1;
placeTetromino();
return;
}
tetromino.row = row;
}
});