Блог

Я пытаюсь создать веб-игру, используя холст для рисования сетки и случайным образом размещая препятствия внутри сетки. Сетка будет стрелять «лазером» через сетку. если «лазер» попадает в препятствие, он отскакивает и выходит из сетки под определенным углом. Затем игра сообщает пользователю, на какое число лазер вышел из сетки, и дает пользователю возможность угадать, где находится препятствие.

Мой код приведен ниже. Я изучаю javascript и canvas, но не могу заставить игру работать. Если бы кто-нибудь мог помочь, я был бы очень благодарен.

 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 amp;amp; x <= 9) break;
    }

    while(true){
        answer = prompt("please enter coordinate (0-9): ");
        alert(answer);
        if (y >= 0 amp;amp; 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 amp;amp; 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 по бокам и иметь скрытые препятствия, размещенные в сетке, которые не видны пользователю, если они не сделали правильное предположение в этом конкретном месте.