由于某种原因，我的代码拒绝让我为每个块分配x和y位置。每个块都是30像素宽和高，并将根据它所属的部分进行着色。重力和清晰的功能尚未实现，左移和右移功能是如此不同，因为它不能正常工作，然后重新创建它，因为现在在左侧功能中看到它并且它工作得更少...
请帮忙！
编辑：道歉，我通常不发布任何内容。我现在无法通过的部分是功能块/添加块/类型设置/分配类型。它很好地分配一个随机的，但是当那个类型（例如方形）去分配x和y值时，它会给出错误。<!DOCTYPE html>
<html>
<head>
<title>Tetris in Canvas</title>
<style type="text/css">
canvas {
border: solid 1px black;
margin: -8px;
}
</style>
<script type="text/javascript">
var canvas = null;
var ctx = null;
var blockArray = [];
var board = [];
var blockNum = 0;
for (var s = 0; s < 14; s++) {
board[s] = [27];
for (var t = 0; t < 27; t++) {
board[s][t] = -1;
}
}
document.onkeydown = function(event) {
var keyCode;
if(event == null)
keyCode = window.event.keyCode;
else
keyCode = event.keyCode;
switch(keyCode) {
case 37:
left(blockArray.length);
break;
case 38:
up(blockArray.length);
break;
case 39:
right(blockArray.length);
break;
case 40:
down(blockArray.length);
break;
default:
break;
}
}
window.onload = function init() {
canvas = document.getElementById('Canvas1');
ctx = canvas.getContext("2d");
blank();
addBlock();
animate();
}
function up(i) {
blank();
animate();
}
function down(i) {
var u = 0;
var p = 0;
while(u<4) {
if (blockArray[i].y[u] + 1 > 26) {
u = 10;
}
else if ((board[blockArray[i].x[u]][blockArray[i].y[u] + 1]) == -1) {
u++;
}
else {
p = u;
for (var g = 0; ((g < 4) && (p = u)); g++) {
if ((blockArray[i].x[u] == blockArray[i].x[g]) && (blockArray[i].y[u] + 1 == blockArray[i].y[g])) {
u++;
}
}
if (p == u)
u = 10;
}
}
if (u < 10) {
for (var j=0; j<4; j++) {
blockArray[i].y[j] +=1;
}
}
else
addBlock();
animate();
}
function right(i) {
var u = 0;
var p = 0;
while(u<4) {
if (blockArray[i].x[u] + 1 > 13) {
u = 10;
}
else if ((board[blockArray[i].x[u] + 1][blockArray[i].y[u]]) == -1)
u++;
else {
p = u;
for (var g = 0; ((g < 4) && (p = u)); g++) {
if ((blockArray[i].x[u] + 1 == blockArray[i].x[g]) && (blockArray[i].y[u] == blockArray[i].y[g]))
u++;
}
if (p == u)
u = 10;
}
}
if (u < 10) {
for (var j=0; j<4; j++) {
blockArray[i].x[j] +=1;
}
}
else
addBlock();
animate();
}
function left(i) {
var u;
var p = 14;
for (var w = 0; w<4; w++) {
if (blockArray[i].x[w] < p) {
p = blockArray[i].x[w];
u = w;
}
}
if (p > 0) {
if ((board[blockArray[i].x[u] - 1][blockArray[i].y[u]]) == -1) {
for (var j=0; j<4; j++) {
blockArray[i].x[j] -=1;
}
}
}
animate();
}
function block(x, y, type) {
blockNum += 1;
this.id = blockNum;
this.x = [];
this.y = [];
this.landed = false;
this.type = Math.floor(Math.random() * (6)) + 1;
typeSet(this.type);
}
function addBlock() {
blockArray[blockArray.length] = new block();
}
function typeSet(type) {
i = blockArray.length;
switch (type) {
case 1:
square(i);
break;
case 2:
elR(i);
break;
case 3:
elL(i);
break;
case 4:
line(i);
break;
case 5:
zeR(i);
break;
case 6:
zeL(i);
break;
default:
break;
}
}
function animate() {
fillBoard();
colorBoard();
}
function fillBoard() {
for (var i = 0; i < 14; i++) {
for (var q = 0; q < 27; q++) {
board[i][q] = -1;
}
}
for (var i=0; i<blockArray.length; i++) {
for (var q=0; q<4; q++) {
board[blockArray[i].x[q]][blockArray[i].y[q]] = blockArray[i].type;
}
}
}
function colorBoard() {
blank();
ctx.strokeStyle = "white";
for(var q=0; q<14; q++) {
for(var r=0; r<27; r++) {
switch (board[q][r]) {
case 1:
ctx.fillStyle = "green";
color(q,r);
break;
case 2:
ctx.fillStyle = "orange";
color(q,r);
break;
case 3:
ctx.fillStyle = "cyan";
color(q,r);
break;
case 4:
ctx.fillStyle = "black";
color(q,r);
break;
case 5:
ctx.fillStyle = "yellow";
color(q,r);
break;
case 6:
ctx.fillStyle = "brown";
color(q,r);
break;
default:
break;
}
}
}
}
function color(q,r) {
ctx.fillRect(q*30,(r-4)*30,30,30);
ctx.strokeRect(q*30,(r-4)*30,30,30);
}
function square(i) {
blockArray[i].x[0] = 7;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 1;
blockArray[i].x[2] = 8;
blockArray[i].y[2] = 0;
blockArray[i].x[3] = 8;
blockArray[i].y[3] = 1;
}
function elR(i) {
blockArray[i].x[0] = 7;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 1;
blockArray[i].x[2] = 7;
blockArray[i].y[2] = 2;
blockArray[i].x[3] = 8;
blockArray[i].y[3] = 2;
}
function elL(i) {
blockArray[i].x[0] = 7;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 1;
blockArray[i].x[2] = 7;
blockArray[i].y[2] = 2;
blockArray[i].x[3] = 6;
blockArray[i].y[3] = 2;
}
function line(i) {
blockArray[i].x[0] = 7;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 1;
blockArray[i].x[2] = 7;
blockArray[i].y[2] = 2;
blockArray[i].x[3] = 7;
blockArray[i].y[3] = 3;
}
function zeR(i) {
blockArray[i].x[0] = 6;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 0;
blockArray[i].x[2] = 7;
blockArray[i].y[2] = 1;
blockArray[i].x[3] = 8;
blockArray[i].y[3] = 1;
}
function zeL(i) {
blockArray[i].x[0] = 8;
blockArray[i].y[0] = 0;
blockArray[i].x[1] = 7;
blockArray[i].y[1] = 0;
blockArray[i].x[2] = 7;
blockArray[i].y[2] = 1;
blockArray[i].x[3] = 6;
blockArray[i].y[3] = 1;
}
function blank() {
ctx.restore();
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
}
function blank2() {
ctx.restore();
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
}
function rotateImgRight() {
for(d = 0; d < 180; d++) {
setTimeout(rotateImg, 50);
}
}
function rotateImgLeft() {
for(d = 0; d < 180; d++) {
setTimeout(rotateImg2, 50);
}
}
function rotateImg2() {
degrees = degrees - 0.5;
radian = (Math.PI / 180.0) * degrees;
blank();
ctx.translate(ctx.canvas.width/2, 700);
ctx.rotate(radian);
ctx.drawImage(srcImg, -srcImg.width/2,-srcImg.height/2);
slide = (degrees / 90) % 4;
}
function rotateImg(x,y) {
degrees = degrees + 0.5;
radian = (Math.PI / 180.0) * degrees;
ctx.translate(x,y);
ctx.rotate(radian);
ctx.drawImage(srcImg, -srcImg.width/2,-srcImg.height/2);
slide = (degrees / 90) % 4;
}
</script>
</head>
<body>
<div style="width: 100%; text-align:center">
<canvas id="Canvas1" width="421" height="690">Your browser does not support canvas.</canvas>
</div>
</body>
</html>
答案 0 :(得分：4)
您的函数addBlock如下所示：
function addBlock() {
blockArray[blockArray.length] = new block();
}
在任意点，你的blockArray长度可以是任何东西。现在让我们假设它是25。
您正在将一个块插入阵列中的第25个位置。
让我们看一下block函数：
function block(x, y, type) {
blockNum += 1;
this.id = blockNum;
this.x = [];
this.y = [];
this.landed = false;
this.type = Math.floor(Math.random() * (6)) + 1;
typeSet(this.type);
}
这个typeSet命令是什么？它看起来不像什么东西！我们来调查一下：
function typeSet(type) {
i = blockArray.length;
switch (type) {
case 1:
square(i);
break;
// blah
}
}
AHA！我发现了问题，square()转到了位置i的blockArray，由于block()尚未执行，它甚至还不存在，并且分配了{{1}的负载}}和x变量到处都是。当y完成执行时，它会覆盖block()刚刚写入的所有值。
您需要重构typeSet()方法，以便它接收实际的块对象并在其上设置typeSet()和x值，而不是尝试访问数组中的元素（它甚至还不存在）：
y答案 1 :(得分：3)
您可以先检查数组是否实际包含您认为包含的项目 例如，在你的左方法中，而不是：
for (var w = 0; w<4; w++) {
if (blockArray[i].x[w] < p) {
p = blockArray[i].x[w];
u = w;
}
}
这样做：
for (var w = 0; w<4; w++) {
if ((blockArray[i]) && (blockArray[i].x[w])) {
if (blockArray[i].x[w] < p) {
p = blockArray[i].x[w];
u = w;
}
}
}
似乎数组没有完全填充并且只在运行时完成，这可能导致undefined引用。
PS：我还没有完全阅读代码;只是其中的一部分，因为它有很多工作要做。