This commit is contained in:
parent
de5e8694ec
commit
bc26cd4c42
5 changed files with 266 additions and 83 deletions
|
|
@ -1,83 +1,135 @@
|
|||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
background-color: var(--sky-color);
|
||||
background-image: url("./cloud.png");
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Comic Sans MS', 'Baloo 2', cursive;
|
||||
background: linear-gradient(to bottom, #cce7ff, #e6f2ff);
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
background-color: var(--sky-color);
|
||||
background-image: url('./cloud.png');
|
||||
// background-size: cover;
|
||||
border-top: 6px dashed #57b1ff;
|
||||
border-bottom: 6px dashed #57b1ff;
|
||||
box-shadow: inset 0 -6px 12px rgba(87, 177, 255, 0.3);
|
||||
}
|
||||
|
||||
/* HUD Container */
|
||||
.hud {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
background: linear-gradient(to bottom right, #fdfbfb, #ebedee);
|
||||
padding: 12px 18px;
|
||||
border-radius: 20px;
|
||||
border: 4px dashed #57b1ff;
|
||||
box-shadow: 0 0 20px rgba(178, 219, 250, 0.5);
|
||||
font-family: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Jump Counter */
|
||||
.jump-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: #ff4f81;
|
||||
text-shadow: 2px 2px rgba(178, 219, 250, 0.5);
|
||||
}
|
||||
|
||||
/* Buttons (Restart, Invite) */
|
||||
button {
|
||||
padding: 6px 14px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #57b1ff;
|
||||
border-radius: 12px;
|
||||
color: #3a3a3a;
|
||||
box-shadow: 0 4px 8px rgba(87, 177, 255, 0.2);
|
||||
transition: 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(178, 219, 250, 0.5);
|
||||
box-shadow: 0 0 0 3px #97c9ff;
|
||||
}
|
||||
|
||||
.hud {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px #999;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.jump-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
/* Modal Backdrop */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Modal Box */
|
||||
.modal {
|
||||
background: linear-gradient(to bottom right, #ffffff, #f1faff);
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
min-width: 300px;
|
||||
border: 4px dashed #57b1ff;
|
||||
box-shadow: 0 0 30px rgba(87, 177, 255, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 12px;
|
||||
font-size: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #97c9ff;
|
||||
background: #ffffff;
|
||||
color: #3a3a3a;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: rgba(178, 219, 250, 0.3);
|
||||
box-shadow: 0 0 0 3px #97c9ff;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
min-width: 300px;
|
||||
box-shadow: 0 0 20px rgba(0, 112, 177, 0.719);
|
||||
}
|
||||
|
||||
.modal input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.settings {
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Settings Icon/Button */
|
||||
.settings {
|
||||
padding: 8px;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
z-index: 101;
|
||||
border-radius: 50%;
|
||||
background: #ffffffcc;
|
||||
border: 2px dashed #57b1ff;
|
||||
box-shadow: 0 0 10px rgba(87, 177, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import { LoggerService } from '../logger.service';
|
|||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mario',
|
||||
|
|
@ -25,6 +26,11 @@ import { Router, RouterModule } from '@angular/router';
|
|||
|
||||
@HostBinding('style.--sky-color') skyBackground = this.pick(this.skyColors);
|
||||
|
||||
jumpingStrength: number = 21 ;
|
||||
gravity: number = 0.8;
|
||||
speed: number = 6;
|
||||
private routeSubscription: Subscription | undefined;
|
||||
|
||||
mario = {
|
||||
x: 50,
|
||||
y: 0,
|
||||
|
|
@ -32,9 +38,9 @@ import { Router, RouterModule } from '@angular/router';
|
|||
height: 60,
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
speed: 4,
|
||||
jumpStrength: 21,
|
||||
gravity: 0.5,
|
||||
speed: this.speed,
|
||||
jumpStrength: this.jumpingStrength,
|
||||
gravity: this.gravity,
|
||||
onGround: false,
|
||||
color: this.pick(this.characterColors)
|
||||
};
|
||||
|
|
@ -81,10 +87,30 @@ import { Router, RouterModule } from '@angular/router';
|
|||
private jumpService: JumpService,
|
||||
private logger: LoggerService,
|
||||
private http: HttpClient,
|
||||
private router: Router
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
const jump = Number(params['jump']);
|
||||
if (!isNaN(jump) && jump >= 0 && jump <= 100) {
|
||||
console.log(jump);
|
||||
this.mario.jumpStrength = jump;
|
||||
}
|
||||
|
||||
const gravity = Number(params['gravity']);
|
||||
if (!isNaN(gravity) && gravity > 0 && gravity <= 1) {
|
||||
console.log(gravity);
|
||||
this.mario.gravity = gravity;
|
||||
}
|
||||
|
||||
const speed = Number(params['speed']);
|
||||
if (!isNaN(speed) && speed > 0 && speed <= 100) {
|
||||
console.log(speed);
|
||||
this.mario.speed = speed;
|
||||
}
|
||||
});
|
||||
this.canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
|
||||
this.ctx = this.canvas.getContext('2d')!;
|
||||
this.canvas.width = this.canvasWidth;
|
||||
|
|
|
|||
|
|
@ -1 +1,22 @@
|
|||
<div>Main Settings</div>
|
||||
<div class="settings-container">
|
||||
<div>Main Settings</div>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p>Jumping strength (1-100):</p></td>
|
||||
<td><input type="text" id="jump" value="22"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p>Gravity (0.0-1.0):</p></td>
|
||||
<td><input type="text" id="gravity" value="0.5" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p>Speed (1-100):</p></td>
|
||||
<td><input type="text" id="speed" value="6" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button (click)="navigateToTheGame()">Continue</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -1 +1,75 @@
|
|||
.settings-container {
|
||||
font-family: 'Comic Sans MS', 'Baloo 2', cursive;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom right, #fdfbfb, #ebedee);
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 0 20px rgba(178, 219, 250, 0.5);
|
||||
width: fit-content;
|
||||
margin: 2rem auto;
|
||||
border: 4px dashed #57b1ff;
|
||||
}
|
||||
|
||||
.settings-container > div {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #ff4f81;
|
||||
text-shadow: 2px 2px rgba(178, 219, 250, 0.5);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 12px;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #5e548e;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 160px;
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
background: #ffffff;
|
||||
color: #3a3a3a;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
|
||||
transition: 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: rgba(178, 219, 250, 0.5);
|
||||
box-shadow: 0 0 0 3px #97c9ff;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
font-family: 'Comic Sans MS', 'Baloo 2', cursive;
|
||||
width: 160px;
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
background: #ffffff;
|
||||
color: #3a3a3a;
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
|
||||
transition: 0.1s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: rgba(178, 219, 250, 0.5);
|
||||
box-shadow: 0 0 0 3px #97c9ff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
|
|
@ -9,4 +10,13 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
export class SettingsComponent {
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
navigateToTheGame(): void {
|
||||
const inputJump = (document.getElementById('jump') as HTMLInputElement).value;
|
||||
const inputGravity = (document.getElementById('gravity') as HTMLInputElement).value;
|
||||
const inputSpeed = (document.getElementById('speed') as HTMLInputElement).value;
|
||||
this.router.navigate(['/game'], { queryParams: { jump: inputJump, gravity: inputGravity, speed: inputSpeed } } );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue