mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-01-18 10:23:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make obstacles dark red and give them pulsing glowing effects

Browse Source
This commit is contained in:
Andrew Guibert 2018-05-22 14:53:12 -05:00
parent dca93ac15e
commit 838a2097ec
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/prebuild/src/app/entity/obstacle.ts
View File

@ -1,16 +1,25 @@
import { Shape } from 'createjs-module';
import { Shape, Shadow } from 'createjs-module';
export class Obstacle {
static readonly COLOR = '#808080';
static readonly COLOR = '#AF0000';
public shape: Shape = new Shape();
obstaclePulseUp: boolean = true;
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);
}
public update(x: number, y: number) {
this.shape.x = x;
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;
}
}

20
frontend/prebuild/src/app/game/game.component.ts
View File

@ -9,7 +9,7 @@ import { environment } from './../../environments/environment';
import { Player } from '../entity/player';
import { Obstacle } from '../entity/obstacle';
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';
@Component({
@ -40,6 +40,7 @@ export class GameComponent implements OnInit, OnDestroy {
trailsCanvas: HTMLCanvasElement;
trailsContext: CanvasRenderingContext2D;
obstaclesShape: Shape;
obstaclePulseUp: boolean = true;
constructor(private meta: Meta,
private router: Router,
@ -160,8 +161,21 @@ export class GameComponent implements OnInit, OnDestroy {
}
updateObstacles(obstacles: any) {
for (let obstacle of obstacles) {
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);
if (this.obstaclesShape.shadow) {
// 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);
}
}
}