Почему барные диаграммы действуют так странно? html5 canvas и javascript

Question

Для моего первого набега на html5, я пытаюсь составить табло для игры Farkle.

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

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

Как сейчас, я получаю странное поведение из ящиков. Вместо того, чтобы добавлять «подсчет» к общему счету и рисовать ящик, чтобы отразить новый балл, он делает то, что я не понимаю. Попробуйте ввести 10, а затем 90 для того же игрока, чтобы понять, что я имею в виду.

Вот «рабочая» версия, чтобы вы могли видеть мою проблему. http://jsfiddle.net/kBJB4/

Редактировать: Похоже, что это скорее, чем добавление чисел, например. 1 + 1 = 2, он делает что-то вроде приложения, например. 1 + 1 = 11. Понятия не имею почему.

Answer 1

В prompt() функция возвращает вызов строка. Таким образом, в следующем заявлении

var tally = prompt("score?");

переменная tally фактически строка. Поэтому применение оператора + к операнду строки и целочисленному операнду приводит к обработке обоих операндов как строки и выполнению конкатенации строк вместо целочисленного добавления. Простое исправление для преобразования возвращаемого значения prompt() в целое, как:

var tally = parseInt(prompt ("Score?")); 

Answer 2

Обновление: ответ @Suresh Kumar немного чище. Однако, оставив мое.

Ваш код: player1 += tally; обрабатывает обе переменные как strings.

Используйте parseInt, чтобы заставить его использовать номера:

player1 = parseInt(player1) + parseInt(tally); 

Примечание: Попытка комбинациям это с player1 += parseInt(tally); не работает, потому что она по-прежнему лечащие player1 как string