First off, sorry if this is a basic question as I am still pretty new to the Javascript language. I used the 'Tiled' software to develop a Tilemap for a scrolling 2D platformer (this was done following a tutorial). In the tutorial, the collision block appeared on top of the map and was later coded with collision detection between it and the player. The collision blocks, based on "Tiled's" attribution of values, appear when the background.update() function is removed. The blocks however neither scale nor appear on top of the tilemap png. Is it to do with the layering? Is there a form of Z-index for Javascript? There are no errors that appear when inspecting the code that I think would be expected if it was not rendering (e.g. cannot set properties of null due to the function being called before the object appears.)
I tried various methods like changing the order in which the collision blocks and script tags load, changing the Tilemap itself and adding a separate scaling section for the collision block const but all attempts were futile in loading the collision blocks above the image. The tutorial was on the vertical platformer by Chris courses. (I realized halfway through that I mislabeled ConTeXt to cxt instead of ctx but all the code works fine using it.) I have been stuck on this for 2 days and would really appreciate any help.
Specific Section:
Javascript:
const floorCollisions2D = []
for (let i=0; i<floorCollisions.length; i += 49) {
floorCollisions2D.push(floorCollisions.slice(i, i + 49))
}
const collisionBlocks = []
floorCollisions2D.forEach((row, y) => {
row.forEach((symbol, x) => {
if(symbol === 4079)
//console.log('draw')
collisionBlocks.push(new CollisionBlock({position: {x: x * 16, y: y * 16},}))
console.log(collisionBlocks)
})
})
function animate() {
window.requestAnimationFrame(animate)
cxt.fillStyle = 'rgb(255,255,255)'
cxt.fillRect(0, 0, canvas.width, canvas.height)
cxt.save()
cxt.scale(2,2)
cxt.translate(0, -background.image.height + scaledCanvas.height)
background.update()
collisionBlocks.forEach((collisionBlock) => {collisionBlock.update() })
cxt.restore()
Classes and Data:
class Sprite {
constructor({position, imageSrc}) {
this.position = position,
this.image = new Image()
this.image.src = imageSrc
}
draw() { if(!this.image) return
cxt.drawImage(this.image, this.position.x, this.position.y)}
update() {
this.draw()
}
}
class CollisionBlock {
constructor({position}) {
this.position = position
this.width = 16
this.height = 16
}
draw() {
cxt.fillStyle = 'rgba(255, 0, 0, 1.0)'
cxt.fillRect(this.position.x, this.position.y, this.width, this.height)
}
update() {
this.draw()
}
}
const floorCollisions = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
4079, 4079, 4079, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 4079, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 4079, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079, 4079,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
HTML:
<!DOCTYPE HTML>
<html>
<style>
#java-paragraph {height:126px; width:1500px; background-color:black; color:rgb(74,246,38); position: relative; top:-15px}
</style>
<canvas id="Canvas"></canvas>
<p id="java-paragraph" contenteditable='true'>This is simply a test paragraph</p>
<script src="CollisionBlock.js"></script>
<script src="Sprite.js"></script>
<script src="Player.js"></script>
<script src="Bug.js"></script>
<script src="Collision.js"></script>
<script src="Lvl-1.js"></script>
<head>
</head>
<body>
This is the entire JS, maybe it has something to do with that?
const canvas = document.querySelector('canvas');
const cxt = canvas.getContext('2d');
canvas.width=1500;
canvas.height=730;
const scaledCanvas = {width: canvas.width / 2, height: canvas.height / 2}
const floorCollisions2D = []
for (let i=0; i<floorCollisions.length; i += 49) {
floorCollisions2D.push(floorCollisions.slice(i, i + 49))
}
const collisionBlocks = []
floorCollisions2D.forEach((row, y) => {
row.forEach((symbol, x) => {
if(symbol === 4079)
//console.log('draw')
collisionBlocks.push(new CollisionBlock({position: {x: x * 16, y: y * 16},}))
console.log(collisionBlocks)
})
})
const gravity = 0.2
const player = new Player({
position: {x:0, y:0}, velocity: {x: 0, y: 0}})
const bug = new Bug({
position: {x:1400, y:0}, velocity: {x: 0, y: 0}})
const background = new Sprite({position: {x:0, y:50}, imageSrc: './Images/Level1.png'})
console.log(player)
const keys = {
a: {pressed: false},
d: {pressed: false},
w: {pressed: false}
}
let lastKey
function animate() {
window.requestAnimationFrame(animate)
cxt.fillStyle = 'rgb(255,255,255)'
cxt.fillRect(0, 0, canvas.width, canvas.height)
cxt.save()
cxt.scale(2,2)
cxt.translate(0, -background.image.height + scaledCanvas.height)
background.update()
collisionBlocks.forEach((collisionBlock) => {collisionBlock.update() })
cxt.restore()
player.update()
bug.update()
player.velocity.x = 0
if (keys.a.pressed && lastKey === 'a') {player.velocity.x = -3 }
else if (keys.d.pressed && lastKey === 'd') {player.velocity.x = 3}
}
animate()
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'd':
keys.d.pressed = true
lastKey = 'd'
break
case 'a':
keys.a.pressed = true
lastKey = 'a'
break
case 'w':
if (player.velocity.y == 0) {player.velocity.y=-10}
break
}
//console.log(event.key)
})
window.addEventListener('keyup', (event) => {
switch (event.key) {
case 'd':
keys.d.pressed = false
break
case 'a':
keys.a.pressed = false
break
case 'w':
keys.w.pressed = false
break
}
//console.log(event.key)
})
//document.getElementById('java-paragraph').onclick = function pauseGame() {
//document.getElementById("Canvas").disabled = false; }
//document.getElementById('Canvas').onclick = function resumeGame() {
//document.getElementById('java-paragraph').onclick = true;}
//Needs bug fixing later
