Javascript 带循环背景图像的画布贴图

我正在开发一款浏览器游戏，我想制作一张地图，在这里你们可以四处走动，和暴徒战斗，买些东西，但只需要地图。其他内容将在不同的页面中

所以我用循环中的多个图像制作了地图。 它从数据库中读取值world、x和y。我已经使它与ajax一起工作，因此页面不会在每次移动时刷新，但我想使用画布制作此地图。

$ystart = $y - 2;
$ymax = $y + 2;
$xstart = $x - 3;
$xmax = $x + 3;
for($y=$ystart;$y<=$ymax;$y++){
    echo "<tr>";
    for($x=$xstart;$x<=$xmax;$x++){


       // echo "<td><img src=images/map/day/".$x."_".$y.".jpg width=100 height=100 border=0></td>\n";
        if($x==$posx and $y==$posy){
            echo "<td background=images/map/world_".$world."/".$y."_".$x.".jpg><img src=images/char.png width=100 height=100 border=0></td>";
        } else{
            echo "<td><img src=images/map/world_".$world."/".$y."_".$x.".jpg width=100 height=100 border=0></td>";
        }

    }
    echo "</tr>";
}?>

我的配子；
var myUpBtn；
var-myDownBtn；
var myLeftBtn；
var myRightBtn；
函数startName（）{
myGamePiece=新组件（30,30，“红色”，10,120）；
myUpBtn=新组件（30,30，“蓝色”，50,10）；
myDownBtn=新组件（30,30，“蓝色”，50,70）；
myLeftBtn=新组件（30,30，“蓝色”，20,40）；
myRightBtn=新组件（30,30，“蓝色”，80,40）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
this.canvas.width=480；
this.canvas.height=270；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
this.interval=setInterval（updateGameArea，20）；
window.addEventListener（'mousedown'，函数（e）{
myGameArea.x=e.pageX；
myGameArea.y=e.pageY；
})
window.addEventListener（'mouseup'，函数（e）{
myGameArea.x=false；
myGameArea.y=false；
})
window.addEventListener（'touchstart'，函数（e）{
myGameArea.x=e.pageX；
myGameArea.y=e.pageY；
})
window.addEventListener（'touchend'，函数（e）{
myGameArea.x=false；
myGameArea.y=false；
})
window.addEventListener（'keydown'，函数（e）{
myGameArea.key=e.keyCode；
})
window.addEventListener（'keyup'，函数（e）{
myGameArea.key=false；
})
},
清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
}
功能组件（宽度、高度、颜色、x、y）{
这个。宽度=宽度；
高度=高度；
这是0.speedX=0；
该值为0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
ctx.fillStyle=颜色；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
this.clicked=function（）{
var myleft=this.x；
var myright=this.x+（this.width）；
var mytop=this.y；
var mybottom=this.y+（this.height）；
var=true；
if（（mybottommyGameArea.y）| |（myrightmyGameArea.x））{
单击=假；
}
点击返回；
}
this.newPos=函数（）{
this.x+=this.speedX；
this.y+=this.speedY；
}
}
函数updateGameArea（）{
myGameArea.clear（）；
myGamePiece.speedX=0；
myGamePiece.speedY=0；
if（myGameArea.x&&myGameArea.y）{
如果（myUpBtn.clicked（））{
myGamePiece.y-=1；
}
如果（myDownBtn.clicked（））{
myGamePiece.y+=1；
}
如果（myLeftBtn.clicked（））{
myGamePiece.x+=-1；
}
如果（myRightBtn.clicked（））{
myGamePiece.x+=1；
}
}
myGamePiece.speedX=0；
myGamePiece.speedY=0；
if（myGameArea.key&（myGameArea.key==37 | | myGameArea.key==65））{
myGamePiece.speedX=-1；
}
if（myGameArea.key&（myGameArea.key==39 | | myGameArea.key==68））{
myGamePiece.speedX=1；
}
if（myGameArea.key&（myGameArea.key==38 | | myGameArea.key==87））{
myGamePiece.speedY=-1；
}
if（myGameArea.key&（myGameArea.key==40 | | myGameArea.key==83））{
myGamePiece.speedY=1；
}
myGamePiece.newPos（）；
myUpBtn.update（）；
myDownBtn.update（）；
myLeftBtn.update（）；
myRightBtn.update（）；
myGamePiece.update（）；
}

我自己也在努力学习canvas，所以我一直在浏览这些问题。我认为你的练习会很有趣

基本上，我正在创建一个对象，并在每次迭代中移动它。我会不断检查我的物体的x位置。根据它的值，我可以改变背景图像

试试这个，自己看看。尝试移动右箭头键，然后再移动左箭头键。您将注意到背景图像的变化

var canvas=document.getElementById（“我的画布”）；
var ctx=canvas.getContext（“2d”）；
canvas.style.backgroundImage=“url（'http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-26.jpg')";
功能英雄（x，y）{
这个.x=x；
这个。y=y；
this.moveLeft=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
这个.x-=5；
drawHero（this.x，this.y）；
};
this.moveRight=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
这个.x+=5；
drawHero（this.x，this.y）；
};
this.moveUp=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
这个.y-=5；
drawHero（this.x，this.y）；
}
this.moveDown=函数（）{
clearRect（0，0，canvas.width，canvas.height）；
这个.y+=5；
drawHero（this.x，this.y）；
}
}
函数（x，y）{
ctx.fillStyle=“红色”；
ctx.fillRect（x，y，10，10）；
}
var hero1=新英雄（40,40）；
ctx.fillStyle=“红色”；
ctx.fillRect（40,40,10,10）；
window.addEventListener（“按键向下”，函数（事件）{
如果（event.keyCode==38）{
1.moveUp（）；
}
else if（event.keyCode==37）{
hero1.moveLeft（）；
}
else if（event.keyCode==39）{
hero1.moveRight（）；
}
否则{
1.moveDown（）；
}
});
塞廷