我正在尝试使用画布制作网络游戏来绘制网格并在网格内部随机放置障碍物。网格将通过网格发射“激光”。如果“激光”碰到障碍物，它会弹起并以一定角度离开栅格。然后，游戏会告诉用户激光离开栅格的数字，并为用户提供猜测障碍物所在位置的选项。
我的代码如下。我正在学习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 && 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，并且在网格中放置了隐藏的障碍物，除非用户在该特定位置做出了正确的猜测，否则用户看不到这些障碍物。