Разный результат вследствие window.onload

140
13 мая 2019, 09:20

Недавно начал знакомство с canvas и javascript, сразу решил сделать попробовать сделать арканоид и сразу столкнулся с проблемой, при реализации функции заполнения поля блоков, всегда выходит разный результат то 3 столбца блоков,то 4 то вообще ни одного, как я догадываюсь, связано это с разным временем загрузки страницы...но как это победить я не знаю, самое главное пробовал отключать функции, следующие после функции заполнения, это не помогло. Заранее спасибо

window.onload = function()  
{ 
  ctx.fillStyle = 'black'; //выбираем цвет заливки и заливаем поле "canvasa" пунктом ниже 
  ctx.fillRect(0, 0, canv.width, canv.height); 
  var intervalHandle1 = setTimeout(makefield,100); // вызов функции выстраивания поля из рандомных блоков (фруктов) только один раз, при загрузке 
  var intervalHandle2 = setInterval(plate, 500); // тарелка, отбивающая 
} 
  
  
  
// game main loop 
function loop() 
{ 
  // logic 
  plate(); 
  //setTimeout(function() {cooldown = false;}, 500); 
   
} 
  
function plate() //создаем саму "тарелку" арканоида 
        { 
        // Создаем объект изображения 
        var img = new Image(); 
        // Загружаем файл изображения 
        img.src = 'img/plate.png'; 
        // Привязываем функцию к событию onload 
        // Это указывает браузеру, что делать, когда изображение загружено 
        img.onload = function()  
            { 
            ctx.drawImage(img, 550, 650); 
            }; 
        } 
  
         
         
function sleep(ms)  
{ 
    ms += new Date().getTime(); 
    while (new Date() < ms){} 
}  
  
  
var blocks = //создаем массив из функций блоков заполнения 
[ 
  
  
 function plum(xpp,ypp) //создаем блок заполнения "слива" 
    { 
  
    var plum = new Image(); 
    // Загружаем файл изображения 
    plum.src = 'img/plum.png'; 
    // Привязываем функцию к событию onload 
    // Это указывает браузеру, что делать, когда изображение загружено 
    plum.onload = function()  
    { 
    ctx.drawImage(plum, xpp, ypp); 
    }; 
  
    }, 
  
  
  
 function orange(xpp,ypp) //создаем блок заполнения "апельсин" 
    { 
    var orange = new Image(); 
    // Загружаем файл изображения 
    orange.src = 'img/orange1.png'; 
    // Привязываем функцию к событию onload 
    // Это указывает браузеру, что делать, когда изображение загружено 
    orange.onload = function()  
    { 
    ctx.drawImage(orange, xpp, ypp); 
    }; 
    }, 
  
  
 function apple(xpp,ypp) //создаем блок заполнения "яблоко" 
    { 
    var apple = new Image(); 
    // Загружаем файл изображения 
    apple.src = 'img/apple.png'; 
    // Привязываем функцию к событию onload 
    // Это указывает браузеру, что делать, когда изображение загружено 
    apple.onload = function()  
    { 
    ctx.drawImage(apple, xpp, ypp); 
    }; 
    } 
  
] 
  
var min1 = 0, max1 = 500; 
var xp; 
function getRandomInt1(min1, max1) 
{ 
  return xp = Math.floor(Math.random() * (max1 - min1 + 1)) + min1; 
} 
  
  
var min2 = 0, max2 = 500; 
var yp; 
function getRandomInt2(min2, max2) 
{ 
  return  yp = Math.floor(Math.random() * (max2 - min2 + 1)) + min2; 
} 
  
  
  
function randomblock(min, max) //генерирует значение случайного блока для заполнения в поле 
{ 
    min = 0; 
    max = 3; 
    rand = min - 0.5 + Math.random() * (max - min + 1) 
    return rand = Math.round(rand); 
     
} 
  
  
  
  
function makefield() //функция создания поля блоков случайного заполнения  
{ 
  //getRandomInt1(0,300); 
  //getRandomInt2(0,300); 
  //создаем цикл заполнения canvasa блоками 
  var i; 
  for (i=0; i<100; i++) 
  { 
     blocks[randomblock()](i*45,30); 
     blocks[randomblock()](i*45,75); 
     blocks[randomblock()](i*45,120); 
     blocks[randomblock()](i*45,165); 
  } 
   
}

READ ALSO
appendChild не работает

appendChild не работает

Мне нужно добавить div, p или hr (любой элемент) после каждого p, но есть некоторые проблемы

154
Передача значения в функцию

Передача значения в функцию

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

132
как обратиться к html из content_script

как обратиться к html из content_script

как вытащить из html-шаблона, находящегося в папке расширения, текст или элемент, и вставить его в сайт?

124
Cross-Origin Read Blocking (CORB) blocked cross-origin response

Cross-Origin Read Blocking (CORB) blocked cross-origin response

Делаю запрос к api через fetchБраузер выдаёт ошибку

153