Javascript -> перемещение персонажа Выпуск

<html> 
 

 
<head> 
 
    <title>TileMap2</title> 
 
    <style> 
 
    #canvas { 
 
     outline: 3px solid black; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <canvas id="canvas" height="400" width="1000"></canvas> 
 
    <script> 
 
    window.onload = function() { 
 
     drawMap(); 
 
    } 
 

 
    var canvas = document.getElementById('canvas'); 
 
    var context = canvas.getContext('2d'); 
 
    canvas.width = "1000"; 
 
    canvas.height = "400"; 
 

 
    var xpos = 0; 
 
    var ypos = 0; 
 
    var grass = new Image(); 
 
    var water = new Image(); 
 
    var dirt = new Image(); 
 
    var mario = new Image(); 
 

 
    mario.src = 'Mario.png'; 
 
    grass.src = 'grass1.jpg'; 
 
    water.src = 'water.jpg'; 
 
    dirt.src = 'dirt.jpg'; 
 

 
    var map = [ 
 
     [1, 1, 0, 1, 1, 1, 1, 0, 1, 1], 
 
     [1, 1, 0, 1, 1, 1, 1, 1, 1, 1], 
 
     [1, 1, 0, 1, 1, 1, 1, 1, 1, 1], 
 
     [1, 1, 0, 1, 1, 1, 1, 1, 1, 1], 
 
     [1, 1, 0, 1, 1, 1, 1, 1, 1, 1] 
 

 
    ]; 
 

 
    function drawMap() { 
 
     for (var i = 0; i < map.length; i++) { 
 
     for (var j = 0; j < map[i].length; j++) { 
 

 
      if (parseInt(map[i][j]) == 0) { 
 
      context.drawImage(grass, xpos, ypos); 
 
      } 
 

 
      if (parseInt(map[i][j]) == 1) { 
 
      context.drawImage(dirt, xpos, ypos) 
 
      }; 
 
      if (parseInt(map[i][j]) == 2) { 
 
      context.drawImage(water, xpos, ypos); 
 
      } 
 
      xpos += 100; 
 
     } 
 
     xpos = 0; 
 
     ypos += 100; 
 
     } 
 
     xpos = 0; 
 
     ypos = 0; 
 
     context.drawImage(mario, xpos, ypos, 50, 50); 
 
    } 
 

 
    function move(e) { 
 
     if (e.keyCode == 39) { 
 
     xpos += 50; 
 
     } 
 
     if (e.keyCode == 37) { 
 
     xpos -= 50; 
 
     } 
 
     if (e.keyCode == 38) { 
 
     ypos -= 50; 
 
     } 
 
     if (e.keyCode == 40) { 
 
     ypos += 50; 
 
     } 
 

 
     canvas.width = canvas.width; 
 
     context.drawImage(mario, xpos, ypos, 50, 50); 
 

 
    } 
 
    document.onkeydown = move; 
 
    </script> 
 
</body> 
 

 
</html>

Проблема заключается в том, что, когда я нажатии клавиши со стрелками Марио перемещает но трава, грязь, вода изображения disapper, а остальные только вещь Марио движется в холст. Эта проблема решается, если я набираю функцию перемещения canvas.width = canvas.width, но затем переходит к марио, оставляя основные моменты его предыдущих позиций на холсте.

источник

2015-09-02 Nick Green

[Отредактировано для учета других ошибок в коде.]

Чтобы остановить Марио изображение из уходящих прожилками, вы можете очистить ваш холст каждый раз, когда вы меняете позицию Марио и перекроить карту (с Марио на вершине) ,

Но прямо сейчас ваша функция drawMap() изменяет глобальные координаты x и y, когда она рисует карту, что делает невозможным отслеживание положения Марио, если мы пытаемся называть drawMap() каждый раз. Таким образом, он должен быть изменен первым, чтобы использовать только временные локальные переменные:

function drawMap() { 
    var localX = 0; 
    var localY = 0; 

    for (var i = 0; i < map.length; i++) { 
    for (var j = 0; j < map[i].length; j++) { 

     if (parseInt(map[i][j]) == 0) { 
     context.drawImage(grass, localX, localY); 
     } 

     if (parseInt(map[i][j]) == 1) { 
     context.drawImage(dirt, localX, localY) 
     }; 
     if (parseInt(map[i][j]) == 2) { 
     context.drawImage(water, localX, localY); 
     } 
     localX += 100; 
    } 
    localX = 0; 
    localY += 100; 
    } 
}

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

window.onload = function() { 
    drawMap(); 
    context.drawImage(mario, xpos, ypos, 50, 50); 
}

И изменить текущую move() функции:

function move(e) { 
    if (e.keyCode == 39) { 
    xpos += 50; 
    } 
    if (e.keyCode == 37) { 
    xpos -= 50; 
    } 
    if (e.keyCode == 38) { 
    ypos -= 50; 
    } 
    if (e.keyCode == 40) { 
    ypos += 50; 
    } 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    drawMap(); 
    context.drawImage(mario, xpos, ypos, 50, 50); 
}

Вот a JSFiddle для демонстрации. Причина, по которой я удалил canvas.width = canvas.width для очистки холста, связан с проблемами с этим методом, указанными в another StackOverflow question.

Надеюсь, это поможет! Дайте знать, если у вас появятся вопросы. В будущем, пожалуйста, напишите Minimal, Complete, and Verifiable example, чтобы мы работали - в его нынешнем виде ваш код не может показать проблему без изменений, чтобы она работала должным образом.

источник

2015-09-02 15:23:05 Serlite

Большое спасибо за ответ. –

Большое спасибо за ответ. К сожалению, doesnt't работать он просто перемещает horizantal и вертикальную линию картин от запуска Марио координат ... функция перемещения (е) { \t \t // [...] \t context.drawImage (Марио, XPos , YPos, 50,50); \t context.clearRect (0, 0, canvas.width, canvas.height); drawMap(); } –

Фактически я получаю тот же результат, что и функция move (e) {// [....] canvas.width = canvas.width; \t context.drawImage (mario, xpos, ypos, 50,50); \t drawMap(); \t} –

Javascript -> перемещение персонажа Выпуск

ответ

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