Why does an error occur in the while statement when the else if condition and the while condition are the same?

33 Views Asked by At

When I created a web Tetris, I ran the Tetris block generation from random to not duplicated, and then applied the while statement to initialize the list when the block is finished, but the website does not work.

There was a problem in this part of the JS part.

function playerReset(){

const pieces = "TJLOSZI";
let randomNum = (pieces.length * Math.random()) | 0
if ((block.indexOf(0) !== -1) && (block.indexOf(1) !== -1) && (block.indexOf(2) !== -1) && (block.indexOf(3) !== -1) && (block.indexOf(4) !== -1) && (block.indexOf(5) !== -1) && (block.indexOf(6) !== -1)) {
    block = [];
    block.push(randomNum);
} else if(block.indexOf(randomNum) === -1){
    while(block.indexOf(randomNum) === -1){
        randomNum = (pieces.length * Math.random()) | 0
    };
    block.push(randomNum);
} else{
    block.push(randomNum);
}

player.matrix = createPiece(pieces[randomNum]);
player.pos.y = 0;
player.pos.x = ((arena[0].length / 2) | 0) - ((player.matrix[0].length  / 2) | 0);
if(collide(arena, player)){
    arena.forEach((row) => row.fill(0));
    player.score = 0;
    updateScore();
}

}

"use strict";
const canvas = document.getElementById("tetris");
const context = canvas.getContext("2d");
context.scale(20, 20);

function arenaSweep(){

    let rowCount = 1;
    outer: for(let y = arena.length - 1; y > 0; --y){
        for(let x = 0; x < arena[y].length; ++x){
            if(arena[y][x] === 0){
                continue outer;
            }
        }

        const row = arena.splice(y, 1)[0].fill(0);
        arena.unshift(row);
        ++y;
        player.score += rowCount * 10;
        rowCount *= 2;

    }
}

function collide(arena, player){

    const m = player.matrix;
    const o = player.pos;
    for(let y = 0; y < m.length; ++y){
        for(let x = 0; x < m[y].length; ++x){
            if(m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !==0){
                return true;
            }
        }
    }
    return false;
}

function createMatrix(w, h){

    const matrix = [];
    while(h--){
        matrix.push(new Array(w).fill(0));
    }
    return matrix;
}

function createPiece(type){

    if(type === "I"){
        return[
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
        ];
    }else if(type === "L"){
        return[
            [0, 2, 0],
            [0, 2, 0],
            [0, 2, 2],
        ];
    }else if(type === "J"){
        return[
            [0, 3, 0],
            [0, 3, 0],
            [3, 3, 0],
        ];
    }else if(type === "O"){
        return[
            [4, 4],
            [4, 4],
        ];
    }else if(type === "Z"){
        return[
            [5, 5, 0],
            [0, 5, 5],
            [0, 0, 0],
        ];
    }else if(type === "S"){
        return[
            [0, 6, 6],
            [6, 6, 0],
            [0, 0, 0],
        ];
    }else if(type === "T"){
        return[
            [0, 7, 0],
            [7, 7, 7],
            [0, 0, 0],
        ];
    }
}

function drawMatrix(matrix, offset){

    matrix.forEach((row, y) => {
        row.forEach((value, x) =>{
            if(value !== 0){
                context.fillStyle = colors[value];
                context.fillRect(x + offset.x, y + offset.y, 1, 1);
            }
        });
    });
}

function draw(){

    context.fillStyle = "#000";
    context.fillRect(0, 0, canvas.width, canvas.height);
    drawMatrix(arena, {x: 0, y: 0});
    drawMatrix(player.matrix, player.pos);
}

function merge(arena, player){

    player.matrix.forEach((row, y) =>{
        row.forEach((value, x) =>{
            if(value !== 0){
                arena[y + player.pos.y][x + player.pos.x] = value;

            }
        })
    })
}

