javascript - canvas - 瓷砖没有完全呈现-6ren

javascript - canvas - 瓷砖没有完全呈现

转载作者：行者123 更新时间：2023-11-30 00:08:22

我正在使用 Canvas API 在 Javascript 中制作基于图 block 的游戏。我一直在关注 square tilemap scrolling tutorial在 MDN。它可以工作，但是当您移动相机时，它不会渲染所有图 block ，尤其是当您将它向下和向右移动时。我已尝试使用教程的代码复制和粘贴并替换我的代码，但它仍然不起作用。

这是客户端代码:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tiles = new Image();
tiles.src = "img/tiles.png";
var socket = io();

function Loader(game) {
  this.game = game;
  this.images = {}
}

Loader.prototype.loadImage = function(id, url, tile) {
  var image = new Image();
  image.src = url;
  this.images[id] = {
    img: image,
    url: url,
    tile: tile
  }
}

Loader.prototype.ready = function() {
  this.game.loadImages(this.images);
}



function Game(canvas, map,camera) {
  this.canvas = canvas;
  this.ctx = this.canvas.getContext('2d');
  this.monsters = [];
  this.player = {};
  this.map = map;
  this.timestamp = function() {
    return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
  }
  this.camera = camera||{
    x: 0,
    y: 0,
    width: 256,
    height: 256
  }

}

Game.prototype.init = function(ts) {
  this.current = {
    tileset: this.images[ts]
  }
  this.width = this.map.cols * this.map.tsize;
  this.height = this.map.rows * this.map.tsize;
  this.canvas.height=1000;
  this.canvas.width=1000;
  this.camera.maxX = this.map.cols * this.map.tsize - this.camera.width;
  this.camera.maxY = this.map.rows * this.map.tsize - this.camera.height;
}

Game.prototype.loadImages = function(images) {
  this.images = images;
}

Game.prototype.start = function() {

  this.now = 0;
  this.dt = 0;
  this.last = this.timestamp();
  this.frame();
}

Game.prototype.update = function(delta) {
  var dirx = 0;
    var diry = 0;
    if (KEYS.LEFT) { dirx = -1; }
    if (KEYS.RIGHT) { dirx = 1; }
    if (KEYS.UP) { diry = -1; }
    if (KEYS.DOWN) { diry = 1; }

    this.camera.move(delta, dirx, diry);
}

Game.prototype.render = function(delta) {
  this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
  var startCol = Math.floor(this.camera.x / this.map.tsize);
  var endCol = startCol + (this.camera.width / this.map.tsize);
  var startRow = Math.floor(this.camera.y / this.map.tsize);
  var endRow = startRow + (this.camera.height / this.map.tsize);
  var offsetX = -this.camera.x + startCol * this.map.tsize;
  var offsetY = -this.camera.y + startRow * this.map.tsize;
  for(var c = startCol; c <= endCol; c++) {
    for(var r = startRow; r <= endRow; r++) {
      var tile = this.getTile(c, r);
      var x = (c - startCol) * this.map.tsize + offsetX;
      var y = (r - startRow) * this.map.tsize + offsetY;
      if(tile !== 0) {
        ctx.drawImage(
          this.current.tileset.img, //image
          (tile - 1) * this.map.tsize,
          0,
          this.map.tsize,
          this.map.tsize,
          Math.round(x),
          Math.round(y),
          this.map.tsize,
          this.map.tsize
        )
      }
    }
  }
}

Game.prototype.frame = function() {
  this.now = this.timestamp();
  this.dt = (this.now - this.last) / 1000; // duration in seconds
  this.update(this.dt);
  this.render(this.dt);
  this.last = this.now;
  requestAnimationFrame(this.frame.bind(this));
};


Game.prototype.getTile = function(x, y) {
  return this.map.layer[y * this.map.cols + x];
}


function Camera(map, width, height) {
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.maxX = map.cols * map.tsize - width;
    this.maxY = map.rows * map.tsize - height;
}

Camera.SPEED = 256; // pixels per second

Camera.prototype.move = function (delta, dirx, diry) {
    // move camera
    this.x += dirx * Camera.SPEED * delta;
    this.y += diry * Camera.SPEED * delta;
    // clamp values
    this.x = Math.max(0, Math.min(this.x, this.maxX));
    this.y = Math.max(0, Math.min(this.y, this.maxY));
};

var KEYS = {

};

function handleKey(down, e, key) {
  switch(key) {
    case 37:
      KEYS.LEFT = down;
      break;
    case 38:
      KEYS.UP = down;
      break;
    case 39:
      KEYS.RIGHT = down;
      break;
    case 40:
      KEYS.DOWN = down;
      break;
    default:
      KEYS[String.fromCharCode(key)] = down;
      break;
  }
};


document.onkeydown = function(e) {
  handleKey(true, e, e.which);
};

document.onkeyup = function(e) {
  handleKey(false, e, e.which);
};

function getHelp(s) {
  socket.emit('help', s);
}

var map = {
  cols: 12,
  rows: 12,
  tsize: 64,
  layer: [
3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
3, 3, 3, 1, 1, 2, 3, 3, 3, 3, 3, 3
  ]
};
var camera = new Camera(map,256,256);
var game = new Game(canvas, map,camera);

var loader = new Loader(game);

loader.loadImage('set1', 'img/tiles.png', 64);
loader.ready();

game.init('set1');
game.start();

您还可以找到存储库 here .

最佳答案

您的游戏运行良好。你有一个 256x256 像素的相机窗口。在渲染过程中，这个空间完全被瓦片填满。如果您对相机窗口外“消失”的瓷砖感到困扰，请使用 clipping rectangle或缩小 Canvas 尺寸以对应相机尺寸。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function Loader(game) {
  this.game = game;
  this.images = {}
}

Loader.prototype.loadImage = function(id, url, tile) {
  var image = new Image();
  image.src = url;
  this.images[id] = {
    img: image,
    url: url,
    tile: tile
  }
}

Loader.prototype.ready = function() {
  this.game.loadImages(this.images);
}

function Game(canvas, map,camera) {
  this.canvas = canvas;
  this.ctx = this.canvas.getContext('2d');
  this.monsters = [];
  this.player = {};
  this.map = map;
  this.timestamp = function() {
    return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
  }
  this.camera = camera||{
    x: 0,
    y: 0,
    width: 256,
    height: 256
  }

}

Game.prototype.init = function(ts) {
  this.current = {
    tileset: this.images[ts]
  }
  this.width = this.map.cols * this.map.tsize;
  this.height = this.map.rows * this.map.tsize;
  this.canvas.width = this.camera.width;
  this.canvas.height = this.camera.height;
  this.camera.maxX = this.map.cols * this.map.tsize - this.camera.width;
  this.camera.maxY = this.map.rows * this.map.tsize - this.camera.height;
}

Game.prototype.loadImages = function(images) {
  this.images = images;
}

Game.prototype.start = function() {

  this.now = 0;
  this.dt = 0;
  this.last = this.timestamp();
  this.frame();
}

Game.prototype.update = function(delta) {
  var dirx = 0;
    var diry = 0;
    if (KEYS.LEFT) { dirx = -1; }
    if (KEYS.RIGHT) { dirx = 1; }
    if (KEYS.UP) { diry = -1; }
    if (KEYS.DOWN) { diry = 1; }

    this.camera.move(delta, dirx, diry);
}

Game.prototype.render = function(delta) {
  this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
  var startCol = Math.floor(this.camera.x / this.map.tsize);
  var endCol = startCol + (this.camera.width / this.map.tsize);
  var startRow = Math.floor(this.camera.y / this.map.tsize);
  var endRow = startRow + (this.camera.height / this.map.tsize);
  var offsetX = -this.camera.x + startCol * this.map.tsize;
  var offsetY = -this.camera.y + startRow * this.map.tsize;
  for(var c = startCol; c <= endCol; c++) {
    for(var r = startRow; r <= endRow; r++) {
      var tile = this.getTile(c, r);
      var x = (c - startCol) * this.map.tsize + offsetX;
      var y = (r - startRow) * this.map.tsize + offsetY;
      if(tile !== 0) {
        ctx.drawImage(
          this.current.tileset.img, //image
          (tile - 1) * this.map.tsize,
          0,
          this.map.tsize,
          this.map.tsize,
          Math.round(x),
          Math.round(y),
          this.map.tsize,
          this.map.tsize
        )
      }
    }
  }
}

Game.prototype.frame = function() {
  this.now = this.timestamp();
  this.dt = (this.now - this.last) / 1000; // duration in seconds
  this.update(this.dt);
  this.render(this.dt);
  this.last = this.now;
  requestAnimationFrame(this.frame.bind(this));
};


Game.prototype.getTile = function(x, y) {
  return this.map.layer[y * this.map.cols + x];
}


function Camera(map, width, height) {
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.maxX = map.cols * map.tsize - width;
    this.maxY = map.rows * map.tsize - height;
}

Camera.SPEED = 256; // pixels per second

Camera.prototype.move = function (delta, dirx, diry) {
    // move camera
    this.x += dirx * Camera.SPEED * delta;
    this.y += diry * Camera.SPEED * delta;
    // clamp values
    this.x = Math.max(0, Math.min(this.x, this.maxX));
    this.y = Math.max(0, Math.min(this.y, this.maxY));
};

var KEYS = {

};

function handleKey(down, e, key) {
  switch(key) {
    case 37:
      KEYS.LEFT = down;
      break;
    case 38:
      KEYS.UP = down;
      break;
    case 39:
      KEYS.RIGHT = down;
      break;
    case 40:
      KEYS.DOWN = down;
      break;
    default:
      KEYS[String.fromCharCode(key)] = down;
      break;
  }
};


document.onkeydown = function(e) {
  handleKey(true, e, e.which);
};

document.onkeyup = function(e) {
  handleKey(false, e, e.which);
};

function getHelp(s) {
  socket.emit('help', s);
}

var map = {
  cols: 12,
  rows: 12,
  tsize: 64,
  layer: [
        3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
        3, 3, 3, 1, 1, 2, 3, 3, 3, 3, 3, 3
  ]
};
var camera = new Camera(map,256,256);
var game = new Game(canvas, map,camera);

var loader = new Loader(game);

loader.loadImage('set1', 'http://i.stack.imgur.com/PPVJH.jpg', 64);
loader.ready();

game.init('set1');
game.start();

<canvas id="canvas"></canvas>

如果你想有一个固定的 Canvas 尺寸和 e. G。将相机窗口居中，使用这种方法:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function Loader(game) {
  this.game = game;
  this.images = {}
}

Loader.prototype.loadImage = function(id, url, tile) {
  var image = new Image();
  image.src = url;
  this.images[id] = {
    img: image,
    url: url,
    tile: tile
  }
}

Loader.prototype.ready = function() {
  this.game.loadImages(this.images);
}

function Game(canvas, map,camera) {
  this.canvas = canvas;
  this.ctx = this.canvas.getContext('2d');
  this.monsters = [];
  this.player = {};
  this.map = map;
  this.timestamp = function() {
    return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
  }
  this.camera = camera||{
    x: 0,
    y: 0,
    width: 256,
    height: 256
  }

}

Game.prototype.init = function(ts) {
  this.current = {
    tileset: this.images[ts]
  }
  this.width = this.map.cols * this.map.tsize;
  this.height = this.map.rows * this.map.tsize;
  this.camera.maxX = this.map.cols * this.map.tsize - this.camera.width;
  this.camera.maxY = this.map.rows * this.map.tsize - this.camera.height;
}

Game.prototype.loadImages = function(images) {
  this.images = images;
}

Game.prototype.start = function() {

  this.now = 0;
  this.dt = 0;
  this.last = this.timestamp();
  this.frame();
}

Game.prototype.update = function(delta) {
  var dirx = 0;
    var diry = 0;
    if (KEYS.LEFT) { dirx = -1; }
    if (KEYS.RIGHT) { dirx = 1; }
    if (KEYS.UP) { diry = -1; }
    if (KEYS.DOWN) { diry = 1; }

    this.camera.move(delta, dirx, diry);
}

Game.prototype.render = function(delta) {
  this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
  this.ctx.save();
  this.ctx.translate((this.canvas.width-this.camera.width)/2, (this.canvas.height-this.camera.height)/2);
  this.ctx.rect(0,0,this.camera.width, this.camera.height);
  this.ctx.clip();
  var startCol = Math.floor(this.camera.x / this.map.tsize);
  var endCol = startCol + (this.camera.width / this.map.tsize);
  var startRow = Math.floor(this.camera.y / this.map.tsize);
  var endRow = startRow + (this.camera.height / this.map.tsize);
  var offsetX = -this.camera.x + startCol * this.map.tsize;
  var offsetY = -this.camera.y + startRow * this.map.tsize;
  for(var c = startCol; c <= endCol; c++) {
    for(var r = startRow; r <= endRow; r++) {
      var tile = this.getTile(c, r);
      var x = (c - startCol) * this.map.tsize + offsetX;
      var y = (r - startRow) * this.map.tsize + offsetY;
      if(tile !== 0) {
        ctx.drawImage(
          this.current.tileset.img, //image
          (tile - 1) * this.map.tsize,
          0,
          this.map.tsize,
          this.map.tsize,
          Math.round(x),
          Math.round(y),
          this.map.tsize,
          this.map.tsize
        )
      }
    }
  }
  this.ctx.restore();
}

Game.prototype.frame = function() {
  this.now = this.timestamp();
  this.dt = (this.now - this.last) / 1000; // duration in seconds
  this.update(this.dt);
  this.render(this.dt);
  this.last = this.now;
  requestAnimationFrame(this.frame.bind(this));
};


Game.prototype.getTile = function(x, y) {
  return this.map.layer[y * this.map.cols + x];
}


function Camera(map, width, height) {
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.maxX = map.cols * map.tsize - width;
    this.maxY = map.rows * map.tsize - height;
}

Camera.SPEED = 256; // pixels per second

Camera.prototype.move = function (delta, dirx, diry) {
    // move camera
    this.x += dirx * Camera.SPEED * delta;
    this.y += diry * Camera.SPEED * delta;
    // clamp values
    this.x = Math.max(0, Math.min(this.x, this.maxX));
    this.y = Math.max(0, Math.min(this.y, this.maxY));
};

var KEYS = {

};

function handleKey(down, e, key) {
  switch(key) {
    case 37:
      KEYS.LEFT = down;
      break;
    case 38:
      KEYS.UP = down;
      break;
    case 39:
      KEYS.RIGHT = down;
      break;
    case 40:
      KEYS.DOWN = down;
      break;
    default:
      KEYS[String.fromCharCode(key)] = down;
      break;
  }
};


document.onkeydown = function(e) {
  handleKey(true, e, e.which);
};

document.onkeyup = function(e) {
  handleKey(false, e, e.which);
};

function getHelp(s) {
  socket.emit('help', s);
}

var map = {
  cols: 12,
  rows: 12,
  tsize: 64,
  layer: [
        3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
        3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3,
        3, 3, 3, 1, 1, 2, 3, 3, 3, 3, 3, 3
  ]
};
var camera = new Camera(map,256,256);
var game = new Game(canvas, map,camera);

var loader = new Loader(game);

loader.loadImage('set1', 'http://i.stack.imgur.com/PPVJH.jpg', 64);
loader.ready();

game.init('set1');
game.start();

<canvas id="canvas" width="400" height="400"></canvas>

关于javascript - canvas - 瓷砖没有完全呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37550369/

文章推荐： php - 在 PHP 和 MySQL 中编写 SelectWhere 语句

文章推荐：构建 apk : dex-dexexception-multiple-dex-files 时出现 Android 错误

文章推荐： php - 使用两个字段在 CodeIgniter 中进行表单搜索

文章推荐： android - 改造不会在断点处停止

java - 并行流看起来不像是并行工作，完全
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
java - 完全 OR 的正则表达式包含
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。例如，所有这些样本应返回 Glentworth+Ireland: Glentw
javascript - 如何(完全)复制文件但更改文件名？
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。目前我正在这样做: uploadFile.map((file) => { if (fi
haskell - 为什么您不能(完全)应用具有使用其他类型同义词的参数的类型同义词？
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
delphi - 需要计算哪些像素是(完全)透明的
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
.net - Powershell 卸载模块...完全
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
elasticsearch - ElasticSearch中的半完全(完全)匹配
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
ASP.NET - 信任级别 = 完全？
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
ajax - 完全 Ajax 应用程序的基于内容的广告
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
c# - 如何判断文件是否已*完全*写入
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
javascript - Disqus 评论框不显示(完全)
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
python - 完全 Cython 化的应用程序
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
c# - 隐藏控制台应用程序的控制台(完全)，但只是有时
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。我找到了
algorithm - 完全 K 叉树
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。我注意到第一层有一
java - 完全 volatile 可见性保证
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
algorithm - NP 完全 - 在非确定性多项式时间内可解
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
algorithm - 子集推理 NP 完全？
考虑以下问题: 有N个硬币，编号为1到N。你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
c++ - 如何使用户定义的类型像内置类型一样*完全*地初始化？
我想制作一个包装数字类型的类型(并提供额外的功能)。此外，我需要数字和包装器可以隐式转换彼此。到目前为止我有: template struct Wrapper { T value;

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - canvas - 瓷砖没有完全呈现