Diskuze: Canvas a tetris - nesmyslný bug?

Jan Demel

Tvůrce

Jan Demel:29.1.2017 10:23

Ahoj. Řekl jsem si, že si v JS zkusím napsat tetris, ale objevil se tu nějaký problém, který nemůžu pochopit. Objekty ještě nemají naprogramovanou kolizi (tzn. když se jeden objekt dotkne druhého, nepřestane se hýbat). Je naprogramovaná pouze kolize se spodní hranou canvasu. Problém ovšem nastává, když na jedno místo spadne kolem 4 objektů a více. Z ničeho nic se začnou generovat objekty, které se ve hře nikdy neobjeví a hned zanikají (můžete se podívat do konzole, kde se logujou proměnné gObj - všechny objekty ve hře kromě aktivního objektu a aObj - aktivní objekt).

Absolutně vůbec nechápu, čím to může být způsobeno. Myslíte, že canvas má nějaký maximální možný počet rectanglů, které se mohou překrývat a tím je to způsobené? Myslíte, že když doprogramuju kolizi, že všechno bude ok?

Přikládám kompletní složku projektu, abyste se mohli podívat pořádně na zdroják, který tady dám ještě navíc zvlášť.

Project folder: https://mega.nz/#…

var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');

var cvWidth = 400;
var cvHeight = 600;
var cSize = 38;
var cPaddingSize = 40;
var gSpeed = 1000;
var aObj = null;
var gObj = [];
var dObj = [];
var gInterval = null;

var dObj1 = {
    color: '#3498db',
    parts: [[4, 0], [5, 0], [6, 0], [5, 1]]
};

var dObj2 = {
    color: '#e74c3c',
    parts: [[3, 0], [4, 0], [5, 0], [6, 0]]
};

var dObj3 = {
    color: '#9b59b6',
    parts: [[4, 0], [5, 0], [3, 1], [4, 1]]
};

var dObj4 = {
    color: '#2ecc71',
    parts: [[3, 0], [4, 0], [4, 1], [5, 1]]
};

var dObj5 = {
    color: '#1abc9c',
    parts: [[4, 0], [5, 0], [4, 1], [5, 1]]
};

var dObj6 = {
    color: '#f1c40f',
    parts: [[3, 0], [4, 0], [5, 0], [5, 1]]
};

var dObj7 = {
    color: '#e67e22',
    parts: [[3, 0], [4, 0], [5, 0], [3, 1]]
};

dObj.push(dObj1, dObj2, dObj3, dObj4, dObj5, dObj6, dObj7);

var nObjId = 1;

function eHandler(){
    if(event.keyCode == 39){
        for(i = 0; i < aObj['parts'].length; i++){
            aObj['parts'][i][0]++;
        }
    } else if(event.keyCode == 37){
        for(i = 0; i < aObj['parts'].length; i++){
            aObj['parts'][i][0]--;
        }
    }
    reDraw();
    document.onkeydown = null;
}

function reDraw(){
    ctx.clearRect(0, 0, cvWidth, cvHeight);
    /* DRAWING ACTIVE GAME OBJECT */
    ctx.fillStyle = aObj['color'];
    for(i = 0; i < aObj['parts'].length; i++){
        ctx.fillRect(aObj['parts'][i][0] * cPaddingSize + 1, aObj['parts'][i][1] * cPaddingSize + 1, cSize, cSize);
    }

    /* DRAWING STATIC GAME OBJECTS */
    for(i = 0; i < gObj.length; i++){
        for(p = 0; p < gObj[i]['parts'].length; p++){
            ctx.fillStyle = gObj[i]['color'];
            ctx.fillRect(gObj[i]['parts'][p][0] * cPaddingSize + 1, gObj[i]['parts'][p][1] * cPaddingSize + 1, cSize, cSize);
        }
    }
}

document.onkeydown = eHandler;
document.onkeyup = function(){
    this.onkeydown = eHandler;
};

if(aObj == null){
    var nObj = dObj[Math.floor((Math.random() * 7))];
    nObj['id'] = nObjId;
    nObjId++;
    aObj = nObj;
}

function draw(){
    ctx.clearRect(0, 0, cvWidth, cvHeight);

    /* DRAWING ACTIVE GAME OBJECT */
    ctx.fillStyle = aObj['color'];
    for(i = 0; i < aObj['parts'].length; i++){
        ctx.fillRect(aObj['parts'][i][0] * cPaddingSize + 1, aObj['parts'][i][1] * cPaddingSize + 1, cSize, cSize);
    }

    /* DRAWING STATIC GAME OBJECTS */
    for(i = 0; i < gObj.length; i++){
        for(p = 0; p < gObj[i]['parts'].length; p++){
            ctx.fillStyle = gObj[i]['color'];
            ctx.fillRect(gObj[i]['parts'][p][0] * cPaddingSize + 1, gObj[i]['parts'][p][1] * cPaddingSize + 1, cSize, cSize);
        }
    }

    for(i = 0; i < aObj['parts'].length; i++){
        aObj['parts'][i][1]++;
    }

    console.log(aObj);
    console.log(gObj);

    for(i = 0; i < aObj['parts'].length; i++){
        if(aObj['parts'][i][1] >= 14){
            gObj.push(aObj);
            var nObj = dObj[Math.floor((Math.random() * 7))];
            nObj['id'] = nObjId;
            nObjId++;
            aObj = nObj;
            break;
        }
    }
}

gInterval = setInterval(draw, 1000);

Odpovědět

29.1.2017 10:23

To co se zdá být nemožné, je vždy možné.

Vyhodit desetitisíce za IT školení?! Naše prezenční výuka je od 1.999 Kč!

Zjistit více...

Vyhodit desetitisíce za IT školení?! Naše prezenční výuka je od 1.999 Kč!

Více zde »

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.