Счет не обновляется.Подскажите, пожалуйста, что не так с кодом? - PullRequest
Новая
       12

Счет не обновляется.Подскажите, пожалуйста, что не так с кодом?

0 голосов
/ 30 мая 2019

Счет не обновляется.Пожалуйста, помогите мне обновить счет.Когда я нажимаю кнопку с функцией «addScore», отображаемая оценка не изменится на новую.

Я много чего пробовал.Ни один из которых не работал 

var score = 0;

function addScore(){ score ++ }

function drawScore() { 
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.font = "16px Arial";
 ctx.fillStyle = "red";
 ctx.fillText("Score: " +score, 8, 20);
}

drawScore();

Я ожидаю, что это обновит счет, но это не так.Это остается в 0.

Проблема была решена, но текст продолжает увеличиваться и зацикливается на этом.

Ответы [ 3 ]

0 голосов
/ 30 мая 2019

Холст не поддерживает ссылку на вашу переменную (или любые значения в этом отношении).Холст похож на изображение, у него нет DOM.Вам нужно будет снова вызвать drawScore () и, возможно, очистить эту часть холста перед рисованием. 

function addScore(){
    score++;
    drawScore();
}

Демо

0 голосов
/ 30 мая 2019

Вы должны использовать другой подход к кодированию, отделяя ваш CSS и JavaScript от вашего HTML. 

//<![CDATA[
/* external.js */
var doc, bod, M, I, S, Q, score = 0, addScore, drawScore; // for use on other loads
addEventListener('load', function(){ // make yourself a tiny library
doc = document; bod = doc.body;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
addScore = function(){
  return ++score;
}
var canvas = I('canvas'), ctx = canvas.getContext('2d'), add = I('add');
ctx.font = '16px Arial'; ctx.fillStyle = 'red';
drawScore = function(){
  ctx.clearRect(0, 0, 160, 90); ctx.fillText('Score: '+score, 8, 20);
}
add.onclick = function(){
  addScore(); drawScore();// other functions or code here
};
}); // end load
//]]>
/* external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}
#canvas{
  background:#fff;
}
#add{
  display:block; padding:3px 5px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <canvas id='canvas' width='160' height='90'></canvas>
    <input id='add' type='button' value='add score' />
  </div>
</body>
</html>
0 голосов
/ 30 мая 2019

HTML-элементы не реагируют на изменения переменных. Когда вы создали элемент с drawScore, вы сообщили текущее значение score и вставили его в DOM, однако обновление score не будет обновлять это, поскольку оно не является ссылкой.

Чтобы сделать эту работу, вам нужно будет обновлять ctx текст при каждом нажатии. Один простой пример: 


var score = 0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function addScore(){
 score++;
 setScore();
}

function drawScore() { 
 ctx.font = "16px Arial";
 ctx.fillStyle = "red";
 setScore();
}

function setScore() {
 ctx.clearRect(0, 0, c.width, c.height);
 ctx.fillText("Score: " +score, 8, 20); 
}

drawScore();
...