JSON 文件包含这些信息以某种（逻辑）方式的特定障碍物位置
问题遇到的现象和发生背景
让网格内的一些方格被认为是不允许碰撞的障碍物C。 一个案例C 试图移动到障碍物方格的处理与 C 试图移动的情况类似网格之外（包括显示文本失败消息，但显示的实际消息文本可能不同）。 障碍物方块应在视觉上与普通（空）方块区分开来，C正方形和目标正方形。创建一个 JSON 文件障碍.json 并将其用作 json-server 的“数据库”。 服务结果API 使用 localhost 上的端口 3010。 在开始移动 C 之前，页面应该调用此 API 来读取
障碍物位置并相应地初始化网格。障碍物位置应该是那些.如图 1 所示（使用深灰色）。 所以，JSON 文件应该包含这些信息以某种（逻辑）方式的特定障碍物位置。
问题相关代码，请勿粘贴截图
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Snake</title>
</head>
<body style="text-align:center;margin:100px;background-color:#fef6e4">
<canvas id="canv" width="400" height="400" style="background-color:#f3d2c1">
</canvas>
<script>
var box=document.getElementById('canv').getContext('2d');
var snake;
var direction;
var n;
var food;
var istrue;
function draw(point,color){
box.fillStyle=color;
box.fillRect(point%20*20,~~(point/20)*20,19,19);
}
(function() {ready();} () );
function ready(){
for(var i=0;i<400;i++){
draw(i,"#eebbc3");}
snake=[0];
direction=1;
food=399;
istrue=true;
draw(food,"red");
draw(0,"#e53170");
}
function run(){
istrue=true;
document.getElementById("butn").setAttribute("disabled",true);
snake.unshift(n=snake[0]+direction);
if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||(direction==1&&n%20==0)){
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("Game Over!");}
draw(n,"#e53170");
if(n==food)
{
while(snake.indexOf(food=~~(Math.random()*400))>0){continue;};
draw(snake.shift(),"red");
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("Great!");
}
else{
draw(snake.pop(),"#eebbc3");
}
setTimeout(arguments.callee,300);
}
document.onkeydown=function(e){
if(istrue){
if(direction==1||direction==-1){
if(e.keyCode==38)
{direction=-20;istrue=false;}
if(e.keyCode==40)
{direction=20;istrue=false;}}
if(direction==20||direction==-20){
if(e.keyCode==39)
{direction=1;istrue=false;}
if(e.keyCode==37)
{direction=-1;istrue=false;}
}}}
</script>
<div>
<button id="butn" type="button" onclick="run()">Start!</button>
</div>
</body>
</html>
我想要达到的结果
下面代码随机生成障碍物，服务器加载，json文件内容为障碍物下标数组，然后用ajax加载
效果如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Snake</title>
</head>
<body style="text-align:center;margin:100px;background-color:#fef6e4">
<canvas id="canv" width="400" height="400" style="background-color:#f3d2c1">
</canvas>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
///////////障碍物生成
var obstacle = [];//障碍物
var num = Math.ceil(Math.random() * 50);//随机生成50个以内障碍物
while (num > 0) {
while (true) {//生成位置不一样的障碍物
var index = Math.floor(Math.random() * 400);
if (index != 0 && index != 399 && obstacle.findIndex(i => i == index) == -1) {
obstacle.push(index);
break;
}
}
num--;
}
//////////ajax可以用下面的代码
/*$.ajax({
///注意修改路径
url: 'xxxx.json',//自己整个障碍物数组，内容为障碍物下标，比如 [64, 393, 31, 135, 111, 328, 53, 204, 154, 373, 183, 309, 394, 221, 290, 36, 360, 307, 230, 164, 147, 381, 193, 256, 238, 141]
cache: false,
dataType: 'json',
success: function (data) {//加载成功设置障碍物后执行ready重绘画布
window.obstacle = data;
ready();
},
error: function () {
alert('JSON文件不存在或者内容错误！')
}
})*/
///////////
var box = document.getElementById('canv').getContext('2d');
var snake;
var direction;
var n;
var food;
var istrue;
function draw(point, color) {
if (obstacle.findIndex(i => i == point) != -1) {
color = '#666666';//绘制的块包含在障碍物中，更改色块颜色
}
box.fillStyle = color;
box.fillRect(point % 20 * 20, ~~(point / 20) * 20, 19, 19);
}
(function () { ready(); }());//ajax这句不需要，当然加上也没问题
function ready() {
for (var i = 0; i < 400; i++) {
draw(i, "#eebbc3");
}
snake = [0];
direction = 1;
food = 399;
istrue = true;
draw(food, "red");
draw(0, "#e53170");
}
function run() {
istrue = true;
document.getElementById("butn").setAttribute("disabled", true);
snake.unshift(n = snake[0] + direction);
if (obstacle.findIndex(i => i == n) != -1//碰到障碍物
|| snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || (direction == -1 && n % 20 == 19) || (direction == 1 && n % 20 == 0)) {
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("Game Over!");
}
draw(n, "#e53170");
if (n == food) {
while (snake.indexOf(food = ~~(Math.random() * 400)) > 0) { continue; };
draw(snake.shift(), "red");
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("Great!");
}
else {
draw(snake.pop(), "#eebbc3");
}
setTimeout(arguments.callee, 300);
}
document.onkeydown = function (e) {
if (istrue) {
if (direction == 1 || direction == -1) {
if (e.keyCode == 38) { direction = -20; istrue = false; }
if (e.keyCode == 40) { direction = 20; istrue = false; }
}
if (direction == 20 || direction == -20) {
if (e.keyCode == 39) { direction = 1; istrue = false; }
if (e.keyCode == 37) { direction = -1; istrue = false; }
}
}
}
</script>
<div>
<button id="butn" type="button" onclick="run()">Start!</button>
</div>
</body>
</html>
