From e258330757a4461f602568fad1e55bc35a49ed36 Mon Sep 17 00:00:00 2001 From: Daniel Legt Date: Wed, 24 Jun 2026 19:56:56 +0300 Subject: [PATCH] initial --- character.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 18 +++++++++++++ penguin.png | Bin 0 -> 3073 bytes platform.js | 40 ++++++++++++++++++++++++++++ sketch.js | 49 ++++++++++++++++++++++++++++++++++ style.css | 7 +++++ 6 files changed, 188 insertions(+) create mode 100644 character.js create mode 100644 index.html create mode 100644 penguin.png create mode 100644 platform.js create mode 100644 sketch.js create mode 100644 style.css diff --git a/character.js b/character.js new file mode 100644 index 0000000..ecb9345 --- /dev/null +++ b/character.js @@ -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) + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e414383 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + +
+
+ + + + + diff --git a/penguin.png b/penguin.png new file mode 100644 index 0000000000000000000000000000000000000000..1c8b9d8ae7a9cdff6c4ba17c125755042b1aa788 GIT binary patch literal 3073 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 literal 0 HcmV?d00001 diff --git a/platform.js b/platform.js new file mode 100644 index 0000000..77e69c4 --- /dev/null +++ b/platform.js @@ -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; +} \ No newline at end of file diff --git a/sketch.js b/sketch.js new file mode 100644 index 0000000..6bc323a --- /dev/null +++ b/sketch.js @@ -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) + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9386f1c --- /dev/null +++ b/style.css @@ -0,0 +1,7 @@ +html, body { + margin: 0; + padding: 0; +} +canvas { + display: block; +}