JavaScript canvas 图片行列错误

Question

我正在制作游戏。

我有一个 "matrix"，我用它来知道在 canvas 中打印什么图像，问题是矩阵打印顺序错误，将行作为列，以及何时我是用键盘移动角色的，不太好，请多多指教

这是我的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>

Answer 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);
          }
      }
  }
}

你混淆了一些索引，还复制了一些变量。为了让代码更漂亮，您还需要做更多的清理工作。

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

JavaScript canvas 图片行列错误

JavaScript canvas image row col error

html

javascript

canvas

drawimage

html5-canvas