Я использую javascript framework под названием p5. Я пытаюсь установить фон моей игры "Понг" на изображение, которое я нашел в Интернете. Я следил за всеми ссылками, которые я мог найти, чтобы попытаться заставить его работать, но по какой-то причине фон не обновляется сам. В итоге я получаю линию цыплят (мяч моей игры). Единственной частью фона, которая, кажется, работает правильно, является верхний левый угол.
var sticks = [];
var ball;
var wallDis = 50;
// var imgs = [];
var score = [];
function preload(){
chick = loadImage('images/chick.png');
farm = loadImage('images/Farm.jpg');
}
function setup(){
createCanvas(600, 600);
sticks[0] = new Stick([enter image description here][1]wallDis);
sticks[1] = new Stick(width-wallDis);
ball = new Ball(chick);
score[0] = new ScoreBoard(width/3, 50);
score[1] = new ScoreBoard(width*2/3, 50);
}
function draw(){
background(farm);
// resizeCanvas(img.width, img.height);
for(var i =0; i<sticks.length; i++){
sticks[i].move();
sticks[i].show();
}
ball.move();
ball.show();
... etc
Функция background()
не растягивает изображение в соответствии с размером холста. Из ссылки основное внимание уделяется:
p5.Image: изображение, созданное с помощью loadImage() или createImage(), для установки в качестве фона (должно быть того же размера, что и окно эскиза)
Вот почему вы видите изображение в верхнем левом углу.
Чтобы устранить проблему, просто измените размер изображения на тот же размер, что и ваш эскиз. Вы можете сделать это раньше времени, или есть полезные функции в ссылке, которую вы могли бы использовать.