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

Merge pull request 'adding_randomity_colors' (#1) from adding_randomity_colors into main

Browse source 
Reviewed-on: https://gitea-192-168-197-3.c-one-infra.de/giteaAdmin/silly-game-frontend/pulls/1
This commit is contained in:
giteaAdmin 2025-04-08 13:10:57 +00:00
commit 1e36b1cdfd
4 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "silly-game-frontend",
"version": "0.0.2",
"version": "0.0.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "silly-game-frontend",
"version": "0.0.2",
"version": "0.0.3",
"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "silly-game-frontend",
"version": "0.0.3",
"version": "0.0.4",
"scripts": {
"ng": "ng",
"start": "ng serve",

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

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

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

@ -1,4 +1,4 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Component, HostBinding, HostListener, OnInit } from '@angular/core';
import { JumpService } from '../jump.service';
import { LoggerService } from '../logger.service';
import { FormsModule } from '@angular/forms';
@ -14,6 +14,18 @@ import { CommonModule } from '@angular/common';
})
export class MarioComponent implements OnInit {
pick = <T>(arr: T[]) => arr[Math.floor(Math.random() * arr.length)];
characterColors = ['red', 'green', 'blue', 'orange', 'purple', '#7fb1b8', '#b00b66', 'pink', 'brown'];
skyColors = ['#87CEEB', '#a0d8ef', '#c0e0ff', '#b0f0ff', '#00334f', '#ff6929'];
groundColors = ['#654321', '#7c4f2c', '#5b3a1a', '#4a2c15', '#000000', '#32a852', '#386e46', '#657569'];
characterColor = 'red';
skyColor = '#87CEEB';
groundColor = this.pick(this.groundColors);
@HostBinding('style.--sky-color') skyBackground = this.pick(this.skyColors);
mario = {
x: 50,
y: 0,
@ -25,7 +37,7 @@ import { CommonModule } from '@angular/common';
jumpStrength: 20,
gravity: 0.5,
onGround: false,
color: 'orange'
color: this.pick(this.characterColors)
};
private canvas!: HTMLCanvasElement;
@ -69,6 +81,7 @@ import { CommonModule } from '@angular/common';
this.mario.y = this.canvasHeight - 100;
this.loop();
this.logger.log('Game initialized');
this.logger.log(`New colors: character=${this.characterColor}, sky=${this.skyColor}, ground=${this.groundColor}`);
}
totalJumps = 0;
@ -138,7 +151,7 @@ import { CommonModule } from '@angular/common';
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Ground
this.ctx.fillStyle = '#044d00';
this.ctx.fillStyle = this.groundColor;
this.ctx.fillRect(0, this.canvas.height - 60, this.canvas.width, 60);
// Platforms
@ -147,7 +160,7 @@ import { CommonModule } from '@angular/common';
this.ctx.fillRect(p.x, p.y, p.width, p.height);
}
// Mario
// Main Character
this.ctx.fillStyle = this.mario.color;
this.ctx.fillRect(this.mario.x, this.mario.y, this.mario.width, this.mario.height);