├── README.md └── scroller code.txt /README.md: -------------------------------------------------------------------------------- 1 | # p5.js-Side-Scroller-Example 2 | Just a starting base of GPT4 code for a side scroller in p5.js 3 | -------------------------------------------------------------------------------- /scroller code.txt: -------------------------------------------------------------------------------- 1 | // COPY-PASTE THIS INTO PROCCESSING OR YOUR EDITOR OF CHOICE// 2 | 3 | // click screen to allow interaction, w to jump, arrow keys to move // 4 | 5 | // replace my image URLs with your own assets :) // 6 | 7 | 8 | let player; 9 | let bgImage; 10 | let floorImage; 11 | let playerImages; 12 | let bgX; 13 | let viewWidth = 1024; 14 | let creature; 15 | 16 | function preload() { 17 | bgImage = loadImage("https://i.imgur.com/D48qkAD.jpg"); 18 | floorImage = loadImage("https://i.imgur.com/LCaGHXf.png"); 19 | creatureImage = loadImage("https://i.imgur.com/Ufj8Djh.png"); 20 | playerImages = { 21 | standRight: loadImage("https://i.imgur.com/t3jv99x.png"), 22 | standLeft: loadImage("https://i.imgur.com/AtcROTZ.png"), 23 | jumpRight: loadImage("https://i.imgur.com/qM1XrtL.png"), 24 | jumpLeft: loadImage("https://i.imgur.com/XBJQfeI.png"), 25 | walkRight: [loadImage("https://i.imgur.com/qM1XrtL.png"), loadImage("https://i.imgur.com/t3jv99x.png"), loadImage("https://i.imgur.com/wqccJTb.png")], 26 | walkLeft: [loadImage("https://i.imgur.com/XBJQfeI.png"), loadImage("https://i.imgur.com/rmmMdWn.png"), loadImage("https://i.imgur.com/AtcROTZ.png")] 27 | }; 28 | } 29 | 30 | function setup() { 31 | createCanvas(4224, 1024); 32 | player = new Player(); 33 | creature = new Creature(); 34 | bgX = 0; 35 | window.addEventListener('keydown', function (e) { 36 | if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { 37 | e.preventDefault(); 38 | } 39 | }); 40 | } 41 | 42 | function draw() { 43 | background(0); 44 | 45 | image(bgImage, bgX, 0, bgImage.width, height); 46 | image(floorImage, bgX, height - 50, bgImage.width, 50); 47 | 48 | player.show(); 49 | player.move(); 50 | 51 | checkForJump(); 52 | 53 | updateBackground(); 54 | 55 | creature.show(); 56 | creature.move(); 57 | } 58 | 59 | function updateBackground() { 60 | const buffer = 500; 61 | 62 | if (player.x > viewWidth - buffer) { 63 | if (bgX > -(bgImage.width - viewWidth)) { 64 | bgX -= player.moveSpeed; 65 | player.x -= player.moveSpeed; 66 | creature.x -= player.moveSpeed; // Add this line to update the creature's position 67 | } 68 | } else if (player.x < buffer) { 69 | if (bgX < 0) { 70 | bgX += player.moveSpeed; 71 | player.x += player.moveSpeed; 72 | creature.x += player.moveSpeed; // Add this line to update the creature's position 73 | } 74 | } 75 | } 76 | 77 | function checkForJump() { 78 | if (keyIsDown(87) && player.onGround) { 79 | player.jump(); 80 | } 81 | if (keyIsDown(LEFT_ARROW)) { 82 | player.moveLeft(); 83 | } else if (keyIsDown(RIGHT_ARROW)) { 84 | player.moveRight(); 85 | } else { 86 | player.state = "stand"; 87 | } 88 | } 89 | 90 | class Player { 91 | constructor() { 92 | this.x = 50; 93 | this.y = height - floorImage.height - playerImages.standRight.height - 20; 94 | this.velocity = 0; 95 | this.gravity = 0.5; 96 | this.onGround = true; 97 | this.moveSpeed = 5; 98 | this.direction = "right"; 99 | this.state = "stand"; 100 | this.walkFrame = 0; 101 | this.walkFrameCounter = 0; 102 | } 103 | 104 | show() { 105 | if (this.state === "stand") { 106 | image(this.direction === "right" ? playerImages.standRight : playerImages.standLeft, this.x, this.y); 107 | } else if (this.state === "jump") { 108 | image(this.direction === "right" ? playerImages.jumpRight : playerImages.jumpLeft, this.x, this.y); 109 | } else if (this.state === "walk") { 110 | image( 111 | this.direction === "right" ? playerImages.walkRight[this.walkFrame] : playerImages.walkLeft[this.walkFrame], 112 | this.x, 113 | this.y 114 | ); 115 | } 116 | } 117 | 118 | updateWalkFrame() { 119 | this.walkFrameCounter++; 120 | if (this.walkFrameCounter >= 10) { 121 | this.walkFrame = (this.walkFrame + 1) % 3; 122 | this.walkFrameCounter = 3; 123 | } 124 | } 125 | 126 | move() { 127 | this.y += this.velocity; 128 | this.velocity += this.gravity; 129 | 130 | const groundLevel = height - 20 - playerImages.standRight.height; 131 | this.y = constrain(this.y, 0, groundLevel); 132 | 133 | if (this.y === groundLevel) { 134 | this.onGround = true; 135 | this.state = "stand"; 136 | } else { 137 | this.onGround = false; 138 | } 139 | } 140 | 141 | jump() { 142 | if (this.onGround) { 143 | this.velocity = -7; 144 | this.state = "jump"; 145 | } 146 | } 147 | 148 | moveLeft() { 149 | this.direction = "left"; 150 | if (this.onGround) { 151 | this.state = "walk"; 152 | this.updateWalkFrame(); 153 | } 154 | this.x -= this.moveSpeed; 155 | } 156 | 157 | moveRight() { 158 | this.direction = "right"; 159 | if (this.onGround) { 160 | this.state = "walk"; 161 | this.updateWalkFrame(); 162 | } 163 | this.x += this.moveSpeed; 164 | } 165 | 166 | collidesWith(orb) { 167 | let playerWidth = playerImages.standRight.width; 168 | let playerHeight = playerImages.standRight.height; 169 | 170 | return ( 171 | this.x < orb.x + orb.size && 172 | this.x + playerWidth > orb.x && 173 | this.y < orb.y + orb.size && 174 | this.y + playerHeight > orb.y 175 | ); 176 | } 177 | } 178 | 179 | class Creature { 180 | constructor() { 181 | this.x = bgImage.width * 0.60; 182 | this.y = height - 20 - creatureImage.height; 183 | this.velocity = 0; 184 | this.gravity = 0.5; 185 | this.moveSpeed = 5; 186 | this.jumpTimer = 0; 187 | this.jumpInterval = 120; 188 | } 189 | 190 | show() { 191 | image(creatureImage, this.x, this.y); 192 | } 193 | 194 | move() { 195 | this.y += this.velocity; 196 | this.velocity += this.gravity; 197 | 198 | const groundLevel = height - 20 - creatureImage.height; 199 | this.y = constrain(this.y, 0, groundLevel); 200 | 201 | this.jumpTimer++; 202 | 203 | if (this.jumpTimer >= this.jumpInterval) { 204 | this.jumpTimer = 0; 205 | this.jump(); 206 | } 207 | } 208 | 209 | jump() { 210 | this.velocity = -8; 211 | this.x -= this.moveSpeed * 2; 212 | } 213 | } --------------------------------------------------------------------------------