2

我目前正在编写一个类似于经典诺基亚 Snake 的基于 HTML5 画布/JS 的小蛇克隆。（这是我的第一款 HTML5 canvas/JS 游戏，也是我的第一款游戏，我还是个新手程序员；））

为了简单起见，我决定让蛇和樱桃的每个部分都只有 1 个像素，但这通常会导致蛇和樱桃非常小！;) 所以我决定用 .scale(8,8) 缩放画布，这样每个像素都是 8*8。

var snake = {
  length: 4,
  direction: "right",
  color: "#9A9A92",
  location: [{x: 32, y: 32}, {x: 31, y: 32}, {x: 30, y: 32}, {x: 29, y: 32}]
}
var cherry = {
  color: "#B1001D",
  x: Math.random()*65,
  y: Math.random()*65
}
var ToDrawOrNotToDraw; //limits the speed of the snake
function moveSnake(eventinfo){
  if(eventinfo.keyCode === 38){
    if(snake.direction === "left" || snake.direction === "right"){
      snake.direction = "up";
    }
  }
  else if(eventinfo.keyCode === 40){
    if(snake.direction === "left" || snake.direction === "right"){
      snake.direction = "down";
    }
  }
  else if(eventinfo.keyCode === 37){
    if(snake.direction === "up" || snake.direction === "down"){
      snake.direction = "left";
    }
  }
  else if(eventinfo.keyCode === 39){
    if(snake.direction === "up" || snake.direction === "down"){
      snake.direction = "right";
    }
  }
}
function draw(){
  requestAnimationFrame(draw);
  if(ToDrawOrNotToDraw === true){
    var snakeDrawerCount = 0;
    ctx.fillStyle = "#006C00";
    ctx.fillRect(0, 0, 64, 64);
    ctx.fillStyle = cherry.color;
    ctx.fillRect(cherry.x, cherry.y, 1, 1);
    ctx.fillStyle = snake.color;
    if(snake.direction === "up"){
      if(snake.location[0].y > 0){
        snake.location.unshift({x: snake.location[0].x, y: snake.location[0].y-1});
        snake.location.pop();
      }
      else {
        snake.location.unshift({x: snake.location[0].x, y: 64});
        snake.location.pop();
      }
    }
    else if(snake.direction === "down"){
      if(snake.location[0].y < 64){
        snake.location.unshift({x: snake.location[0].x, y: snake.location[0].y+1});
        snake.location.pop();
      }
      else {
        snake.location.unshift({x: snake.location[0].x, y: 0});
        snake.location.pop();
      }
    }
    else if(snake.direction === "left"){
      if(snake.location[0].x > 0){
        snake.location.unshift({x: snake.location[0].x-1, y: snake.location[0].y});
        snake.location.pop();
      }
      else {
        snake.location.unshift({x: 64, y: snake.location[0].y});
        snake.location.pop();
      }
    }
    else {
      if(snake.location[0].x < 64){
        snake.location.unshift({x: snake.location[0].x+1, y: snake.location[0].y});
        snake.location.pop();
      }
      else {
        snake.location.unshift({x: 0, y: snake.location[0].y});
        snake.location.pop();
      }
    }
    var snakeDrawerCount = 0;
    while(snakeDrawerCount < snake.location.length){
      ctx.fillRect(snake.location[snakeDrawerCount].x, snake.location[snakeDrawerCount].y, 1, 1);
      snakeDrawerCount++;
    }
    ToDrawOrNotToDraw = false;
  }
  else {
    ToDrawOrNotToDraw = true;
  }
}

var cnvs = document.getElementById("cnvs");
window.addEventListener("keydown", moveSnake, false);
var ctx = cnvs.getContext("2d");
ctx.scale(8,8); //actual size of the canvas is 512 * 512, this gives the 'pixels'/blocks on the canvas a size of 8 * 8, so the canvas will get a size of 64 * 64 'pixels'/blocks
draw();

但出于某种奇怪的原因，这些“大像素”（8*8 缩放像素）似乎相互重叠。可以在这里看到：

第一张故障图 第二张故障图 第三张故障图

不幸的是，我完全不知道为什么会发生这种情况，因为正如我之前提到的，我对 HTML5 canvas/JS 的东西还是很陌生，我以前只用 Qt/QML/C++ 和 Python 编程过。我在 Firefox 26（在 Linux 上）和 Konqueror（在 KDE 4.11 上）（WebKit）中都尝试了我的游戏，这两个浏览器似乎都有问题，所以我认为它与 Gecko 无关。

4

1 回答 1

1

问题来自抗锯齿/亚像素。

您的樱桃以随机值放置在板上。随机值的问题在于它是一个浮点值，因此樱桃将被放置一些小数点偏移，因此被浏览器亚像素化。

使用缩放时，此子像素的结果也会被缩放（当您将其颜色更改为例如白色时会更清晰），结果是它与网格不匹配。

要解决这个问题，只需将樱桃的 x 和 y 位置强制为整数，例如：

var cherry = {
  color: "#B1001D",
  x: Math.random()*65|0,
  y: Math.random()*65|0
}

在这里提琴

|是按位或运算符，它首先将数字强制为整数，以便能够使用按位或。由于我们与 0 或，输出是相同的（除了削减浮点小数）。

于 2013-12-21T16:18:19.287 回答