在JavaScript俄罗斯方块中绘制新的方块
Draw new tetrominos in JavaScript tetris
我试图在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/
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 绘制方块 1 英里 x 1 英里
- 在JavaScript俄罗斯方块中绘制新的方块