在JavaScript俄罗斯方块中绘制新的方块

Draw new tetrominos in JavaScript tetris

本文关键字:方块 绘制 俄罗斯 JavaScript      更新时间:2023-09-26

我试图在JavaScript中绘制tetrominos,我遇到了一些麻烦。我想我有密码,这个。Blocks = i.blocks[b][c]是不正确的,但它可能更多。既然我的眼睛开始疼了,我决定寻求帮助。这是否。block = i.block [b][c]不工作,因为这个。块不能存储数组?还是有别的问题?谢谢你的帮助。

这里是jsfiddle链接:http://jsfiddle.net/8aS9E/

代码如下:

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        var h = canvas.height;
        var w = canvas.width;
        var gridWidth = w / 4;
        var gridHeight = h;
        var cols = gridWidth / 10; //width, columns
        var rows = cols; //height, rows
        window.addEventListener("keydown", test, true); 
        var b = 0;
        var c = 0;
    var gravity = 0;
    var id;
    var type = 2;
    var color; 
    var x = gridWidth * 2;
    var y = -30;
    var position;
    var velocityY;
    var tetrominoId = 0;
  var i = { id: 'i', size: 4, 
                blocks: [[0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0]], 
                color: 'cyan'   };
function tetromino(id, type, color, position, y, velocityY){
    this.id = i.id;
    this.blocks = i.blocks[b][c];
    this.color = i.color;
    this.x = x;
    this.y = y;
    this.velocityY = 1;
}
var tetrominoList = [];
function addTetromino(type, color, position, x, y, velocityY){
tetrominoList[tetrominoId] = new tetromino(tetrominoId, type, color, x, y, velocityY);
tetrominoId++;
}
function tetrominoDraw(){
        tetrominoList.forEach(function(tetromino){
        for(b = 0; b < 4; b++){
            for(c = 0; c < 4; c++){

                    ctx.fillStyle = tetromino.color;
                    ctx.fillRect(
                        gridWidth * 2 + tetromino.blocks[b][c] * 
                        b * cols, tetromino.blocks[b][c] * c * rows + gravity + y,
                        cols, rows
                        );
                    ctx.fill();
                }   
            }
        }   
        });
        }

谢谢!

Blocks不是一个数组,而是一个整数,因为它等于i.blocks的第一个数组的第一个元素的值(i.blocks[0][0],因为b和c变量在初始化时都被定义为零)。

你所要做的就是去掉tetromino声明中的数组地址:

function tetromino(id, type, color, position, y, velocityY) {
    this.id = i.id;
    this.blocks = i.blocks;
    this.color = i.color;
    this.x = x;
    this.y = y;
    this.velocityY = 1;
}

我已经更新了你的小提琴:http://jsfiddle.net/8aS9E/1/