JavaScript Canvas 图像行列错误-6ren

JavaScript Canvas 图像行列错误

转载作者：行者123 更新时间：2023-12-03 06:53:40

我正在制作一个游戏。

我有一个“矩阵”，我用它来知道要在 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>

最佳答案

这是您的工作代码:

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 图像行列错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37385112/

文章推荐： javascript - 将文本传递到在 JS 函数中打开的弹出窗口

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript Canvas 图像行列错误