我目前正在尝试使用JavaScript和Canvas中的tutorial构建蛇游戏。目前,我在以下一行上收到错误消息:grid.set(FOOD, randPos.x, randPos.y);
这是setFood
函数底部的一部分。我不知道.x
的来源,因为我看不到该范围内定义的X或Y。如果有人能指出我正确的方向,以便我能完成我的第一场比赛,我将不胜感激!谢谢。
<script>
//CONSTANTS
var COLS=26;
var ROWS=26;
//ID's
var EMPTY=0;
var SNAKE=1;
var FOOD=2;
//Direction
var LEFT=0;
var UP=1;
var RIGHT=2;
var DOWN=3;
var grid = {
width: null,
height: null,
_grid: null,
init: function(d,c,r){
this.width = c;
this.height = r;
this._grid = [];
for(var x=0; x<c; x++){
this._grid.push([]);
for(var y=0; y < r; y++){
this._grid[x].push(d);
}
}
},
set: function(val,x,y){
this._grid[x][y] = val;
},
get: function(x,y){
this._grid[x][y];
}
}
var snake = {
direction: null,
last: null,
_queue: null,
init: function(d,x,y){
this.direction = d;
this._queue = [];
this.insert(x,y);
},
insert: function(x,y){
this._queue.unshift({x:x, y:y});
this.last = this._queue[0];
},
remove: function(){
return this._queue.pop();
}
}
function setFood(){
var empty = [];
for(var x=0; x<grid.width; x++){
for(var y=0; y<grid.height; y++){
if(grid.get(x,y)===EMPTY){
empty.push({x:x, y:y});
}
}
}
var randPos = empty[Math.floor(Math.random()*empty.length)];
console.log("working");
grid.set(FOOD, randPos.x, randPos.y);
console.log("working???")
}
//Game objects
var canvas, ctx, keystate, frames;
function main(){
canvas = document.createElement('canvas');
canvas.width = COLS*20;
canvas.height = ROWS*20;
ctx = canvas.getContext('2D');
document.body.appendChild(canvas);
frames = 0;
keystate = {};
init();
loop();
}
function init(){
grid.init(EMPTY, COLS, ROWS);
var sp = {x:Math.floor(COLS/2), y:ROWS-1};
snake.init(UP, sp.x, sp.y);
grid.set(SNAKE, sp.x, sp.y);
setFood();
}
function loop(){
update();
draw();
window.requestAnimationFrame(loop, canvas);
}
function update(){
frames++;
}
function draw(){
var tw = canvas.width/grid.width;
var th = canvas.height/grid.height;
for(var x=0; x<grid.width; x++){
for(var y=0; y<grid.height; y++){
switch(grid.get(x,y)){
case EMPTY:
ctx.fillStyle = "#fff";
break;
case SNAKE:
ctx.fillStyle = "#0ff";
break;
case FOOD:
ctx.fillStyle = "#f00";
break;
}
ctx.fillRect(x*tw, y*th, tw, th);
}
}
}
main();
</script>
最佳答案
看一下setFood
函数。在出现错误的行上方只有很少的几行,有一个循环用包含同时包含empty
和x
字段的对象填充y
集合。然后将这些对象之一分配给randPos
变量。
该错误可能是由于将值错误分配给randPos
变量引起的。它是未定义的,因此不包含必需的x
字段。
更新
您似乎只是错过了return
函数中的grid.get(x,y)
关键字,因此它应如下所示:
get: function(x,y){
return this._grid[x][y];
}
请验证添加是否可以解决您的问题。