Diskuze: Canvas a tetris - nesmyslný bug?

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

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é.

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.