feat(public): add opaque background brick wall image to game

remarkablemark · remarkablemark · commit 434bd1bde939 · 2024-05-19T13:03:15.000-04:00
diff --git a/README.md b/README.md
@@ -18,7 +18,13 @@ Play the game on:
 
 ## Credits
 
+### Art
+
 - [Kenney - Puzzle Pack 2](https://kenney.nl/assets/puzzle-pack-2)
+- Photo by [Bernard Hermant](https://unsplash.com/@bernardhermant) on [Unsplash](https://unsplash.com/photos/brown-concrete-brick-t4DuoDHjxrQ)
+
+### Sounds
+
 - [Kenney - UI Audio](https://kenney.nl/assets/ui-audio)
 - [Pixabay - SPLASH](https://pixabay.com/sound-effects/splash-by-blaukreuz-6261/)
 - [Pixabay - Gentle ocean waves birdsong and gull](https://pixabay.com/sound-effects/gentle-ocean-waves-birdsong-and-gull-7109/)
diff --git a/index.html b/index.html
@@ -46,10 +46,11 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to play this game.</noscript>
+
     <script type="module">
       import kaboom from 'kaboom'
       kaboom({
-        background: [255, 255, 255],
+        background: [0, 0, 0, 0],
       })
     </script>
     <script type="module" src="src/index.ts"></script>
diff --git a/public/sprites/backgrounds/brick.jpg b/public/sprites/backgrounds/brick.jpg
diff --git a/src/constants/backgrounds.ts b/src/constants/backgrounds.ts
@@ -0,0 +1,3 @@
+export enum Background {
+  brick = 'brick',
+}
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,4 @@
+export * from './backgrounds'
 export * from './pipes'
 export * from './scenes'
 export * from './sounds'
diff --git a/src/helpers/background.ts b/src/helpers/background.ts
@@ -24,5 +24,5 @@ const backgrounds: [number, number, number][] = [
 
 export function setRandomBackgroundColor() {
   const color = backgrounds[randi(backgrounds.length)]
-  setBackground(...color)
+  setBackground(...color, 1)
 }
diff --git a/src/scenes/game.ts b/src/scenes/game.ts
@@ -1,4 +1,4 @@
-import { EmptyToFilledPipe, Scene, Sound, Tag } from '../constants'
+import { Background, EmptyToFilledPipe, Scene, Sound, Tag } from '../constants'
 import {
   checkSolution,
   getDeviceScale,
@@ -25,6 +25,13 @@ scene(Scene.game, (levelNumber: number) => {
   ])
 
   setRandomBackgroundColor()
+  add([
+    sprite(Background.brick),
+    pos(width() / 2, height() / 2),
+    anchor('center'),
+    opacity(0.2),
+  ])
+
   const level = addLevel(...getLevel(levelNumber))
 
   level.get(Tag.pipe).forEach((pipe) => {
diff --git a/src/scenes/preload.ts b/src/scenes/preload.ts
@@ -1,15 +1,13 @@
-import { pipes, Scene, Sound } from '../constants'
+import { Background, pipes, Scene, Sound } from '../constants'
 
-scene(Scene.preload, async () => {
-  const sprites = pipes.map((pipe) => {
-    loadSprite(pipe, `sprites/pipes/${pipe}.png`)
-  })
+scene(Scene.preload, () => {
+  pipes.map((pipe) => loadSprite(pipe, `sprites/pipes/${pipe}.png`))
+
+  loadSprite(Background.brick, 'sprites/backgrounds/brick.jpg')
 
-  const sounds = Object.values(Sound).map((sound) => {
+  Object.values(Sound).map((sound) => {
     loadSound(sound, `sounds/${sound}.mp3`)
   })
 
-  await Promise.all(sprites.concat(sounds))
-
   go(Scene.game, Number(new URLSearchParams(location.search).get('level')))
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export enum Background {`
	`2`	`+ brick = 'brick',`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+export * from './backgrounds'`
`1`	`2`	`export * from './pipes'`
`2`	`3`	`export * from './scenes'`
`3`	`4`	`export * from './sounds'`
Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,5 @@ const backgrounds: [number, number, number][] = [`
`24`	`24`
`25`	`25`	`export function setRandomBackgroundColor() {`
`26`	`26`	`const color = backgrounds[randi(backgrounds.length)]`
`27`		`- setBackground(...color)`
	`27`	`+ setBackground(...color, 1)`
`28`	`28`	`}`