Thiết kế website giá rẻ

Question

I am making a portfolio website, and am trying to use p5play, a library of p5js, to create a background where balls fall down to the bottom of the screen. There is also walls on the sides that make sure the balls do not fall off. Later, I am also adding barriers that the balls could fall off where actual data is in my project. However, the barrier on the right side and the bottom are glitched. The bottom one is stuck to the bottom of the screen when it is first created, and does not go down with the project, which is what I want. For the right barrier, it works until the window is resized, when it stays at the original length, not going to the correct spot.

So far, I have played around with variables as well as the windowResize function to try to fix it, but nothing has worked. Attached is my code, with all barriers colorized to make it easier to see.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portfolio Website</title>`
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel=stylesheet href=style.css>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
    <script src="p5play/planck.min.js"></script>
    <script src="p5play/p5play.js"></script>
</head>

<body class="bg-dark container-fluid">
  <nav class="navbar navbar-expand-lg bg-secondary fixed-top">

    <!--Sets navbar brand to the logo-->
    <a class="navbar-brand ms-4" href="#top" id=#brand>Name here</a>

    <!-- sets collapse button-->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="main-nav">
      <!-- Links to parts of the page -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link fw-bold ms-2" href="#abtMe">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bold ms-2" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bold ms-2" href="#education">Education</a>
        </li>
        <li class="nav-item me-2">
          <a class="nav-link fw-bold ms-2" href="#portfolio">Portfolio</a>
        </li>
      </ul>
    </div>
  </nav>
  <header class="text-center text-light">
    <h1 class="display-3 fw-bold mb-0 mt-5 pt-2 pb-0 text-primary">PORTFOLIO</h1>
    <h4 class="display-6 mb-0 pb-0">Name here</h4>
  </header>
  
  <main>
    <div class="container-fluid text-center">
      <div class="row m-5">
        <div class="col-12">
          <div>
            <div class="mt-5 mb-5 spacer"></div>
            <h2 class="text-light display-6 fw-bolder mt-5" id="abtMe">ABOUT ME</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 mt-5 border border-primary rounded border-4">
          <p class="text-light p-3">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.</p>
          <p class="text-light p-3 pt-0 mt-0 pb-0"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ex in mauris placerat, sed viverra purus hendrerit. Duis ligula tellus, tincidunt id dignissim a, consequat vitae massa. In hac habitasse platea dictumst. Proin lobortis.</p>
        </div>
        <div class="col-md-4 mt-5">
          <img src=...>
        </div>
      </div>
      <div class="row m-5">
        <div class="col-12">
          <div>
            <h2 class="text-light display-6 fw-bolder" id="skills">SKILLS</h2>
          </div>
        </div>
      </div>
      <div class="row m-5">
        <div class="col-12">
          <div>
            <h2 class="text-light display-6 fw-bolder" id="education">EDUCATION</h2>
          </div>
        </div>
      </div>
      <div class="row m-5">
        <div class="col-12">
          <div>
            <h2 class="text-light display-6 fw-bolder" id="portfolio">PORTFOLIO</h2>
            <h5 class="text-light">Some of my projects I have worked on</h5>
          </div>
          <div class="halfspacer"></div>
        </div>
        <div class="row d-flex justify-content-center">
          <!--ADD LINKS LATER-->
          <div class="col-md-3">
            <div class="card border-primary text-bg-dark border-3">
              <img src=... alt="PROCESSING PAINT" class="card-img-top">
              <div class="card-body">
                <h5 class="card-title">Processing Paint</h5>
                <p class="card-text mt-2 pt-2">A drawing software that includes 24 colors, 3 brush options, and more!</p>
                <a href="..." target=_blank class="btn btn-primary">Visit Github</a>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card border-primary text-bg-dark border-3">
              <img src=... alt="Phone Number Grabber" class="card-img-top">
              <div class="card-body">
                <h5 class="card-title">Phone Number Tracker</h5>
                <p class="card-text mt-2 pt-2">A Python Script that takes publicly available data and determines the approximate location of the entered number.</p>
                <a href="..." target="_blank" class="btn btn-primary">Visit Replit</a>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card border-primary text-bg-dark border-3">
              <img src=... alt="Pong 2047" class="card-img-top">
              <div class="card-body">
                <h5 class="card-title">Pong 2047</h5>
                <p class="card-text mt-2 pt-2">A recreation of the game Pong by ADD NAMES HERE in Processing. First to five wins!</p>
                <a href="#" class="btn btn-primary">Visit Github</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

script.js is empty

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';
}

Also, I have locally imported p5play as well as linked it with a script tag, as my internet is spotty at times and does not connect.

Thiết kế website giá rẻ

Danh mục

Responsive p5play Sprites based on screen scroll/resize