JavaScript画布图像行列错误答案

【问题标题】：JavaScript canvas image row col errorJavaScript画布图像行列错误
【发布时间】：2016-05-23 16:48:51
【问题描述】：

我正在制作游戏。

我有一个“矩阵”，我用它来知道要在画布上打印什么图像，问题是矩阵以错误的顺序打印，将行作为列，当我使用键盘移动字符时不顺利，拜托了。

这是我的 js 文件

var world1 = [
["S",".","B","P"],
["W","B","P","B"],
["S",".","B",".",]
[".","B","P","B"]]


var visited1 = [
["f","f","f","f"],
["f","f","f","f"],
["f","f","f","f"],
["d","f","f","f"]]          


var row=3;
var col=0;

var level = 0;
var ActualWorld=world1;
var ActualVisited=visited1;

var canvas = document.getElementById('board');
context = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
context.canvas.width  = window.innerWidth;
context.canvas.height = window.innerHeight;

var side = height/4;
drawBoard(ActualWorld, ActualVisited);
control()

function drawBoard(world, visited)
{
    unvisited = new Image();
    unvisited.src = 'img/unvisited1.png';
    visited = new Image();
    visited.src = 'img/visited1.png'
    duende = new Image();
    duende.src= 'img/duendeb.png'

    unvisited.onload = function(){
        for (var i = 0; i <= world.length ; i++) {
            for (var j = 0; j <= world.length; j++) {
                if (visited1[i][j]=="f") {
                    context.drawImage(unvisited, side*i, side*j, side, side);
                }   else if (visited1[i][j]=="d") {
                    context.drawImage(duende, side*i,side*j, side, side);
                } else {
                    context.drawImage(visited, side*i, side*j, side, side);
                }
            }
        }
    }
}   
function control(){
    window.addEventListener('keydown',this.handleKeyDown,false);
    window.addEventListener('keyup',this.handleKeyUp,false);
    window.addEventListener('keyleft', this.handleKeyLeft, false);
    window.addEventListener('keyright', this.handleKeyRight, false);
}
function handleKeyUp(e){
    var k = e.keyCode;
    if (k==38 && row>0) {
        ActualVisited[row][col]="t";
        row=row-1;
        ActualVisited[row][col]="d";
        updateScreen(ActualWorld, ActualVisited);
        console.log("arriba");
}
}
function updateScreen(world, visited){
    context.clearRect(0, 0, width, height);
    for (var i = 0; i < world.length ; i++) {
            for (var j = 0; j < world.length; j++) {
                if (visited[i][j]=="f") {
                    context.drawImage(unvisited, side*j, side*i, side, side);
                }   else if (visited[i][j]=="d") {
                    context.drawImage(duende, side*j,side*i, side, side);
                } else {
                    context.drawImage(visited, side*j, side*i, side, side);
                }
            }
        }
}

这是我的 html 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Game</title><!-- titulo -->


    <link rel="stylesheet" href="css/styles.css"><!-- enlazando archivo css -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- enlazando archivo js con el juego -->
</head>
<body>

<canvas id="board"  style = "border: 1px solid grey"></canvas>
<script src="js/game.js"></script>
</body>
</html>

【问题讨论】：

您是否尝试在循环中反转 i 和 j？我的意思是： context.drawImage(unvisited, sidej, sidei, side, side)
是的，但它不起作用，当我在 UpdateScreen 中访问它们时，它可以改变 i-j，但是当我尝试让它上升时，它不会移动或只是开始消失，并且出现错误控制台。
那么请将错误添加到您的问题中
我已经对代码进行了很多更改，但问题是它需要行并在应该水平时垂直打印它们。我假设在js中管理矩阵在java/c++/python中是一样的

标签： javascript html canvas html5-canvas drawimage

【解决方案1】：

这是你的工作代码：

var world1 = [
["S",".","B","P"],
["W","B","P","B"],
["S",".","B",".",]
[".","B","P","B"]]


var visited1 = [
["f","f","f","f"],
["f","f","f","f"],
["f","f","f","f"],
["d","f","f","f"]]


var row=3;
var col=0;

var level = 0;

var canvas = document.getElementById('board');
context = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
context.canvas.width  = window.innerWidth;
context.canvas.height = window.innerHeight;

var side = height/4;
drawBoard();
control()

function drawBoard()
{
    unvisited = new Image();
    unvisited.src = 'img/unvisited1.png';
    visited = new Image();
    visited.src = 'img/visited1.png'
    duende = new Image();
    duende.src= 'img/duendeb.png'

    unvisited.onload = function(){
      draw(world1);
    }
}
function control(){
    // window.addEventListener('keydown',this.handleKeyDown,false);
    window.addEventListener('keyup',this.handleKeyUp,false);
    // window.addEventListener('keyleft', this.handleKeyLeft, false);
    // window.addEventListener('keyright', this.handleKeyRight, false);
}
function handleKeyUp(e){
    var k = e.keyCode;
    if (k==38 && row>0) {
        visited1[row][col]="t";
        row=row-1;
        visited1[row][col]="d";
        draw(world1);
    }
}
function draw() {
  context.clearRect(0, 0, width, height);
  for (var ix = 0; ix <= world1.length ; ix++) {
      for (var iy = 0; iy <= world1.length; iy++) {
          if (visited1[iy][ix]=="f") {
              context.drawImage(unvisited, side*ix, side*iy, side, side);
          } else if (visited1[iy][ix]=="d") {
              context.drawImage(duende, side*ix,side*iy, side, side);
          } else {
              context.drawImage(visited, side*ix, side*iy, side, side);
          }
      }
  }
}

您混淆了一些索引并多次复制了一些变量。为了使代码更好，您仍然需要清理更多内容。

最好也写这个面向对象的......但这可能是另一天的挑战。

【讨论】：

谢谢，我有一个关于js的问题，矩阵的管理和java/c++/python一样吗？
我想这取决于哪种意义上的。但你是对的：我会调整我的答案，因为 javascript 中的对象也是作为引用而不是作为副本传递的——正如我最初假设的那样。
您还有什么需要结束这个问题的吗？
你能把正确答案标记为正确吗？将不胜感激:)