Адаптивные спрайты p5play на основе прокрутки/изменения размера экрана ⇐ CSS

[Anonymous]

Я создаю веб-сайт-портфолио и пытаюсь использовать p5play, библиотеку p5js, чтобы создать фон, на котором шарики падают в нижнюю часть экрана. По бокам также есть стенки, которые не дают шарикам упасть. Позже я также добавляю барьеры, из-за которых шарики могут упасть там, где находятся фактические данные в моем проекте. Однако барьер с правой стороны и снизу не работает. Нижний прилипает к нижней части экрана при первом создании и не закрывается вместе с проектом, чего я и хочу. Для правого барьера он работает до тех пор, пока размер окна не изменится, тогда оно останется исходной длины, а не переместится в нужное место.
До сих пор я также экспериментировал с переменными. как функция windowResize, чтобы попытаться это исправить, но ничего не помогло. Прикреплен мой код, все барьеры которого раскрашены, чтобы его было легче увидеть.
index.html

Код: Выделить всё

Portfolio Website`
[*]    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">











[url=#top]Name here[/url]







[list]

[url=#abtMe]About Me[/url]

[*]
[url=#skills]Skills[/url]

[*]
[url=#education]Education[/url]

[*]
[url=#portfolio]Portfolio[/url]

[/list]



PORTFOLIO
[h4]Name here[/h4]








ABOUT ME





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut turpis mi, congue sit amet vehicula vel, consequat eu enim. Quisque lobortis id tortor sed iaculis. Aliquam placerat dapibus magna, in varius enim ultricies vitae. Vestibulum pellentesque sem ex, ac cursus est scelerisque non. Curabitur ultricies magna et ullamcorper pretium. Nulla.

[img]...[/img]





SKILLS






EDUCATION






PORTFOLIO
Some of my projects I have worked on






[img]... alt=[/img]

Processing Paint
A drawing software that includes 24 colors, 3 brush options, and more!
[url=...]Visit Github[/url]





[img]... alt=[/img]

Phone Number Tracker
A Python Script that takes publicly available data and determines the approximate location of the entered number.
[url=...]Visit Replit[/url]





[img]... alt=[/img]

Pong 2047
A recreation of the game Pong by ADD NAMES HERE in Processing.  First to five wins!
[url=#]Visit Github[/url]

script.js пуст
style.css

Код: Выделить всё

html {
height: 100%;
width: 100%;
}

body {
overflow-x:hidden;
}

canvas {
position: absolute;
top: 0;
z-index: -1;
}

.spacer{
height:150px;
width:100px;
}

.halfspacer{
width:100px;
height:75px;
}

sketch.js

Код: Выделить всё

let ball;

function windowResize(){
resizeCanvas(windowWidth,windowHeight);
}

function setup(){
createCanvas(windowWidth,windowHeight);
world.gravity.y = 5;
let ground = new Sprite();
ground.width = width+20;
ground.height = 10;
ground.collider = 'static';
ground.y = height;

let lwall = new Sprite();
lwall.x = -10;
lwall.width = 10;
lwall.height = 20000;
lwall.collider ='static';

let rwall = new Sprite();
rwall.x = width-8;
rwall.width = 10;
rwall.height = 20000;
rwall.collider ='static';

let headerBlock = new Sprite();
headerBlock.collider = 'static';
headerBlock.x = width/2;
headerBlock.y = 147;
headerBlock.width = 346;
headerBlock.height = 100;

let abtMeBlock = new Sprite();
abtMeBlock.collider = 'static';
abtMeBlock.x = width/2-10;
abtMeBlock.y = 525;
abtMeBlock.width = 200;
abtMeBlock.height = 50;
}

function draw(){

background(33,37,41);

rectMode(CENTER);
if(mouse.presses()){
circleDraw();
}
}

function circleDraw(){
noStroke();
ball = new Sprite(mouseX,mouseY);
ball.radius = 35;
ball.bounciness = 0.5;
ball.friction =0;
ball.stroke = '#212529';
}

Кроме того, я локально импортировал p5play и связал его с тегом сценария, так как мой Интернет временами работает нестабильно и не подключается.

Подробнее здесь: https://stackoverflow.com/questions/785 ... oll-resize