не может использовать функцию более одного раза

По какой-то причине я не могу использовать функцию «плеер» более одного раза, поэтому это означает, что я не могу обновить ее позиционирование, может ли кто-нибудь помочь и объяснить почему?не может использовать функцию более одного раза

Heres мой код:

var gridHeight = 1000, gridWidth = 1000, canvasHeight = 250, canvasWidth = 250, p = 0; 
 
var currentPositionX = 0; 
 
var currentPositionY = 0; 
 

 
function buildGrid() { 
 
\t $("body").append("<canvas></canvas").css({ 
 
\t \t height: canvasHeight, 
 
\t \t width: canvasWidth, 
 
\t \t border: "2px solid #000" 
 
\t }); 
 

 
    var canvas = document.getElementById("canvas"); 
 
    var context = canvas.getContext("2d"); 
 

 
    $("#canvas").css({height: canvasHeight, width: canvasWidth}); 
 

 
\t for (var x = 0; x <= gridWidth; x += 40) { 
 
     context.moveTo(0.5 + x + p, p); 
 
     context.lineTo(0.5 + x + p, gridHeight + p); 
 
    } 
 

 

 
    for (var x = 0; x <= gridHeight; x += 20) { 
 
     context.moveTo(p, 0.5 + x + p); 
 
     context.lineTo(gridWidth + p,x + p); 
 
    } 
 

 
    context.strokeStyle = "black"; 
 
    context.stroke(); 
 

 
    function player(x, y, w, h, c) { 
 
     this.x = x || 0; 
 
     this.y = y || 0; 
 
     this.h = h || 20; 
 
     this.w = w || 40; 
 
     this.c = c || "#FF0000"; 
 
    } 
 

 
    function draw() { 
 
     player = new player(); 
 
     context.fillstyle = player.c; 
 
     context.fillRect(player.x,player.y,player.w,player.h); 
 

 
     $("#right").on("click", function() { 
 
      player.x += player.w; 
 
      return player.x; 
 
     }) 
 
    } 
 

 
    setInterval(draw, 500) 
 
} 
 

 
$(document).ready(function() { 
 
\t buildGrid(); 
 
})

* { 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="css/game.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="scripts/game.js"></script> 
 
</head> 
 
<body style=" background: lightblue;"> 
 
\t <canvas id="canvas"></canvas> 
 
\t <div id="controls"> 
 
\t \t <button class="control" id="up">Up</button> 
 
\t \t <button class="control" id="left">Left</button> 
 
\t \t <button class="control" id="down">Down</button> 
 
\t \t <button class="control" id="right">Right</button> 
 
\t \t <button class="control" id="newPlayer">new player</button> 
 
\t </div> 
 
</body> 
 
</html>

Может кто-нибудь помочь? Моя цель - заставить кнопки перемещать квадрат вокруг сетки. Но также у него есть наследуемые свойства для дальнейшей функциональности в конце.

источник

2015-12-19 TheOriginal

player = new player(); вы перезаписываете свое определение функции с результатом его выполнения в draw().

Если вы только что добавили var перед этой линией, игрок var будет ограничен областью draw(), которая может быть тем, что вы хотите.

источник

2015-12-19 13:43:04 Aaron

Я просто попробовал, и я все еще получаю ту же ошибку – TheOriginal

Я думаю, что выполнение 'draw()' из 'setInterval()' лишает его ожидаемого контекста. Позвольте мне проверить, как это исправить. – Aaron

jsFiddle: https://jsfiddle.net/j2q2qn2e/

фрагмент JavaScript

function player(x, y, w, h, c) { 
     this.x = x || 0; 
     this.y = y || 0; 
     this.h = h || 20; 
     this.w = w || 40; 
     this.c = c || "#FF0000"; 
    } 
player = new player(); 

... 

function draw() { 

    context.fillstyle = player.c; 
    context.fillRect(player.x,player.y,player.w,player.h); 
} 

setInterval(draw, 3)

В основном вы, где создание нового игрока за ничью, но то, что я сделал, перемещается ваш игрок «класс» вне ваших призывающих функций и создал это снаружи, поэтому мы можем создать одного базового игрока. Я также переместил свой

$("#right").on("click", function() { 
    player.x += player.w; 
    return player.x; 
});

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

источник

2015-12-19 23:00:05 Canvas

не может использовать функцию более одного раза

ответ

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