Skip to content

Commit

Permalink
Graphics changed to fast - need more optimization, specially for ammos
Browse files Browse the repository at this point in the history
  • Loading branch information
@blueSparrow2000
blueSparrow2000 committed Jan 6, 2024
1 parent 7aed739 commit 0bc4fa2
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 68 deletions.
8 changes: 4 additions & 4 deletions backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,13 +91,13 @@ const ammoTypes = ['45ACP','5mm','7mm','12G','battery', 'bolt', 'bio', 'sharp',
const groundAmmoList = ['45ACP','5mm','7mm','12G','battery','bolt']

const ammoInfo = {
'45ACP':{color:'blue',size:{length:12, width:12}, amount:50, radius:3.5},
'45ACP':{color:'SteelBlue',size:{length:12, width:12}, amount:50, radius:3.5},
'5mm':{color:'DarkOliveGreen',size:{length:12, width:12}, amount:30, radius:5},
'7mm':{color:'DarkGoldenRod',size:{length:12, width:12}, amount:10, radius:7},
'12G':{color: 'DarkRed',size:{length:12, width:12}, amount:14, radius:4},
'battery':{color: 'gray',size:{length:12, width:12}, amount:4, radius:0},
'battery':{color: 'WhiteSmoke',size:{length:12, width:12}, amount:4, radius:0},

'bolt':{color: 'DarkCyan',size:{length:12, width:12}, amount:8, radius:1.5},
'bolt':{color: 'SlateBlue',size:{length:12, width:12}, amount:8, radius:1.5},


'bio':{color: 'black',size:{length:5, width:5}, amount:'inf', radius:10},
Expand Down Expand Up @@ -436,7 +436,7 @@ if (Mapconfig===3){
//makeNdropItem( 'ammo', '7', center.x + 50 , center.y + 50)
}
makeNdropItem('melee', 'knife', SCREENWIDTH/2 , SCREENHEIGHT/2 + 50 )

makeNdropItem('consumable', 'bandage', SCREENWIDTH/2 + 100 , SCREENHEIGHT/2 +100)
}


Expand Down
2 changes: 0 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,6 @@ <h1 class="text-4xl font-bold mb-0" style="padding: 0px 10px 0px 10px;" id="poin
interact/pickup item: F <br>
</p>



</div>


Expand Down
101 changes: 51 additions & 50 deletions public/js/classes/Items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,15 @@ class Item {
this.name = name
this.color = color
this.onground = onground // before pickup: true
//console.log(groundx, groundy, size, name, color, onground)
}
drawHalo(){
// halo
const haloRadius = Math.max(this.length,this.width)/2 + 5
// c.save() // use global canvas effect
// c.globalAlpha = 0.2
// c.beginPath()
// c.arc(this.groundx, this.groundy, haloRadius, 0, Math.PI * 2, false)
// c.fillStyle = 'gray'
// c.fill()

c.beginPath()
c.arc(this.groundx, this.groundy, haloRadius, 0, Math.PI * 2, false)
c.lineWidth = 3
c.strokeStyle = 'gray'
c.stroke()
// c.restore() // use global canvas effect
this.haloRadius = Math.max(this.length,this.width)/2 + 5
}
draw() { // on the ground
if (this.onground){
this.drawHalo()
c.beginPath()
c.arc(this.groundx, this.groundy, this.haloRadius, 0, Math.PI * 2, false)
c.lineWidth = 3
c.strokeStyle = 'gray'
c.stroke()

// name
c.fillStyle = 'white'
Expand Down Expand Up @@ -72,37 +59,49 @@ class Gun extends Item {
}
}



class Ammo extends Item {
constructor({groundx, groundy, size, name, onground=true, color = 'white',iteminfo = {amount , ammotype}}) {
super({groundx, groundy, size, name, onground, color})
this.amount = iteminfo.amount
this.ammotype = iteminfo.ammotype
this.itemtype = 'ammo'
this.gap = 5

}
draw() { // on the ground
if (this.onground){
const gap = 5
// c.save()
c.beginPath()
c.moveTo(this.groundx - this.length/2 - gap,this.groundy)
c.lineTo(this.groundx + this.length/2 + gap,this.groundy)
c.strokeStyle = 'black'
c.lineWidth = this.width + gap*2
c.stroke()

// c.shadowColor = this.color
// c.shadowBlur = 10
c.strokeStyle = this.color
c.lineWidth = this.width
c.beginPath()
c.moveTo(this.groundx - this.length/2,this.groundy)
c.lineTo(this.groundx + this.length/2,this.groundy)
c.stroke()


// c.save()
// c.beginPath()
// c.moveTo(this.groundx - this.length/2 - this.gap,this.groundy)
// c.lineTo(this.groundx + this.length/2 + this.gap,this.groundy)
// c.strokeStyle = 'black'
// c.lineWidth = this.width + this.gap*2
// c.stroke()

// c.shadowColor = this.color
// c.shadowBlur = 10
// c.strokeStyle = this.color
// c.lineWidth = this.width
// c.beginPath()
// c.moveTo(this.groundx - this.length/2,this.groundy)
// c.lineTo(this.groundx + this.length/2,this.groundy)
// c.stroke()
// c.restore()

// amount
c.fillStyle = 'white'
c.fillText(this.amount,this.groundx-5,this.groundy+4)
// amount - this takes time...
// c.fillStyle = 'white'
// c.fillText(this.amount,this.groundx-5,this.groundy+4)
}
}
}
Expand All @@ -113,39 +112,41 @@ class Consumable extends Item {
this.amount = iteminfo.amount
this.healamount = iteminfo.healamount
this.itemtype = 'consumable'
this.gap = 2
this.barlen = 6
}
draw() { // on the ground
if (this.onground){
// c.save()
// c.shadowColor = 'white'
// c.shadowBlur = 10

// c.beginPath()
// c.moveTo(this.groundx - this.length/2,this.groundy)
// c.lineTo(this.groundx + this.length/2,this.groundy)
// c.strokeStyle = this.color
// c.lineWidth = this.width
// c.stroke()

c.beginPath()
c.moveTo(this.groundx - this.length/2,this.groundy)
c.lineTo(this.groundx + this.length/2,this.groundy)
c.strokeStyle = this.color
c.lineWidth = this.width
c.stroke()
// c.restore()
c.arc(this.groundx, this.groundy, this.length, 0, Math.PI * 2, false)
c.fillStyle = this.color
c.fill()


if (this.name == 'medkit'){
const gap = 2
const barlen = 6

// c.save()
// c.shadowColor = 'red'
// c.shadowBlur = 3

c.beginPath()
c.moveTo(this.groundx - barlen,this.groundy)
c.lineTo(this.groundx + barlen,this.groundy)
c.moveTo(this.groundx - this.barlen,this.groundy)
c.lineTo(this.groundx + this.barlen,this.groundy)
c.strokeStyle = 'red'
c.lineWidth = gap
c.lineWidth = this.gap
c.stroke()

c.beginPath()
c.moveTo(this.groundx,this.groundy - barlen)
c.lineTo(this.groundx,this.groundy + barlen)
// c.strokeStyle = 'red'
// c.lineWidth = gap
c.moveTo(this.groundx,this.groundy - this.barlen)
c.lineTo(this.groundx,this.groundy + this.barlen)
c.stroke()

// c.restore()
Expand Down
8 changes: 5 additions & 3 deletions public/js/classes/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,12 @@ class Player {
c.fillText(`${currentHoldingItem.ammotype}: {${this.ammoList[currentHoldingItem.ammotype]}}`,this.x - 10 ,this.y + this.radius*5)


} else if(currentHoldingItem.itemtype === 'consumable'){
c.fillText(`${currentHoldingItem.amount}`,this.x - 5 ,this.y + this.radius*4)
}
// only one stack possible
// else if(currentHoldingItem.itemtype === 'consumable'){
// c.fillText(`${currentHoldingItem.amount}`,this.x - 5 ,this.y + this.radius*4)

}
// }

}
}
Expand Down
9 changes: 4 additions & 5 deletions public/js/classes/Projectile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@ class Projectile {
draw() {
if (this.gunName === 'CrossBow'){
// c.save()
c.lineWidth = 6
c.fillStyle = 'white'
c.lineWidth = 1
c.strokeStyle = 'white'
c.beginPath()
c.arc(this.x,this.y, 10, this.startangle, this.endangle, false) // 10 is about the speed at terminal
c.fill()
c.stroke()

c.strokeStyle = 'DarkCyan'
c.lineWidth = 2
c.strokeStyle = 'SlateBlue'
// trail effect
c.beginPath()
c.moveTo(this.x - this.velocity.x, this.y - this.velocity.y)
Expand Down
5 changes: 1 addition & 4 deletions public/js/frontend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ socket.on('updateFrontEnd',({backEndPlayers, backEndEnemies, backEndProjectiles,
// update players attributes
frontEndPlayerOthers.health = backEndPlayer.health
frontEndPlayerOthers.score = backEndPlayer.score

// inventory attributes
frontEndPlayerOthers.currentSlot = backEndPlayer.currentSlot
// Item: inventory management
Expand Down Expand Up @@ -430,9 +430,6 @@ const LINEARINTERPOLATIONCOEF = 0.5
let animationId
function animate() {
animationId = requestAnimationFrame(animate)
//c.fillStyle = 'rgba(0, 0, 0, 0.2)'
//c.fillRect(0, 0, canvas.width, canvas.height)

c.clearRect(0, 0, canvas.width, canvas.height)


Expand Down

0 comments on commit 0bc4fa2

Please sign in to comment.