kato/penguin-jump-p5js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Daniel Legt
2026-06-24 19:56:56 +03:00
commit e258330757
6 changed files with 188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
character.js Normal file
View File

@@ -0,0 +1,74 @@
var c = {
velocity: {
x: 0,
y: 0,
},
pos: {
x: 0,
y: 0,
},
size: 50,
img: null,
jump() {
if ( this.velocity <= 0.15 ) {
this.velocity.y = -5;
}
},
step() {
// Apply Gravity on our velocity.
this.velocity.y = this.velocity.y + 0.15;
// Check for collision with platform ONLY WHEN FALLING.
if ( this.velocity.y > 0 ) {
let newY = false;
let charXLeft = this.pos.x;
let charXRight = this.pos.x + this.size;
let charYTop = this.pos.y
let charYBottom = this.pos.y + this.size
for ( let p of getPlatforms() ) {
// Is the X coord colliding?
let isXColliding = false;
let pLeft = p.position.x;
let pRight = p.position.x + p.size.x;
let pTop = p.position.y;
let pBot = p.position.y + p.size.y;
// Check Left/Right collision
if ( charXLeft < pRight && charXLeft > pLeft ) {
isXColliding = true;
} else if ( charXRight < pRight && charXRight > pLeft ) {
isXColliding = true;
}
if ( isXColliding ) {
// Check if touching platform
if ( charYBottom < pBot && charYBottom > pTop ) {
newY = pTop - this.size;
break;
}
}
}
if ( newY != false ) {
this.velocity.y = 0;
this.pos.y = newY;
}
}
// Applying the velocity to our character position
this.pos.x = this.pos.x + this.velocity.x;
this.pos.y = this.pos.y + this.velocity.y;
this.pos.x = mouseX;
},
draw() {
fill(255, 125, 125);
if ( this.img != null ) {
image(this.img, c.pos.x, c.pos.y, this.size*1.25, this.size*1.25);
}
// square(c.pos.x, c.pos.y, c.size)
}
}

18
index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="/platform.js"></script>
<script src="/character.js"></script>
<script src="/sketch.js"></script>
</body>
</html>

BIN
penguin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

40
platform.js Normal file
View File

@@ -0,0 +1,40 @@
window.PLATFORMS_LIST = []
function getPlatforms() {
return PLATFORMS_LIST;
}
/**
* Spawn a platform in the world and append it to the platforms list for collision checking
* @param {number} X The X Coordinate of the platform
* @param {number} Y The Y Coordinate of the platform
*/
function spawnPlatform(X, Y) {
// Randomize Width a little bit
const DEFAULT_WIDTH = 125;
const newWidth = DEFAULT_WIDTH + ( (Math.random() - 0.5) * DEFAULT_WIDTH )
const platform = {
position: {
x: X,
y: Y,
},
size: {
x: newWidth,
y: 15,
},
step() {
},
draw() {
fill(newWidth, newWidth, 255)
rect(this.position.x, this.position.y, this.size.x, this.size.y)
}
}
PLATFORMS_LIST.push(platform);
return platform;
}

49
sketch.js Normal file
View File

@@ -0,0 +1,49 @@
const TEXT_SIZE = 12;
const CHARACTER_SIZE = 50;
var charimg;
function preload() {
charimg = loadImage('/penguin.png');
}
function setup() {
createCanvas(300, 600);
frameRate(60)
textSize(TEXT_SIZE)
textAlign(LEFT, TOP);
c.size = CHARACTER_SIZE;
c.pos.x = width / 2 - CHARACTER_SIZE / 2;
c.pos.y = height / 2 - CHARACTER_SIZE / 2;
c.img = charimg;
}
function draw() {
fill(0, 0, 0);
background(225);
text(`X/Y : ${mouseX}|${mouseY}`, 2, 2);
getPlatforms()
.forEach(p => {
p.step();
p.draw()
})
c.step(); // Run Logic
c.draw(); // Draw the character
}
function keyPressed() {
if (key === 'c') {
c.jump();
}
}
function mouseClicked() {
if (mouseButton === LEFT) {
spawnPlatform(mouseX, mouseY);
console.log(PLATFORMS_LIST)
}
}

7
style.css Normal file
View File

@@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}