时间戳

首页 > 解决方案 > 在无限地图上绘制精灵的算法

javascript - 在无限地图上绘制精灵的算法

问题描述

我正在 HTML5 画布上制作游戏（它是无限的），我想在我的游戏中随机地从 Perlin 噪音中制作灌木丛。我希望块是 16 x 16 的瓦片网格，每个瓦片彼此相距 85 像素。我只是用这个简单的代码绘制网格：

ctx.lineWidth=4,ctx.strokeStyle="#000",ctx.globalAlpha=.06,ctx.beginPath();
for(var p=-5;p<canvas.width;p+=85){ctx.moveTo(p + (offset[0] % 85),0),ctx.lineTo(p + (offset[0] % 85),canvas.height)};
for(var m=-5;m<canvas.height;m+=85){ctx.moveTo(0,m + (offset[1] % 85)),ctx.lineTo(canvas.width,m + (offset[1] % 85))};
ctx.stroke();
ctx.globalAlpha=1;

这是我为灌木提供的当前代码，但我不知道如何使它真正起作用：

for(x=offset[0];x<offset[0]+16;x++) {
        for(y=offset[1];y<offset[1]+16;y++) {
            if (noise.perlin2(x / 10, y/10) < -0.6) {
              ctx.drawImage(treeimage,  x, y)
            }
        }
    }

我可以访问播放器的当前块，以及基于播放器当前位置的对象偏移量（只需在玩家按下箭头键时添加和减去它）。

编辑：对不起，我没有正确解释这一点。图像显示，当玩家四处移动时，我无法弄清楚如何使灌木丛在屏幕上具有正确的位置，和/或使玩家周围的 8 个块也加载，但仅在屏幕上有东西时显示.

只是一个例子：

在我稍微移动之前： 在此处输入图像描述

在我移动了一下之后： 在此处输入图像描述

标签： javascripthtmlcanvashtml5-canvas

解决方案

在你打电话之前

ctx.drawImage(treeimage,  x, y)

您必须确保从服务器检索图像。

一种方法是在页面上插入一个小 IMG 标签，然后从中检索图像

<img id="treeimage" src="images/mapobjects/tree2.png" style="display:none;">

window.onload = function() { //use onload if you create drawing at page load 
var treeimage = document.getElementById("treeimage");
ctx.drawImage(treeimage, x, y);
}

另一种方法是通过代码创建IMG标签，从不显示，但确保它具有onload功能。从现在起调用后，您可以随时使用您的图像。

window.treeimage = document.createElement('img'); //make it global or take care about scope
treeimage.src = "images/mapobjects/tree2.png";

treeimage.onload = function(){
  //only from now you can use that image
  ctx.drawImage(treeimage, x, y);
};

推荐阅读