如何解决如何修复我的 Tilemap?为什么我不能得到完整的地图?只有 JAVASCRIPT
我正在做一个简单的 2d 射击平台游戏,为此我需要一个平铺地图。我对 javascript 非常生疏,但我正在尽我最大的努力来做游戏。我已经完成了一个平铺地图,这是我想要的第一个 lvl 的结果:
第一个lvl的平铺图像,想要的结果:
这就是我得到的:
我的瓦片地图代码是这样的:
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var cols = 25;
var rows = 18;
var tileWidth = 32;
var tileHeight = 32;
canvas.width = cols * tileWidth;
canvas.height = rows * tileHeight;
var map = [
467,468,467,499,500,501,282,258,528,528
];
var map467 = new Image();
map467.src = "467_tile.png"
var map468 = new Image();
map468.src = "468_tile.png"
//var map469 = new Image();
//map469.src = "469.png"
//var map470 = new Image();
//map470.src = "470.png"
var map499 = new Image();
map499.src = "499_tile.png"
var map500 = new Image();
map500.src = "500_tile.png"
var map501 = new Image();
map501.src = "501_tile.png"
//var map502 = new Image();
//map502.src = "502_tile.png"
var map528 = new Image();
map528.src = "528_tile.png"
var map258 = new Image();
map258.src = "258_tile.png"
var map282 = new Image();
map282.src = "282_tile.png"
function drawMap() {
for (var y = 0; y < rows; y++){
for (var x = 0; x<cols; x++) {
switch (map[((y*rows)+x)]){
case 467:
ctx.drawImage(map467,x*tileWidth,y*tileHeight,tileWidth,tileHeight);
break;
case 468:
ctx.drawImage(map468,tileHeight);
break;
case 499:
ctx.drawImage(map499,tileHeight);
break;
case 500:
ctx.drawImage(map500,tileHeight);
break;
case 501:
ctx.drawImage(map501,tileHeight);
break;
case 528:
ctx.drawImage(map528,tileHeight);
break;
case 282:
ctx.drawImage(map282,tileHeight);
break;
case 258:
ctx.drawImage(map258,tileHeight);
break;
}
}
}
}
我只是想知道我必须做什么才能获得预期的结果。我现在已经过热了 2 天,我尝试了几种方法来做到这一点,但都没有效果:(
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。