为什么每次精灵移动时我的地图都会消失
Why does my map disappear every time my sprite moves?
我想在这个周末打第一场比赛。我终于让我的矩形和我的地图同时出现了。我的矩形可以移动!但只要我点击一个按钮移动它,地图就会消失。这是我需要进行某种游戏循环以在每次点击按钮或设置计时器时不断更新地图的地方吗?或者我有其他类型的错误?谢谢大家!
var canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = "";
var mapArray =
["############################",
"# # # o ##",
"# #",
"# #### ##### ## #",
"## # # ## #",
"### ## # #",
"# ### # #",
"# #### ### #",
"# ## # o #",
"# o # # o ### ### #",
"# # # #",
"############################"];
//need to add wall.scource = and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";
var posX = 0;
var posY = 0;
//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
for (var x = 0; x < mapArray[0].length; x++) {
if (mapArray[y][x] == "") {
context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image )
}
if (mapArray[y][x] == "#") {
context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image )
}
}
}
context.rect(posX, posY, 32, 32)
context.stroke();//traces path, might not need this
//moves character
function move(e) {//next five lines are newly added. Final line of function is drawimage function that is new as well
var ctx = canvas.getContext('2d');// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');
//alert(e.keyCode);//gives feedback to what each keyCode is
if (e.keyCode == 39) {
posX += 5;
}
if (e.keyCode == 37) {
posX -= 5;
}
if (e.keyCode == 40) {
posY += 5;
}
if (e.keyCode == 38) {
posY -= 5;
}
canvas.width = canvas.width;//clears the board after each move
context.rect(posX, posY, 32, 32)
context.stroke();
ctx.drawImage(backCanvas, 0, 0);
}
document.onkeydown = move;
jsFiddle:https://jsfiddle.net/j353agny/3/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var mapArray = ["############################",
"# # # o ##",
"# #",
"# #### ##### ## #",
"## # # ## #",
"### ## # #",
"# ### # #",
"# #### ### #",
"# ## # o #",
"# o # # o ### ### #",
"# # # #",
"############################"];
//need to add wall.scource = and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";
// Player position
var posX = 0;
var posY = 0;
//moves character
function move(e) {
//alert(e.keyCode);//gives feedback to what each keyCode is
if (e.keyCode == 39) {
posX += 5;
}
if (e.keyCode == 37) {
posX -= 5;
}
if (e.keyCode == 40) {
posY += 5;
}
if (e.keyCode == 38) {
posY -= 5;
}
}
document.onkeydown = move;
// every 3 miliseconds re-draw the stage with the player
setInterval(function () {
console.log("REDRAW");
// Clear the canvas and redraw
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
for (var x = 0; x < mapArray[0].length; x++) {
if (mapArray[y][x] == "") {
context.drawImage(grass, (32 * x), (32 * y), 32, 32) //last two are size of image )
}
if (mapArray[y][x] == "#") {
context.drawImage(wall, (32 * x), (32 * y), 32, 32) //last two are size of image )
}
}
}
context.fillStyle = "#00F";
context.fillRect(posX, posY, 32, 32)
}, 3);
您所能做的就是使用setInterval,它将每3毫秒运行一次。基本上每3毫秒,我就会得到画布来重新绘制你的墙,然后重新绘制玩家。这将停止任何奇怪的绘图问题。
请注意,您可以使用requestAnimationFrame
而不是setInterval,只是为了让您知道
是的,您的canvas.width = canvas.width;
将清除画布,移动后您将只得到rect
。也可以在move函数中执行所有渲染代码,或者为地图提供一个备份画布,以便在move功能的顶部高效地渲染它,而无需每次都遍历mapArray
。在这里,他们使用备份画布:html5:将画布复制到图像并返回
基于备份画布思想的代码:
var canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = "";
var mapArray =
["############################",
"# # # o ##",
"# #",
"# #### ##### ## #",
"## # # ## #",
"### ## # #",
"# ### # #",
"# #### ### #",
"# ## # o #",
"# o # # o ### ### #",
"# # # #",
"############################"];
//need to add wall.scource = and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";
var posX = 0;
var posY = 0;
//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
for (var x = 0; x < mapArray[0].length; x++) {
if (mapArray[y][x] == "") {
context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image )
}
if (mapArray[y][x] == "#") {
context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image )
}
}
}
// Here you've rendered the static content and you want to save the state of the canvas in a backup at this point:
// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');
// save main canvas contents
backCtx.drawImage(canvas, 0,0);
context.rect(posX, posY, 32, 32)
context.stroke();//traces path, might not need this
//moves character
function move(e) {
canvas.width = canvas.width;//clears the board after each move (not really necessary since we'll draw the backCanvas over it...)
// Render the backup canvas here
context.drawImage(backCanvas, 0,0);
//alert(e.keyCode);//gives feedback to what each keyCode is
if (e.keyCode == 39) {
posX += 5;
}
if (e.keyCode == 37) {
posX -= 5;
}
if (e.keyCode == 40) {
posY += 5;
}
if (e.keyCode == 38) {
posY -= 5;
}
context.rect(posX, posY, 32, 32)
context.stroke();
}
document.onkeydown = move;
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- markrimage在谷歌地图api v3中的特定位置后消失
- “打开街道地图”的长线在高缩放级别下消失
- 点击一定数量的切换后,地图标记会消失
- 谷歌地图缩放控件和标记消失
- 地图框工具提示消失
- 谷歌地图消失了
- 谷歌地图v3neneneba API标记在关闭其信息窗口(InfoBubble)时会消失
- 为什么每次精灵移动时我的地图都会消失
- 谷歌地图-创建标记并使其逐渐消失
- 如何使谷歌地图标记消失一个接一个
- 谷歌地图上的点击信息窗口消失后刷新周期
- 当使用谷歌地图API时,地图消失在我的WordPress网站上
- 我的谷歌地图正在消失
- 谷歌地图API v3 -标记消失后setPosition
- 地图框标记在离地图中心太远时会消失
- 谷歌地图,拖动路线后距离文本消失
- 谷歌地图 - 设置图标代码使标记消失
- 谷歌地图标记消失