Почему в моей игре нет ящиков?

Назначение на выходные - сделать игру в стиле pac-man, используя холст и javascript. Согласно руководству, которое я наблюдаю, я должен видеть первую строку моей карты, когда я запускаю ее, но я просто получаю границу карты.Почему в моей игре нет ящиков?

Вот мой HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <meta charset="utf-8" /> 
</head> 
<body> 
    <canvas id="myCanvas" width="800" height="500" style="border: 1px solid gray"></canvas> 
    <script src="file1.js"> </script> 
</body> 
</html>

Вот мой машинопись

let canvas = <HTMLCanvasElement>document.getElementById('myCanvas'); 
let context = canvas.getContext("2d"); 
let img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 0, 0); 
} 
img.src = "zombie.png"; 

let mapArray = 
    ["############################", 
    "#  # #  o  ##", 
    "#       #", 
    "# #### ##### ##  #", 
    "##   # # ##  #", 
    "###   ##  #  #", 
    "#   ###  #  #", 
    "# ####   ###  #", 
    "# ## # o    #", 
    "# o # # o ### ### #", 
    "# # #    #", 
    "############################"]; 

//need to add wall.scource = and grass.source = 
let wall = new Image(); 
let grass = new Image(); 
grass.src = "C:\Users\Scott\Desktop\grassimg.jpg"; 
wall.src = "http://www.tecmobowl-vs-rbi.com/uploads/3/5/3/8/3538178/_2943519.jpg"; 

let posX = 0; 
let posY = 0; 

//for loops set images at given coordinates according to position on mapArray 
for (let i = 0; i < mapArray.length; i++) { 
    for (let j = 0; j < mapArray.length; i++) { 

     if (mapArray[i][j] == "") { 
      context.drawImage(grass, posX, posY, 32, 32)//last two are size of image) 
     } 
     if (mapArray[i][j] == "#") { 
      context.drawImage(wall, posX, posY, 32, 32)//last two are size of image) 
     } 
     posX+=32 
    } 

}

Любая помощь в получении некоторых это, чтобы показать было бы удивительным !!

источник

2015-11-14 ScottVMeyers

Не могли бы вы дать лучшее название, возможно? Опишите настоящую проблему, а не то, как вы ее интерпретируете. – vsync

Конечно! Любые рекомендации о том, что назвать его? – ScottVMeyers

Где вы проверите свой код на машинке? –

jsFiddle: https://jsfiddle.net/kvxx73f7/

Javascript

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext("2d"); 
var img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 0, 0); 
} 
img.src = "zombie.png"; 

var mapArray = 
    ["############################", 
    "#  # #  o  ##", 
    "#       #", 
    "# #### ##### ##  #", 
    "##   # # ##  #", 
    "###   ##  #  #", 
    "#   ###  #  #", 
    "# ####   ###  #", 
    "# ## # o    #", 
    "# o # # o ### ### #", 
    "# # #    #", 
    "############################"]; 

//need to add wall.scource = and grass.source = 
var wall = new Image(); 
var grass = new Image(); 
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en"; 
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z"; 

var posX = 0; 
var posY = 0; 

//for loops set images at given coordinates according to position on mapArray 
for (var y = 0; y < mapArray.length; y++) { 
    for (var x = 0; x < mapArray[0].length; x++) { 

     if (mapArray[y][x] == "") { 
      context.drawImage(grass, (32 * x) , (32 * y), 32, 32)//last two are size of image) 
     } 
     if (mapArray[y][x] == "#") { 
      context.drawImage(wall, (32 * x) , (32 * y), 32, 32)//last two are size of image) 
     } 

    } 

}

Когда вы делаете свой цикл, вы повторно используете i++ в обоих для петли, которые являются неправильными, во-вторых, в конце вашего цикла for в j вы делаете posX+=32, но не posY, однако что вы можете сделать, просто используйте ваши i и j (которые я переименовал в x и y, чтобы помочь вам понять мой код), чтобы выработать новую Xposition и Yposition. Просто голова я использую некоторые изображения из Google, и вам может потребоваться обновить страницу, чтобы увидеть отображаемые изображения.

источник

2015-11-15 01:59:52 Canvas

У вас не хватает места в вашем if

if (mapArray[i][j] == " ") {

источник

2015-11-14 22:11:57 gilamran

о, спасибо! большой улов, но до сих пор ничего не делает. – ScottVMeyers

Вы пытаетесь нарисовать изображения перед их загрузкой.

Если вы используете этот очень простой предварительный загрузчик и поместите свой код рисования в функцию, он должен работать.

... 
let wall = new Image(); 
let grass = new Image(); 

var preloader = new Preloader(); // Create new preloader 
preloader.add(wall); // Add images you want to preload 
preloader.add(grass); 
preloader.onready = draw; // Call draw function when its ready 

grass.src = "C:\Users\Scott\Desktop\grassimg.jpg"; 
wall.src = "http://www.tecmobowl-vs-rbi.com/uploads/3/5/3/8/3538178/_2943519.jpg"; 

function draw() { //Wrap your draw code in a function 
    let posY = 0; 
    for (let i = 0; i < mapArray.length; i++) { 
     let posX = 0; 
     for (let j = 0; j < mapArray[i].length; j++) { 
      if (mapArray[i][j] == " ") { 
       context.drawImage(grass, posX, posY, 32, 32)//last two are size of image) 
      } 
      if (mapArray[i][j] == "#") { 
       context.drawImage(wall, posX, posY, 32, 32)//last two are size of image) 
      } 
      posX+=32 
     } 
     posY+=32 
    } 
} 

function Preloader(){ // Preloader code 
    var self = this; 
    var images = []; 
    self.onready = function(){}; 
    self.add = function(img){ 
     images.push(img); 
     img.onload = function(){ 
      images.splice(images.indexOf(img), 1); 
      if(images.length == 0) 
       self.onready(); 
     } 
    } 
    return self; 
}

Примечание: Я изменил вашу функцию отрисовки немного, потому что вы должны сбросить PosX каждый раз при запуске внешнего контура, а также, вы имели i++ в обоих ваших петель, второй должен быть j++, и я думаю, что вы были отсутствует posY+=32 в конце внутреннего для.

источник

2015-11-15 02:51:05 emed

Почему в моей игре нет ящиков?

ответ

Смежные вопросы