mirror of
https://github.com/OpenLiberty/liberty-bikes.git
synced 2025-01-30 10:40:13 +08:00
Make obstacles dark red and give them pulsing glowing effects
This commit is contained in:
parent
dca93ac15e
commit
838a2097ec
@ -1,16 +1,25 @@
|
|||||||
import { Shape } from 'createjs-module';
|
import { Shape, Shadow } from 'createjs-module';
|
||||||
|
|
||||||
export class Obstacle {
|
export class Obstacle {
|
||||||
static readonly COLOR = '#808080';
|
static readonly COLOR = '#AF0000';
|
||||||
|
|
||||||
public shape: Shape = new Shape();
|
public shape: Shape = new Shape();
|
||||||
|
obstaclePulseUp: boolean = true;
|
||||||
|
|
||||||
constructor(public width: number, public height: number) {
|
constructor(public width: number, public height: number) {
|
||||||
|
this.shape.shadow = new Shadow(Obstacle.COLOR, 0, 0, 20);
|
||||||
this.shape.graphics.beginFill(Obstacle.COLOR).rect(0, 0, width, height);
|
this.shape.graphics.beginFill(Obstacle.COLOR).rect(0, 0, width, height);
|
||||||
}
|
}
|
||||||
|
|
||||||
public update(x: number, y: number) {
|
public update(x: number, y: number) {
|
||||||
this.shape.x = x;
|
this.shape.x = x;
|
||||||
this.shape.y = y;
|
this.shape.y = y;
|
||||||
|
let blur: number = this.shape.shadow.blur;
|
||||||
|
blur += this.obstaclePulseUp ? 2 : -2;
|
||||||
|
if (blur >= 50)
|
||||||
|
this.obstaclePulseUp = false;
|
||||||
|
if (blur <= 10)
|
||||||
|
this.obstaclePulseUp = true;
|
||||||
|
this.shape.shadow.blur = blur;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ import { environment } from './../../environments/environment';
|
|||||||
import { Player } from '../entity/player';
|
import { Player } from '../entity/player';
|
||||||
import { Obstacle } from '../entity/obstacle';
|
import { Obstacle } from '../entity/obstacle';
|
||||||
import { PlayerTooltip } from '../entity/player.tooltip';
|
import { PlayerTooltip } from '../entity/player.tooltip';
|
||||||
import { Shape, Stage, Text } from 'createjs-module';
|
import { Shape, Stage, Shadow, Text } from 'createjs-module';
|
||||||
import { Constants } from './constants';
|
import { Constants } from './constants';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -40,6 +40,7 @@ export class GameComponent implements OnInit, OnDestroy {
|
|||||||
trailsCanvas: HTMLCanvasElement;
|
trailsCanvas: HTMLCanvasElement;
|
||||||
trailsContext: CanvasRenderingContext2D;
|
trailsContext: CanvasRenderingContext2D;
|
||||||
obstaclesShape: Shape;
|
obstaclesShape: Shape;
|
||||||
|
obstaclePulseUp: boolean = true;
|
||||||
|
|
||||||
constructor(private meta: Meta,
|
constructor(private meta: Meta,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
@ -160,8 +161,21 @@ export class GameComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateObstacles(obstacles: any) {
|
updateObstacles(obstacles: any) {
|
||||||
for (let obstacle of obstacles) {
|
if (this.obstaclesShape.shadow) {
|
||||||
this.obstaclesShape.graphics.beginFill(Obstacle.COLOR).rect(obstacle.x * Constants.BOX_SIZE, obstacle.y * Constants.BOX_SIZE, obstacle.width * Constants.BOX_SIZE, obstacle.height * Constants.BOX_SIZE);
|
// give that shadow a pulsating effect by oscillating the blur between 10-50
|
||||||
|
let blur: number = this.obstaclesShape.shadow.blur;
|
||||||
|
blur += this.obstaclePulseUp ? 2 : -2;
|
||||||
|
if (blur >= 50)
|
||||||
|
this.obstaclePulseUp = false;
|
||||||
|
if (blur <= 10)
|
||||||
|
this.obstaclePulseUp = true;
|
||||||
|
this.obstaclesShape.shadow.blur = blur;
|
||||||
|
} else {
|
||||||
|
for (let obstacle of obstacles) {
|
||||||
|
this.obstaclesShape.shadow = new Shadow(Obstacle.COLOR, 0, 0, 20);
|
||||||
|
this.obstaclesShape.graphics.beginFill(Obstacle.COLOR)
|
||||||
|
.rect(obstacle.x * Constants.BOX_SIZE, obstacle.y * Constants.BOX_SIZE, obstacle.width * Constants.BOX_SIZE, obstacle.height * Constants.BOX_SIZE);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user