DevFW-CICD/michals-silly-game-frontend
12
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new colors

Browse source
This commit is contained in:
miwr 2025-04-08 09:51:15 +02:00
parent f54c02b8c2
commit c198ced26c
4 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/app/mario/cloud.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
src/app/mario/mario.component.html
View file

@ -1,4 +1,4 @@
<div style="width: 100%; height: 100vh; overflow-x: scroll; overflow-y: hidden;"> <div style="width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden;">
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
</div> </div>

3
src/app/mario/mario.component.scss
View file

@ -6,5 +6,6 @@ body, html {
canvas { canvas {
display: block; display: block;
background-color: #c2f0c2; background-color: #dceaff;
background-image: url("./cloud.png");
} }

8
src/app/mario/mario.component.ts
View file

@ -18,10 +18,10 @@ import { JumpService } from '../jump.service';
dx: 0, dx: 0,
dy: 0, dy: 0,
speed: 4, speed: 4,
jumpStrength: 25, jumpStrength: 20,
gravity: 0.5, gravity: 0.5,
onGround: false, onGround: false,
color: 'red' color: 'orange'
}; };
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement;
@ -129,7 +129,7 @@ import { JumpService } from '../jump.service';
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Ground // Ground
this.ctx.fillStyle = '#654321'; this.ctx.fillStyle = '#044d00';
this.ctx.fillRect(0, this.canvas.height - 60, this.canvas.width, 60); this.ctx.fillRect(0, this.canvas.height - 60, this.canvas.width, 60);
// Platforms // Platforms
@ -154,6 +154,8 @@ import { JumpService } from '../jump.service';
this.ctx.fillStyle = 'black'; this.ctx.fillStyle = 'black';
this.ctx.fillText('🏁', this.canvasWidth - 60, this.canvas.height - 170); this.ctx.fillText('🏁', this.canvasWidth - 60, this.canvas.height - 170);
// Counter
this.ctx.fillStyle = 'black'; this.ctx.fillStyle = 'black';
this.ctx.font = '20px Arial'; this.ctx.font = '20px Arial';
this.ctx.fillText(`Jumps: ${this.totalJumps}`, this.canvas.width - 150, 30); this.ctx.fillText(`Jumps: ${this.totalJumps}`, this.canvas.width - 150, 30);