javascript - 如何在画布中绘制一个网格，每个正方形中都有随机障碍物？

Question

我正在尝试使用画布制作网络游戏来绘制网格，并在网格内部随机放置障碍物。网格将通过网格发射“激光”。如果“激光”击中障碍物，它会反弹并以一定角度离开网格。然后，游戏会告诉用户激光在哪个数字处离开网格，并让用户选择猜测障碍物的位置。

我的代码如下。我正在学习 javascript 和画布，但我无法让游戏正常工作。如果有人可以提供帮助，我将不胜感激。

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var answer;
var cell = [10][10];
var history = new Array();
var cellString = [[" . "," . "," . "," / ", " \\ "]];
var guessed = 0, total;
var random = Math.random() ;
function setup() {
    draw(10,10);
    drawScreen();
}


var bafflesPlaced = function(){
    this.total = 5;
    var placed = 0;

    while(placed < total){
        this.x = random(10);
        this.y = random(10);
        var type = random(2) + 1;
        if(cell[x][y] == 0){
            cell[x][y] = type;
            placed++;
        }
    }

    var choice = document.getElementById('yourOption');
    choice.innerHTML = "";
    while(true){
        drawScreen(false);
        choice = prompt("\n1.) Shoot 2.) Guess 3.) Quit: ");
        alert(choice);
        if (choice == 1) shoot();
        if (choice == 2) guess();
        if (choice == 3) break;

    }

}

var guess = function(){
    drawScreen(true);
    var type;
    var x = 0, y = 0;
    x.innerHTML = "";
    y.innerHTML = "";

    var answer = document.getElementById('yourAnswer');
    while(true){
        answer = prompt("please enter coordinate (0-9): ");
        alert(answer);
        if (x >= 0 && x <= 9) break;
    }

    while(true){
        answer = prompt("please enter coordinate (0-9): ");
        alert(answer);
        if (y >= 0 && y <= 9) break;
    }
    answer = prompt("Please enter type (/ or \\): ");
    alert(answer);
    var choice = type == '/' ? 1 : 2;
    if ($cell[x][y] == choice){
        alert("\nCorrect!");
        $cell[x][y] += 2;
        guessed++;
        alert("\nCorrect guesses: " + guessed);

        if (guessed == total){
            alert("\nYou found all of the baffles! Congratualtions!");
            //window.close();
            document.location.reload();
            clearInterval(interval);
        }
    }
    else alert("\nFalse!");

    var shoot = function(){
        choice = prompt("\nEnter entry point: 0-39");
        alert(choice);
        var choice, x = 0, y = 0, xd = 0, yd = 0;

        while(true){
            if(choice >= 0 && choice <= 39) break;
            choice = prompt("Please enter a number from 0-39: ");
            alert(choice);
        }

        var side = choice / 10;
        var where = choice % 10;
        switch (side){
            case 0:
                y = -1;
                xd = 0;
                yd = 1;
                break;
            case 1:
                y = where; 
                x = 10;
                xd = -1;
                yd = 0;
                break;
            case 2:
                x = 9 - where;
                y = 10;
                xd = 0;
                yd = -1;
                break;
            case 3: 
                x = -1;
                y = 9 - where;
                xd = 1;
                yd = 0; 
        }

        var t;
        while(true){
            //move one
            x += xd;
            y += yd; 
            if (x == -1 || x == 10 || y == -1 || y ==10) break;
            //baffle: /
            if (cell[x][y] == 1 || cell[x][y] == 3){
                t = xd; 
                xd = -yd;
                yd = -t;

            }
            //baffle: /
            if (cell[x][y] == 2 || cell[x][y] == 4){
                t = xd;
                xd = yd;
                yd = t;
            }

        }
        exit = draw(x,y);
        alert("Exit at" + exit + "\n");
        history.add(console.log("%d > %s", choice, exit));

    }

}

var draw = function(x,y){
    c.empty = " ";
    if (x == -1){
        if (y == -1 || y == 10) return c.empty;
        return (c(c.empty, 39-y));
    }
    if (x == 10){
        if (y == -1 || y == 10) return c.empty;
        return (c(c.empty, y + 10));
    }
    if (y == -1){
        return (c(c.empty, x));
    }
    if (x == 10){
        if (y == -1 || y == 10) return empty;
        return (c(c.empty, 29 - x));
    }
    return cellString[cell[x][y]];

}

var drawScreen = function(guess){
    //var canvas = document.getElementById("canvas");
    //var c = canvas.getContext("2d");
    c.fillStyle="grey";
    c.fillRect(0,0, canvas.width, canvas.height);
    c.stroke(0);
    c.strokeWeight(1);
    c.lineTo(x, 0, x, canvas.height);
    c.lineTo(0, y, canvas.width, y);

    if (guess){
        for (var y = -1; y < 10; y += canvas.height / 10){
            for (var y = -1; y < 10; x += canvas.width / 10){
                /*
                c.stroke(0);
                c.strokeWeight(1);
                c.line(this.x, 0, this.x, this.height);
                c.line(0, this.y, this.width, y);*/
                if ( y == -1){
                    if (x > -1){
                        console.log(" %d", x);
                    }
                    else
                    document.print(" ");
                } else if ( x == -1){
                    if (y > -1) 
                        console.log(" %d", y);
                } else
                 draw(x,y);
            }
            return;

        }
    } else {
        for (var y = -1; y <= 10; y += canvas.height / 10){
            for (var x = -1; x <= 10; x += canvas.width / 10){
                draw(x,y);
            }
            for ( var h = y + 1; h < 100; h +=12){
                if (h < history.length()) document.print("\t" + history.get(h) + "\t");
            }
        }return;
    }
}
setup();

我想要一个 10X10 的网格，其两侧编号为 0-39，并在网格中放置隐藏的障碍物，除非他们在该特定位置做出正确的猜测，否则用户看不到这些障碍物。

标签： javascriptcanvas