function rotate(matrix, dir){

    for(let y = 0; y < matrix.length; ++y){
        for(let x = 0; x < y; ++x){
            [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
        }
    }
    if(dir > 0){
        matrix.forEach((row) => row.reverse());
    }else{
        matrix.reverse();
    }
}

function playerDrop(){

    player.pos.y++;
    if(collide(arena, player)){
        player.pos.y--;
        merge(arena, player);
        playerReset();
        arenaSweep();
        updateScore();
    }
    dropCounter = 0;
}

function playerMove(offset){

    player.pos.x += offset;
    if(collide(arena, player)){
        player.pos.x -= offset;
    }
}

function playerReset(){

    const pieces = "TJLOSZI";
    let randomNum = (pieces.length * Math.random()) | 0
    if ((block.indexOf(0) !== -1) && (block.indexOf(1) !== -1) && (block.indexOf(2) !== -1) && (block.indexOf(3) !== -1) && (block.indexOf(4) !== -1) && (block.indexOf(5) !== -1) && (block.indexOf(6) !== -1)) {
        block = [];
        block.push(randomNum);
    } else if(block.indexOf(randomNum) === -1){
        while(block.indexOf(randomNum) === -1){
            randomNum = (pieces.length * Math.random()) | 0
        };
        block.push(randomNum);
    } else{
        block.push(randomNum);
    }
    
    player.matrix = createPiece(pieces[randomNum]);
    player.pos.y = 0;
    player.pos.x = ((arena[0].length / 2) | 0) - ((player.matrix[0].length  / 2) | 0);
    if(collide(arena, player)){
        arena.forEach((row) => row.fill(0));
        player.score = 0;
        updateScore();
    }
}

function playerRotate(dir){

    const pos = player.pos.x;
    let offset = 1;
    rotate(player.matrix, dir);
    while(collide(arena, player)){
        player.pos.x += offset;
        offset = -(offset + (offset > 0 ? 1 : -1));
        if(offset > player.matrix[0].length){
            rotate(player.matrix, -dir);
            player.pos.x = pos;
            return;
        }
    }
}

let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;

function update(time = 0){
    const deltaTime = time - lastTime;
    dropCounter += deltaTime;
    if(dropCounter > dropInterval){
        playerDrop();
    }
    lastTime = time;
    draw();
    requestAnimationFrame(update);
}

function updateScore(){

    document.getElementById("score").innerText = "Score : " + player.score;
}

document.addEventListener("keydown", (event) =>{

    if(event.keyCode === 37){           // 왼쪽 화살표(왼쪽으로 이동)
        playerMove(-1);
    }else if(event.keyCode === 39){     // 오른쪽 화살표(오른쪽으로 이동)
        playerMove(1);
    }else if(event.keyCode === 40){     // 아래쪽 화살표(밑으로 빠르게 이동)
        playerDrop();
    }else if(event.keyCode === 90){     // Z(왼쪽으로 돌리기)
        playerRotate(-1);
    }else if(event.keyCode === 88){     // X(오른쪽으로 돌리기)
        playerRotate(1);
    }
});

const colors = [
    null,
    "#ff0d72",
    "#0dc2ff",
    "#0dff72",
    "#f538ff",
    "#ff8e0d",
    "#ffe138",
    "#3877ff",
];

const arena = createMatrix(12, 20);
let block = [];
const player = {
    pos: {x: 0, y: 0},
    matrix: null,
    score: 0,
};
playerReset();
updateScore();
update();
body{
    background: #202028;
    color: #fff;
    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
}

canvas{
    border: solid 0.2em #fff;
    height: 90vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tetris | KDYa08</title>
</head>
<body>
    

    <div id="score"></div>
    <canvas id="tetris" width="240" height="400"></canvas>


    <script src="index.js"></script>
</body>
</html>

let randomNum = (pieces.length * Math.random()) | 0
    if ((block.indexOf(0) !== -1) && (block.indexOf(1) !== -1) && (block.indexOf(2) !== -1) && (block.indexOf(3) !== -1) && (block.indexOf(4) !== -1) && (block.indexOf(5) !== -1) && (block.indexOf(6) !== -1)) {
        block = [];
        block.push(randomNum);
    } else if(block.indexOf(randomNum) === -1){
        while(block.indexOf(randomNum) === -1){
            randomNum = (pieces.length * Math.random()) | 0
        };
        block.push(randomNum);
    } else{
        block.push(randomNum);
    }

The randomNum value must be entered without duplication in the block list.

0

There are 0 best solutions below