1

window.onload = function() {

var start = document.getElementById('start');
var stop = document.getElementById('stop');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var currentPos = 0;

function getSquare() {
  var pos = Math.floor(Math.random() * (640 - 1) + 1);
  return pos;
  }


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}



function animate() {  
  ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth); 
  ctx.fillRect(0, currentPos, 20, 20);
  currentPos += 1;
  if(currentPos >= canvas.clientHeight) {
    currentPos = 0;
    choosenPos = getSquare();
    ctx.fillStyle= getRandomColor();
  }
  requestAnimationFrame(animate);
}
start.addEventListener("click", animate);
};
<doctype html>
<html>
  <head>
    <title> Qualium Systems Javascript test task </title>
    <script type="text/javascript" src="main.js"></script>
    <style>
      canvas {        
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="start"> Start </button>
      <button id=""> Stop </button>
      <span> Score: <span id="score"> 0 </span> </span>
    </div>
    <canvas width="640" height="480" id="canvas"></canvas>      
  </body>
</html>

<doctype html>
<html>
  <head>
    <title> Qualium Systems Javascript test task </title>
    <script type="text/javascript" src="main.js"></script>
    <style>
      canvas {        
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="start"> Start </button>
      <button id=""> Stop </button>
      <span> Score: <span id="score"> 0 </span> </span>
    </div>
    <canvas width="640" height="480" id="canvas"></canvas>      
  </body>
</html>


window.onload = function() {

    var start = document.getElementById('start');
    var stop = document.getElementById('stop');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var currentPos = 0;

    function getSquare() {
      var pos = Math.floor(Math.random() * (640 - 1) + 1);
      return pos;
      }

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.round(Math.random() * 15)];
        }
        return color;
    }


    function animate() {  
      ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth); 
      ctx.fillRect(0, currentPos, 20, 20);
      currentPos += 1;
      if(currentPos >= canvas.clientHeight) {
        currentPos = 0;
        choosenPos = getSquare(); //??? не работает
        ctx.fillStyle= getRandomColor();
      }
      requestAnimationFrame(animate);
    }
    start.addEventListener("click", animate);
    };

Хочу сделать чтоб квадрат появлялся в другом месте после исчезновения за нижней границей. Подскажите пожалуйста что не так.

10
  • создайте работающий пример с помощью кнопки "Фрагмент кода ..." в редакторе вопроса, и Вам скажут, что не так
    – user176262
    5 мая 2018 в 16:43
  • Добавил пример.
    – Mike
    5 мая 2018 в 16:51
  • choosenPos = getSquare(); - что значит " не работает"? Не возвращает рандомную позицию?
    – Dmytro
    5 мая 2018 в 16:55
  • Сама функция возвращает, а вот к квадрату походу не применяется.
    – Mike
    5 мая 2018 в 16:56
  • 1
    переменная choosenPos у Вас нигде не используется. поменяйте на currentPos
    – Dmytro
    5 мая 2018 в 16:58

1 ответ 1

1

Не знаю что вас затруднило в решенни задачи, может я неправильно ее понял, можно каждый раз когда квадрат выходит за границы присваивать переменной случайное значение затем рисовать его по заданному X

window.onload = function() {

var start = document.getElementById('start');
var stop = document.getElementById('stop');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var currentPos = 0;
var currentPosX = 0;

function getSquare() {
  var pos = Math.floor(Math.random() * (640 - 1) + 1);
  return pos;
  }


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}



function animate() {  
  ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth); 
  ctx.fillRect(currentPosX, currentPos, 20, 20);
  currentPos += 1;
  if(currentPos >= canvas.clientHeight) {
    currentPos = 0;
    currentPosX = getSquare();
    ctx.fillStyle= getRandomColor();
  }
  requestAnimationFrame(animate);
}
start.addEventListener("click", animate);
};
<doctype html>
<html>
  <head>
    <title> Qualium Systems Javascript test task </title>
    <script type="text/javascript" src="main.js"></script>
    <style>
      canvas {        
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="start"> Start </button>
      <button id=""> Stop </button>
      <span> Score: <span id="score"> 0 </span> </span>
    </div>
    <canvas width="640" height="480" id="canvas"></canvas>      
  </body>
</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.