Summary
Below is a short example of what we have been developing over the week. Originally, it was going to be a horror game, but at the last moment, I decided to change the game because of an issue with my perfectionism and auditorial ambience.
Although this demo is not a horror game, we may decide to change back to a horror game if I can figure out how to fix the original problem.
Another issue when working on the horror game was the original code. It was dificult to make the player act in the way I wanted when trying to alter the code. Also animation was a little difficult to change.
But one of my group members was able to implement animation and kinda movement, and hopefully we can fix those bugs and move towards to actually making a game.
%%html
<style>
#canvas {
margin: 0;
border: 1px solid white;
}
</style>
<canvas id="canvas"></canvas>
<script>
// Create empty canvas
let canvas = document.getElementById('canvas');
let c = canvas.getContext('2d');
// Set the canvas dimensions
canvas.width = 650;
canvas.height = 400;
// Set gravity value
let gravity = 1.5;
// Define the Player class
class Player {
constructor() {
// Initial position and velocity of the player
this.position = {
x: 100,
y: 200
};
this.velocity = {
x: 0,
y: 0
};
// Dimensions of the player
this.width = 30;
this.height = 30;
}
// Method to draw the player on the canvas
draw() {
c.fillStyle = 'red';
c.fillRect(this.position.x, this.position.y, this.width, this.height);
}
// Method to update the player position and velocity
update() {
this.draw();
this.position.y += this.velocity.y;
this.position.x += this.velocity.x;
// Apply gravity if player is not at the bottom
if (this.position.y + this.height + this.velocity.y <= canvas.height)
this.velocity.y += gravity;
else
this.velocity.y = 0;
}
}
// Define the Platform class
class Platform {
constructor(image) {
// Initial position of the platform
this.position = {
x: 0,
y: 300
}
this.image = image;
this.width = 650;
this.height = 100;
}
// Method to draw the platform on the canvas
draw() {
c.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);
}
}
// Define the Tube class
class Tube {
constructor(image) {
// Initial position of the tube
this.position = {
x: 500,
y: 180
}
this.image = image;
this.width = 100;
this.height = 120;
}
// Method to draw the tube on the canvas
draw() {
c.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);
}
}
// Define the BlockObject class
class BlockObject {
constructor(image) {
// Initial position of the block object
this.position = {
x: 200,
y: 100
};
this.image = image;
this.width = 158;
this.height = 79;
}
// Method to draw the block object on the canvas
draw() {
c.drawImage(this.image, this.position.x, this.position.y);
}
}
//--
// NEW CODE - CREATE GENERICOBJECT CLASS FOR THE BACKGROUND IMAGES
//--
class GenericObject {
constructor({ x, y, image }) {
this.position = {
x,
y
};
this.image = image;
this.width = 760;
this.height = 82;
}
// Method to draw the generic object on the canvas
draw() {
c.drawImage(this.image, this.position.x, this.position.y);
}
}
// Load image sources
let image = new Image();
let imageTube = new Image();
let imageBlock = new Image();
//--
// NEW CODE - ADD IMAGES FOR BACKGROUND
//--
let imageBackground = new Image();
let imageHills = new Image();
image.src = 'https://samayass.github.io/samayaCSA/images/platform.png';
imageTube.src = 'https://samayass.github.io/samayaCSA/images/tube.png';
imageBlock.src = 'https://samayass.github.io/samayaCSA/images/box.png';
//--
// NEW CODE - IMAGE URLS FOR BACKGROUND IMAGES
//--
imageBackground.src = 'https://samayass.github.io/samayaCSA/images/background.png';
imageHills.src = 'https://samayass.github.io/samayaCSA/images/hills.png';
// Create instances of platform, tube, block object, and generic objects
let platform = new Platform(image);
let tube = new Tube(imageTube);
let blockObject = new BlockObject(imageBlock);
//--
// NEW CODE - CREATE ARRAY FOR GENERIC OBJECTS THEN ADD THE HILLS AND BACKGROUND
//--
let genericObjects = [
new GenericObject({
x:0, y:0, image: imageBackground
}),
new GenericObject({
x:0, y:70, image: imageHills
}),
];
player = new Player();
// Define keys and their states
let keys = {
right: {
pressed: false
},
left: {
pressed: false
}
};
// Animation loop
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
//--
// NEW CODE - DRAW GENERIC OBJECTS WITH FOR EACH LOOP
//--
genericObjects.forEach(genericObject => {
genericObject.draw()
});
// Draw platform, player, tube, and block object
platform.draw();
player.update();
tube.draw();
blockObject.draw();
// Handle collisions and interactions
// Handle collision between player and block object
if (
player.position.y + player.height <= blockObject.position.y &&
player.position.y + player.height + player.velocity.y >= blockObject.position.y &&
player.position.x + player.width >= blockObject.position.x &&
player.position.x <= blockObject.position.x + blockObject.width
)
{
player.velocity.y = 0;
}
// Handle collision between player and platform
if (
player.position.y + player.height <= platform.position.y &&
player.position.y + player.height + player.velocity.y >= platform.position.y &&
player.position.x + player.width >= platform.position.x &&
player.position.x <= platform.position.x + platform.width
)
{
player.velocity.y = 0;
}
// Handle interaction with tube
if (
player.position.y + player.height <= tube.position.y &&
player.position.y + player.height + player.velocity.y >= tube.position.y &&
player.position.x + player.width >= tube.position.x &&
player.position.x <= tube.position.x + tube.width
) {
player.velocity.y = 0;
player.position.y += 0.1;
player.velocity.y = 0.0001;
gravity = 0.2;
}
// Adjust gravity after leaving the tube
if (player.position.y + player.height == tube.position.y + tube.height ||
player.position.y + player.height <= tube.position.y ||
player.position.x + player.width <= tube.position.x ||
player.position.x >= tube.position.x + tube.width) {
gravity = 1.5;
}
// Handle collision with tube sides
if (
player.position.x + player.width<= tube.position.x &&
player.position.x + player.width + player.velocity.x >= tube.position.x &&
player.position.y + player.height >= tube.position.y &&
player.position.y <= tube.position.y + tube.height
)
{
player.velocity.x = 0;
}
if (
player.position.x >= tube.position.x + tube.width &&
player.position.x + player.velocity.x <= tube.position.x + tube.width &&
player.position.y + player.height >= tube.position.y &&
player.position.y <= tube.position.y + tube.height
)
{
player.velocity.x = 0;
}
if (
player.position.x >= tube.position.x &&
player.position.x + player.velocity.x <= tube.position.x &&
player.position.y + player.height >= tube.position.y &&
player.position.y <= tube.position.y + tube.height
)
{
player.velocity.x = 0;
}
if (
player.position.x + player.width <= tube.position.x + tube.width &&
player.position.x + player.width + player.velocity.x >= tube.position.x + tube.width &&
player.position.y + player.height >= tube.position.y &&
player.position.y <= tube.position.y + tube.height
)
{
player.velocity.x = 0;
}
// Move the player horizontally and adjust other objects
if (keys.right.pressed && player.position.x < 400) {
player.velocity.x = 15;
}
else if (keys.left.pressed && player.position.x > 100) {
player.velocity.x = -15;
}
//--
// NEW CODE - PARALLAX SCROLLING EFFECT (MAKE THE BACKGROUND MOVE TO CREATE ILLUSION OF PLAYER MOVING)
//--
else {
player.velocity.x = 0;
if (keys.right.pressed && !keys.left.pressed) {
platform.position.x -= 15;
tube.position.x -= 15;
blockObject.position.x -= 15;
// make the background move slower for a cooler effect
genericObjects.forEach(genericObject => {
genericObject.position.x -= 5;
});
}
else if (keys.left.pressed && !keys.right.pressed) {
platform.position.x += 15;
tube.position.x += 15;
blockObject.position.x += 15;
genericObjects.forEach(genericObject => {
genericObject.position.x += 5;
});
}
}
}
// Start the animation loop
animate();
// Event listener for key presses
addEventListener('keydown', ({ keyCode }) => {
switch (keyCode) {
case 65:
console.log('left');
keys.left.pressed = true;
break;
case 83:
console.log('down');
break;
case 68:
console.log('right');
keys.right.pressed = true;
break;
case 87:
console.log('up');
player.velocity.y -= 20;
break;
}
});
// Event listener for key releases
addEventListener('keyup', ({ keyCode }) => {
switch (keyCode) {
case 65:
console.log('left');
keys.left.pressed = false;
break;
case 83:
console.log('down');
break;
case 68:
console.log('right');
keys.right.pressed = false;
break;
case 87:
console.log('up');
player.velocity.y = -20;
break;
}
});
</script>
Updated Version
Below is a more difficult to create and took a while for me to figure out. What i did, was I took the player code and changed it to allow for top down movement rather than side to side movement for platformers.
%%html
<style>
canvas {
margin: 0;
border: 1px solid white;
}
</style>
<canvas id='canvas'></canvas>
<script>
// Create empty canvas
let canvas = document.getElementById('canvas');
let c = canvas.getContext('2d');
// Set the canvas dimensions
canvas.width = 700;
canvas.height = 300;
// Define the Player class
class Player {
constructor() {
// Initial position and velocity of the player
this.position = {
x: 350,
y: 150,
};
this.velocity = {
x: 0,
y: 0
};
// Dimensions of the player
this.width = 30;
this.height = 30;
}
// Method to draw the player on the canvas
draw() {
c.fillStyle = 'red';
c.fillRect(this.position.x, this.position.y, this.width, this.height);
}
// Method to update the players position and velocity
update() {
this.draw();
this.position.y += this.velocity.y;
this.position.x += this.velocity.x;
}
}
// Create a player object
player = new Player();
// Define keyboard keys and their states
let keys = {
right: {
pressed: false
},
left: {
pressed: false
},
up: {
pressed: false
},
down: {
pressed: false
}
};
// Animation function to continuously update and render the canvas
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
player.update();
if (keys.right.pressed && player.position.x + player.width <= canvas.width - 50) {
player.velocity.x = 4;
} else if (keys.left.pressed && player.position.x >= 50) {
player.velocity.x = -4;
} else if (keys.up.pressed && player.position.y + player.height <= canvas.height - 50) {
player.velocity.y = -4;
} else if (keys.down.pressed && player.position.y >= 50) {
player.velocity.y = 4;
} else {
player.velocity.x = 0;
player.velocity.y = 0;
}
}
animate();
// Event listener for keydown events
addEventListener('keydown', ({ keyCode }) => {
switch (keyCode) {
case 65:
console.log('left');
keys.left.pressed = true;
break;
case 83:
console.log('down');
keys.down.pressed = true;
break;
case 68:
console.log('right');
keys.right.pressed = true;
break;
case 87:
console.log('up');
keys.up.pressed = true;
break;
}
});
// Event listener for keyup events
addEventListener('keyup', ({ keyCode }) => {
switch (keyCode) {
case 65:
console.log('left');
keys.left.pressed = false;
break;
case 83:
console.log('down');
keys.down.pressed = false;
break;
case 68:
console.log('right');
keys.right.pressed = false;
break;
case 87:
console.log('up');
keys.up.pressed = false;
break;
}
});
</script>