Skip to content

Commit

Permalink
added link to the background
Browse files Browse the repository at this point in the history
  • Loading branch information
@jellinki
jellinki committed Oct 23, 2023
1 parent 61a1e92 commit be3bff9
Showing 1 changed file with 232 additions and 136 deletions.
368 changes: 232 additions & 136 deletions _posts/2023-10-12-teamwork.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,161 +8,257 @@ type: hacks
courses: { compsci: {week: 7} }
---

<canvas id="canvas" width="500" height="700"></canvas>
<script>
// Create empty canvas
let canvas = document.getElementById("canvas");
let c = canvas.getContext("2d");

// Load background image
var bgImage = new Image();
bgImage.src = "{{site.baseurl}}/images/Stone_Background.jpg";
bgImage.onload = function () {
// Set up backgrounds
var bg1 = {
width: 500,
height: 1000,
x: 0,
y: 0
}
var bg2 = {
width: 500,
height: 1000,
x: 0,
y: -1000
}
var bg3 = {
width: 500,
height: 1000,
x: 0,
y: -2000
}
<!DOCTYPE html>
<html>
<head>
<title>Teamwork!</title>
</head>
<body>
<canvas id="canvas" width="500" height="700"></canvas>
<script>
let canvas = document.getElementById("canvas");
let c = canvas.getContext("2d");

// Create an array to hold platform information
var platforms = [];
var spriteImage = new Image();
spriteImage.src = "{{site.baseurl}}/images/linksprites.png";

const spriteWidth = 96;
const spriteHeight = 104;
let spriteX = 100;
let spriteY = canvas.height - spriteHeight;
let spriteVelocityY = 0;
let isJumping = false;
let frameX = 0;
let frameY = 0;
let maxFrame = 2;
let isMovingLeft = false;
let isMovingRight = false;
let isIdle = true;

// Constants for jump behavior
const gravity = 0.5;
const jumpStrength = -10;

// Function to generate random platforms throughout the screen
function generateRandomPlatform() {
// Define the platform properties
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: canvas.height - Math.random() * (canvas.height) // Platforms appear at various vertical positions
};
platforms.push(platform);

// Add a trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust the probability as needed
var trampoline = {
x: platform.x + platform.width / 2 - 10, // Adjust for the trampoline's width
y: platform.y - 10, // Adjust for the trampoline's height
width: 20, // Adjust to match the trampoline's width
height: 5, // Adjust to match the trampoline's height
};
platforms.push(trampoline);
function updateSpriteAnimation() {
if (frameX < maxFrame) {
frameX++;
} else {
frameX = 0;
}
}

// Function to generate platforms at the top of the screen
function generateTopPlatform() {
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: -20 // Platforms appear at the top of the screen
};
platforms.push(platform);

// Add a trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust the probability as needed
var trampoline = {
x: platform.x + platform.width / 2 - 10, // Adjust for the trampoline's width
y: platform.y - 10, // Adjust for the trampoline's height
width: 20, // Adjust to match the trampoline's width
height: 5, // Adjust to match the trampoline's height
};
platforms.push(trampoline);
function jump() {
if (!isJumping) {
spriteVelocityY = jumpStrength;
isJumping = true;
}
}

// function to generate platforms at bottom of screen
function generateBottomPlatform() {
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: canvas.height + 20
};
platforms.push(platform);

// add trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust probability as needed
var trampoline = {
x: platform.x + platform/width / 2 - 10, // Adjust for trampoline width
y: platform.y - 10, // Adjust for trampoline height
width: 20, // Adjust to match trampoline width
height: 5, // Adjust to match trampoline height
};
platforms.push(trampoline);
}
function moveLeft() {
isMovingLeft = true;
isIdle = false;
frameY = 5;
maxFrame = 9;
}

function moveRight() {
isMovingRight = true;
isIdle = false;
frameY = 7;
maxFrame = 9;
}

// Call the platform generation function initially to ensure a platform is within jumping distance
generateRandomPlatform();
function idle() {
isIdle = true;
frameY = 0;
maxFrame = 2;
}

window.addEventListener('keydown', (event) => {
if (event.key === 'w') {
jump();
} else if (event.key === 'a') {
moveLeft();
} else if (event.key === 'd') {
moveRight();
}
});

window.addEventListener('keyup', (event) => {
if (event.key === 'a') {
idle();
isMovingLeft = false;
} else if (event.key === 'd') {
idle();
isMovingRight = false;
}
});

// Call the platform generation function more frequently to have more platforms
setInterval(generateRandomPlatform, 700); // Decreased interval for more platforms
// Load background image
var bgImage = new Image();
bgImage.src = "{{site.baseurl}}/images/Stone_Background.jpg";
bgImage.onload = function () {
// Set up backgrounds
var bg1 = {
width: 500,
height: 1000,
x: 0,
y: 0
}
var bg2 = {
width: 500,
height: 1000,
x: 0,
y: -1000
}
var bg3 = {
width: 500,
height: 1000,
x: 0,
y: -2000
}

// Call the top platform generation function at regular intervals
setInterval(generateTopPlatform, 3000); // Platforms at the top every 2 seconds
// Create an array to hold platform information
var platforms = [];

// Main game loop
var interval = setInterval(function () {
// Move the backgrounds
bg1.y += 5;
bg2.y += 5;
bg3.y += 5;
// Constants for jump behavior
const gravity = 0.5;
const jumpStrength = -10;

// Function to generate random platforms throughout the screen
function generateRandomPlatform() {
// Define the platform properties
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: canvas.height - Math.random() * (canvas.height) // Platforms appear at various vertical positions
};
platforms.push(platform);

if (bg1.y == 2000) {
bg1.y = 0;
// Add a trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust the probability as needed
var trampoline = {
x: platform.x + platform.width / 2 - 10, // Adjust for the trampoline's width
y: platform.y - 10, // Adjust for the trampoline's height
width: 20, // Adjust to match the trampoline's width
height: 5, // Adjust to match the trampoline's height
};
platforms.push(trampoline);
}
}
if (bg2.y == 1000) {
bg2.y = -1000;

// Function to generate platforms at the top of the screen
function generateTopPlatform() {
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: -20 // Platforms appear at the top of the screen
};
platforms.push(platform);

// Add a trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust the probability as needed
var trampoline = {
x: platform.x + platform.width / 2 - 10, // Adjust for the trampoline's width
y: platform.y - 10, // Adjust for the trampoline's height
width: 20, // Adjust to match the trampoline's width
height: 5, // Adjust to match the trampoline's height
};
platforms.push(trampoline);
}
}
if (bg3.y == 0) {
bg3.y = -2000;

// function to generate platforms at bottom of screen
function generateBottomPlatform() {
var platform = {
width: 150,
height: 20,
x: Math.random() * (canvas.width - 150),
y: canvas.height + 20
};
platforms.push(platform);

// add trampoline on some platforms randomly
if (Math.random() < 0.2) { // Adjust probability as needed
var trampoline = {
x: platform.x + platform.width / 2 - 10, // Adjust for trampoline width
y: platform.y - 10, // Adjust for trampoline height
width: 20, // Adjust to match trampoline width
height: 5, // Adjust to match trampoline height
};
platforms.push(trampoline);
}
}

// Clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);

// Draw the background
c.drawImage(bgImage, bg1.x, bg1.y);
c.drawImage(bgImage, bg2.x, bg2.y);
c.drawImage(bgImage, bg3.x, bg3.y);

// Move and draw the platforms, including trampolines
platforms.forEach(function (platform) {
if (platform.width === 20) {
// Draw a green line for the trampoline
c.strokeStyle = "cyan";
c.lineWidth = 5;
c.beginPath();
c.moveTo(platform.x, platform.y + 5);
c.lineTo(platform.x + platform.width, platform.y + 5);
c.stroke();
} else {
// Draw a yellow platform
c.fillStyle = "yellow";
c.fillRect(platform.x, platform.y, platform.width, platform.height);
// Call the platform generation function initially to ensure a platform is within jumping distance
generateRandomPlatform();

// Call the platform generation function more frequently to have more platforms
setInterval(generateRandomPlatform, 700); // Decreased interval for more platforms

// Call the top platform generation function at regular intervals
setInterval(generateTopPlatform, 3000); // Platforms at the top every 2 seconds

// Main game loop
var interval = setInterval(function () {
// Move the backgrounds
bg1.y += 5;
bg2.y += 5;
bg3.y += 5;

if (bg1.y == 2000) {
bg1.y = 0;
}
if (bg2.y == 1000) {
bg2.y = -1000;
}
if (bg3.y == 0) {
bg3.y = -2000;
}
platform.y += 5;
});
}, 90);
};
</script>

// Clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);

// Draw the background
c.drawImage(bgImage, bg1.x, bg1.y);
c.drawImage(bgImage, bg2.x, bg2.y);
c.drawImage(bgImage, bg3.x, bg3.y);

// Move and draw the platforms, including trampolines
platforms.forEach(function (platform) {
if (platform.width === 20) {
// Draw a green line for the trampoline
c.strokeStyle = "cyan";
c.lineWidth = 5;
c.beginPath();
c.moveTo(platform.x, platform.y + 5);
c.lineTo(platform.x + platform.width, platform.y + 5);
c.stroke();
} else {
// Draw a yellow platform
c.fillStyle = "yellow";
c.fillRect(platform.x, platform.y, platform.width, platform.height);
}
platform.y += 5;
});

// Draw the sprite
c.drawImage(
spriteImage,
frameX * spriteWidth,
frameY * spriteHeight,
spriteWidth,
spriteHeight,
spriteX,
spriteY,
spriteWidth,
spriteHeight
);

updateSpriteAnimation();
}, 90);
};
</script>
</body>
</html>

0 comments on commit be3bff9

Please sign in to comment.