0

首先，我正在尝试使用 HTML5 画布和 Javascript 为 2d 游戏制作一个非常简单的平铺地图引擎，除了我的第二个 drawChar 函数的 drawImage() 没有显示在画布上之外，一切似乎都工作正常。我知道网址很好，我已经检查了丢失的字符等，但无法弄清楚。代码如下。任何帮助表示赞赏。

PS我知道这段代码中的大部分不是“现代”或“最佳实践”，我仍在学习，只是想了解为什么会发生这个错误。谢谢。

<canvas id="canvas" width="1000" height="500" style="border: 2px solid black; margin: 10px auto;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var draw=canvas.getContext('2d');

var tileSize=canvas.height/10;
var mapLength=canvas.width/tileSize;
var tilex=0;
var tiley=0;

var tile1= new Image();
var tile2= new Image();
var charImg= new Image();

tile1.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_sky.jpg';

tile2.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_ground.jpg';

charImg.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/player.jpeg';



var mapArray = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1]
];





function drawMap() {

for (var y=0; y<mapLength; y++){
for (var x=0; x<tileSize; x++){


tilex=x*tileSize;
tiley=y*tileSize;


if (parseInt(mapArray[y][x]) == 0) {

draw.drawImage(tile1, tilex, tiley, tileSize, tileSize);   }

if (parseInt(mapArray[y][x]) == 1) {

draw.drawImage(tile2, tilex, tiley, tileSize, tileSize);   }

                              }
                              }
               }


function drawChar(){
draw.drawImage(charImg, 300, 200, tileSize, tileSize);     }


function nextFrame(){
draw.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawChar();
}

setInterval(nextFrame, 1000);
4

1 回答 1

0

您正在检查mapArray[y][x]- 但y与x的大小无关mapArray，因此您正在检查一个不存在的元素，并得到一个 Javascript 错误，这会阻止程序执行。

你应该保持 Chrome 开发者工具打开，这样你就可以看到 Javascript 错误，这将在这里向你显示问题。

于 2018-12-09T03:32:57.227 回答