Игра в понг в p5.js - фоновое изображение не загружается должным образом

1

Я использую 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
Теги:
p5.js

1 ответ

1

Функция background() не растягивает изображение в соответствии с размером холста. Из ссылки основное внимание уделяется:

p5.Image: изображение, созданное с помощью loadImage() или createImage(), для установки в качестве фона (должно быть того же размера, что и окно эскиза)

Вот почему вы видите изображение в верхнем левом углу.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню