diff --git a/.gitignore b/.gitignore
index 8a25d13..7a9816f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,12 @@
*.iml
.gradle
/local.properties
-/.idea
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
.DS_Store
/build
/captures
@@ -10,7 +15,3 @@
local.properties
node_modules
*.zip
-app/release/
-.parcel-cache/
-dist
-keystore.properties
\ No newline at end of file
diff --git a/Readme.md b/Readme.md
index 7ef513f..e56de00 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,598 +1,89 @@
# Breakout 71
-Break colourful bricks, catch bouncing coins and select powerful upgrades !
-
-- [Play now](https://breakout.lecaro.me/)
-- [Donate](https://paypal.me/renanlecaro)
-- Bitcoin : bc1qlh8kywy3ttsuqqa08yx2rdc8dqhdvyt43wlxmr
-- [Discord](https://discord.gg/bbcQw4x5zA)
-- [itch.io](https://renanlecaro.itch.io/breakout71)
-- [F-Droid](https://f-droid.org/en/packages/me.lecaro.breakout/)
-- [Google Play](https://play.google.com/store/apps/details?id=me.lecaro.breakout)
-- [GitLab](https://gitlab.com/lecarore/breakout71)
-
-# Changelog
-## To do
-
-
-## Done
-- reworked level up screen :
- - bigger "level X / Y cleared"
- - upgardes need to all be spent on the same list of perks (to avoid reading too much)
- - instead of rerolls, you get a longer list of choices to pick from with silver/gold medals
- - clarified challenges, only show them when you pass one of them
- - removed the "sides bounce" challenge, bouncing on sides shouldn't be punished
- - once you reach high score of 1000, level unlock hints appear, and required / forbidden upgrades and colored gold/red
- - added tooltip on most items on that screen, that can be triggered on mobile by tapping the text
-
-- new perk : steering
-- boosted perk : stronger foundation (+3 combo, then +4, then +5..)
-- easy cleanup special effect (and X made of particles)
-- added a few levels
-- level end countdown (on mobile and desktop)
-- level start countdown (on mobile)
-- loosing ball is ok during level end countdown
-
-- unlocked upgrades and levels : split item description (with tooltip) and "try" button
-- creative mode : removed tooltips for perks as they were getting in the way on mobile
-- Fix: removed progress bars from unlocked level as there's no real progress
-- Fix :upgrades list now uses numbers instead of bars, looks better with limitless
-- Fix :somehow score clicks didn't register while the game was playing, that's solved
-- Fix : click tooltip to open on mobile, click anywhere to close
-- Fix: Can't press help buttons in Creative Menu
-- Fix: wait for bricks to respawn before leveling up
-- UX : score and menu button look extra clickable until you tap them 3 times and restart the app
-
-## 29097764
-
-- Added levels : Fish, Spider, GlidersLone island,Spacewyrm Jon, Taijitu, Egg pan, Inception, Chess
-
-## 29095000
-
-- hardcoded the levels unlock conditions so that they wouldn't change at each update
-- added a "display level code" button in level editor
-- passive income : paddle will be transparent for a much shorter time
-- better mobile mode detection
-- clear tooltip on page scroll
-
-## 29092809
-
-- fixed: crash when running out of levels (i think, i didn't try)
-- fixed: context menu and tooltip stuck on windows
-
-## 29091656
-
-- categorized the icons
-- color coded the icons
-- changed the wording of perks help to be shorter
-- added tooltips on perks with full help, and a help button on mobile
-- all or nothing : don't show negative number of coins cought, don't reduce score if no combo was lost
-- rename hypnosis to golden_goose, apply when hitting any brick, any side at level 2
-- removed comboIncreaseTexts option
-- minefield : +10% coins per bomb on screen
-- extra life are transparent when you have 2+ balls
-- removed : instant_upgrade
-- nerfed : helium : now need to be level 3 to have the same effect of keeping coins up
-- new level : Blinky by Big Goober
-- game over screen : perk list at the bottom, after unlocks and stats
-
-## 29088680
-
-- new perk: happy family: + lvl points per paddle bounce per extra ball, reset on ball lost
-- nerfed perk : sticky coins : stick to same color at level 1, any color at level 2+
-- nerfed perk: zen : combo increases every 3 seconds, resets on explosion
-
-## 29088513
-
-- included german corrections by Pock
-- added particle effect for wrap
-- removed grace period from passive income, updated icon
-
-## 29087440
-
-- zen : now you gain one combo per bomb on screen when breaking a brick (so no bombs, no gain)
-- sticky coins : coins stay stuck when there's an explosion
-- wrap_left / wrap_right : teleport the ball to the other side of the screen when it hits a border
-- passive income : now moving the puck makes it transparent to coins and balls, but not reset the combo
-- main menu : split level unlock and perks unlocks
-
-## 29087252
-- apply percentage boost to combo shown on brick
-- smaller puck now gives +50% coins per level
-- transparency now gives +50% coins if ALL balls are fully transparent, less otherwise
-- new perk : sticky coins (coins stick to bricks)
-- left/top/right is laval perks : at level 2+, the corresponding borders completely disappears (reachable with limitless)
-- new perk : three cushion (gain point for indirect hits)
-- live stats: coins still in the air appear as "lost" in the catch percentage, as in the final computation
-- level editor : removed the conditions on bricks count, level name and credits to be able to copy the code
-- shadow around ball when there are many coins : enabled in basic mode too
-- hot start : after reset, if you raise the combo again, only start ticking down after a whole second.
-- new perk : ottawa treaty, breaking a brick near a bomb disarms the bomb
-- shocks now doesn't add ball speed at level 1
-- creative mode UI rework
-- compound_interest : combo resets as soon as coin passes the paddle line
-- added bombs to implosion and kaboom starter levels
-- toast an error if storage is blocked
-- toast an error if migration fails
-- fixed video download in apk
-- ask for permanent storage
-- option: reuse past frame's light in new frame lighting computation when there are 150+ coins on screen, to limit the performance impact of rendering lots of lights
-
-## 29084606
-
-- simpler and more readable encoding for save files
-- removed check of payload signature on save file, seemed to fail because of the poor encoding of the name of the "côte d'ivoire" level
-- automatic detection of the number of steps required for physics
-- trial runs detection fix
-
-## 29083397
-
-- highlight last used creative level
-- access autoplay mode from the menu
-- access stress test mode from the menu, show real time stats
-- Render bottom border differently to show how far the puck can go
-- Corner Shot: scale like Need Some Space
-- grey out irrelevant options in the settings
-- Back to Creative Menu at the end of a Creative level
-
-## 29080170
-
-- don't show unlock toast at first startup for levels that are unlocked by default
-- Droplet particle color should be gold for gold coins
-- added levels: A Very Dangerous High-Five, The Boys
-
-## 29079818
-
-- Imported levels : Mario, Minesweeper and Target
-- Fixed an issue with localstorage saving of custom levels
-
-
-## 29079805
-
-- combo text on paddle will be grey if we're at the base combo
-- transparency now rounds up
-- import level up to 21 x 21
-- corrected icon of "padding"
-
-## 29079087
-
-- measured and improve the performance (test here https://breakout.lecaro.me/?stresstest)
-- added a few levels
-- autoplay mode (with wake lock and computer play https://breakout.lecaro.me/?autoplay )
-- Added particle and sound effect when coin drops below the "waterline" of the puck
-- slower coins fall once they are under the paddle
-- in game level editor
-- allow loading newer save in outdated app (for rollback)
-- game crashes when reaching level 12 (no level info in runLevels)
-
-## 29074385
-
-- added back some extra languages
-- superhot: fixed particles durations and level duration
-- bricks aattract coins : less powerfull
-- bricks attract balls
-- unbounded nerf : just adds padding around bricks, not combo add
-- don't tell user to get -100 points to unlock level
-- display colored coins when there's hypnosis or rainbow enabled
-
-## 29071903
-
-- new perk : hypnosis
-- new perk : rainbow
-- new perk : bricks attract coins
-- Extra choice: wrong text for french "2 more choices"
-- metamorphosis : when coins are spent, display them hollowed out
-- super hot : starting level rework
-- zen : added bombs to starting level
-
-## 29071527
-
-- super hot : time moves only when paddle moves. Later levels slow down even more the time when you're not moving.
-- transparency : ball becomes transparent towards top of screen, +50% coins.
-- space coins : coins bounce without loosing momentum
-- trickledown : coins spawn at the top of the screen
-- unlocked content : start with perk icon as level
-- allow removing all starting perks, to get full random
-- rename "puck" into paddle
-- use french as base language to keep consistent formal/informal tone
-- fixed memory leak in language detection code
-
-## 29069860
-
-- when rendering level icons, always use transparent background
-- resized some levels to use as flags, added some missing languages as levels
-- added machine translation, so that translators can try the game in their language first : ar,de,es,ko,ru,ur,uz,zh
-- change translation keys to get better sorted files
-- change fortunate ball to work more like coin magnet, carrying the balls around to catch them at next puck bounce
-- add a test to forbid more than 5% grey bricks on black background, remove grey bricks border
-- simplified texts to make translation easier
-- fixed some issues around saved level unlocks
-- change donation text to not suggest an amount
-- limited history to top 100 runs
-
-## 29068563
-
-- review the "next unlocks" in score and game over
-- As soon as upgrade condition is reached, toast
-- As soon as level condition is reached, lock it in and tell the user
-- extra life only saves your last ball, max 7 instead of 3
-- Don't use "RAZ" in French explanations.
-- explain ghost coin's slow down effect
-- when there are only a few coins, make them brighter
-- Perk : [colin] minefield
-- clear scheduled sounds if sounds off
-- show unlocked levels above game stats in gameover screen
-- reduce resolution of lights even more (1/16)
-
-## 29067205
-
-- tooltip isn't readable at bottom of screen
-- added levels as tributes to game players
-- display closest unlock with current perks in score and gameover screens
-- initial perk icon = first level
-- fix starting perk option not working
-- progress bar for unlock in unlocks menu
-- display runs history
-- in the runs history, only save perks that were chosen by the user
-- migration to save past content to localStorage.recovery_data right before starting a new version
-- mention unlock conditions in help
-- show unlock condition in unlocks menu for perks as tooltip
-- fallback for mobile user to see unlock conditions
-- New perk : "limitless" raises the max of all perks by 1
-- Boosted perk : side kick, now you just need to hit bricks from the left side to gain +lvl combo, hitting from the right side does -2xlvl combo
-- add unlock conditions for levels in the form "reach high score X with perk A,B,C but without perk B,C,D"
-- remove loop mode :
- - remove basecombo
- - remove mode
- - clear old runs in other mode
-- ignore scores in creative mode
-- remove the slow mode
-- adjusted the light effects
-- added white border around dark grey bricks
-- remove the opaque coin options, all coins are opaque, but dark grey ones have white border
-- archive each version as an html file and apk
-- publish 29062687 on play store
-- redo video
-- review fastlane text
-
-- tried and cancelled native desktop app build with tauri because :
- - there's no cross compilation, so no exe build on linux
- - you need to sign executable differently for each platform
- - the .deb and .rmp files were 3.8M for a 0.1M app
- - the appimage was crazy big (100M)
- - I'd need a mac to make a mac version that probably wouldn't run without doing the app store dance with apple
-
-## 29062687
-
-- tried and cancelled webgl rendering
- - it's a lot of code
- - i'm not great at it
- - it requires a significant rewrite
- - for most things, no perf difference
- - the main goal of having more colorful backgrounds can be achieved by running the lights layer at lower res
-- "Miss warning" option is now on by default (ball's particles are red if catching it would be a "miss")
-- "Show +X in gold" option is now on by default (show a +X when combo increases)
-- "High contrast" option added, off by default (applies lights layer again as "soft light" at the end of the render)
-- "Colorful coins" option now applied at render time instead of coin spawn time, to make preview easier
-- when settings are opened on pc, they show up on the side and the overlay is transparent to let you preview the changes
-
-## 29062545
-
-- Perks list now only lists upgrades that have been picked, or have banned levels
-- After clearing a level, that level is dimmed in the clairvoyant level list [Bearded-Axe]
-- limited clairvoyant to level one outside looped runs [obigre]
-- yoyo now has more effect when the ball is at the top of the screen [obigre]
-- telekinesis now has more effect when the ball is at the bottom of the screen
-- "Top is lava" combo lost text is now spawned a bit lower to be more visible [obigre]
-
-## 29061838
-
-- New perk : Fountain toss [colin] - loosing coins makes your combo grow
-- Boosted : Asceticism now decreases combo instead of resetting it
-- Graphics : show respawn particles even in basic mode [obigre]
-- Graphics : adjusted the brightness of the game a bit more
-
-## 29061490
-
-- Graphics : option to add more light (on by default)
-- Graphics : option to make coins more readable (on by default)
-- Graphics : background light effects optimization
-- Graphics : all levels background have been checked (4 buggy ones removed) and will be assigned randomly
-- Fixed : display gained combo was showing +0 sometimes
-
-## 29060272
-
-- Fixed: Strict sample size was counting destroyed bricks, now count hits as explained in the help
-- Fixed: passive_income was resetting your combo if you moved around the end of the last level
-- Fixed: a high score issues was systematically erasing the high score in the web version, i added a migration to load the best score for your top games to recover the high score.
-- QOL: option to display gained combo as onscreen text
-- QOL: publish an apk to itch.io with every build
-- Internal: added a simple game data migration system
-
-## 29059721
-
-- QOL: icons in settings menu
-- QOL: choose starting perks
-- QOL: fixed issue with reloading with [R] key
-- QOL: gameover screen restarts in the same game mode
-- Fixed: Trampoline render sides in red.
-- Fixed: tooltips stuck on mobile
-- Fixed: issues with restarting a game with fullscreen on
-
-## 29058981
-
-- [jaceys] A visual indication of whether a ball has hit a brick this serve (as an option)
-- Top down /reach: now only the lowest level of N bricks resets combo, and all other bricks do +N combo
-- picky eater: don't reset if no brick of ball color
-- main menu : show high score
-- keep high score of past runs
-- tooltip on stats
-- fixed : looping didn't work
-- two abstract levels, stripes and openings
-- added reset button for perks in lab mode
-
-## 29058469
-
-- New game mode : loop / long game
- - the goal is to build many different build centered on one perk
- - At the end of level 7, you get to restart at level 1 for 6 levels.
- - all your perks are banned except one
- - The perk you keep is leveled up, and can be leveled up a second time during the next loop
- - the perks you don't keep are "banned", meaning their max level is reduced by as many levels as you had picked
- - unlocked after unlocking all perks
-- New game mode : lab / creative
- - the goal is to come up with 3 completely different but powerful play styles
- - you freely create 3 builds from all the perks level available
- - you play them against the levels of your choice
- - try to make as much score as possible in total
- - unlocked after unlocking all perks
-- New levels :
- - Pingwin
- - Sunglasses
- - Balloon
-- Adjusted levels :
- - orca is no longer made of bombs, but gray block
-- New perks
- - addiction : reward faster gameplay
-- Adjusted perks
- - Hot start : 30 combo per level instead of 15
- - Telekinesis: limited to level 1
- - Asceticism now gives +3 combo per lvl
- - Fortunate ball has a stronger effect
- - Bigger puck : puck can now cover the whole screen at higher levels, but not more
- - Corner shot : higher levels let you move further away from the play area
- - Forgiving : level 2 halves the penalty, level 3 is a third ..
- - Helium : stronger anti gravity at higher levels
- - Implosions : works like bigger-explosions at higher levels
- - Metamorphosis : coins can stain more bricks at higher levels
- - Re-spawn : now delay based and probabilistic, to scale more easily with higher levels. no need to hit the puck
- - sacrifice : at level 2+ the combo is doubles/tripled just before clearing the screen of any bricks
- - shunt : changed the math keep 25% of combo at level 1,50% at level 2,63% at level 3,70% at level 4..
- - soft reset : same math as shunt
- - smaller puck : now the puck can get as small as a ball
- - Unbounded : at level 2+, the top of the level is gone too
- - concave_puck : ball bounces straighter and straighter, to the point where you can't move it without another perk
- - shocks lvl 2+ make bigger explosions
- - trampoline: nerfed a little bit, now all sides and top hit reduce combo
-
-- Quality of life
- - Updated discord invite link that had expired
- - Full screen is now a persistent option, when it's on the game will switch to full screen before starting
- - Added an option to always get colored coins
- - Made the "combo lost" text last 500ms instead of the pointless 150ms
- - Added in-game help and credits, which can be translated
- - Balancing : you earn an extra perk when playing well, and a reroll when playing perfectly
- - added a prominent "donate" link after 5h of playing, and setting to hide it permanently
- - disabled auto-release to F-Droid, i'll use the web version as the testing ground first
- - added a white border around all coins, to make dark ones visible on dark bg
- - [jaceys] counters for coins lost, misses, and boundary bounces, as well as a timer.
- - Unlocked list : split perk and levels, added tooltips
-
-## 29049575
-
-- added rerolls
-- Sacrifice : clear screen instead of doubling coins
-
-## 29048147
-
-- Ascetism : render coins with red border if there's a combo
-- Warn about unbounded
-- Red border dashes
-
-# Ideas and features
-
-## Easy perk ideas
-
-- chill : no perks gain, no level limit,+20 base combo
-- when the ball teleport, probability that it's duplicated instead
-- combo resets on teleport
-- combo resets when hitting puck without a teleport
-- teleport ball to puck as soon as it hits something (% chance)
-- allow dropping balls that are about to miss.
-- square coins : coins loose all horizontal momentum when hitting something.
-- ball turns following puck motion
-- "+1 coin for each ball within a small radius of the broken brick" ?
-- two for one : add a 2 for one upgrade combo to the choice lists
-- cash out : double last level's gains
-- snowball : Combo resets every 0.1s . +1 combo for each combo gained Since last reset.
-- Chain reaction : +lvl*lvl combo per brick broken by an explosion, combo resets after explosion is over
-- catching a coin changes the color of the balls
-- coins stained by balls
-- fast pause : pause delay divided by {{lvl}} (helps with teleport)
-- [colin] Capital - les vies non perdues à la fin du niveau rapportent un bonus de points
-- ban 3 random perks from pool, gain 2 upgrades
-- faster coins, double value
-- balls repulse coins
-- n% of coins missed respawn at the ball
-- +1 combo per brick broken after a wall bounce, reset otherwise
-- combo climbs by 1 every 2 second, unless no coin was caught, then it resets
-- [colin] golden corners - catch coins at the sides of the puck to double their value
-- [colin] varied diet - your combo grows by 2 when your ball changes color, but decreses by one when a brick is broken ?
-- [colin] trickle up - inverse of reach more or less
-- +lvl combo per bricks / resets after 5/lvl seconds without explosion ?
-- +lvl combo per bricks / resets after 5/lvl seconds without coin catch ?
-- +lvl combo per bricks / resets after 5/lvl seconds without ball color change ?
-- +lvl combo per bricks / resets after 5/lvl seconds without sides hit ?
-- + lvl x n combo when destroying a brick after bouncing on a side/top n times ?
-- make stats a clairvoyant thing
-- [colin]P ocket money — bricks absorb coins that touch them, which are released on brick destruction (with a bonus?)
-- [colin] turn ball gravity on after a top bar hit, and until bouncing on puck
-- fan : paddle motion creates upward draft that lifts coins and balls
-
-## Medium difficulty perks ideas
-- coins combine when they hit (into one coin with the sum of the values, but need a way to represent that)
-- balls collision split them into 4 smaller balls, lvl times (requires rework)
-- offer next level choice after upgrade pick
-- [colin] mirror puck - a mirrored puck at the top of the screen follows as you move the bottom puck. it helps with keeping combos up and preventing the ball from touching the ceiling. it could appear as a hollow puck so as to not draw too much attention from the main bottom puck.
-- [colin] Combos extrêmes: lvl2 pour tous les combos, qui fait que le combo rapporte double ou triple, mais si sur un niveau la condition n'est pas respectée alors le perk ne donne plus de combo bonus pour ce niveau.
-- [colin] Mytosis - les blocs bombe n'explosent pas mais relâchent une nouvelle balle à la place (clashes with "shocks" and "sapper")
-- [colin] Juggle - au début du niveau, chaque balle est lancée l'une après au lieu de toutes à la fois (needs some work)
-- SUPER HOT (time moves when puck moves)
-- bricks attract ball
-- bricks attract coins
-- wrap left / right
-- correction : pick one past upgrade to remove and replace by something else
-- +1 combo when ball goes downward, reset if upward
-- 2x speed after bouncing on puck
-- the more balls are close to a brick, the more combo is gained when breaking it. If only one ball, loose one point or reset
-- ball avoids brick of wrong color
-- puck slowly follows desired position, but +1 combo
-- knockback : hitting a brick pushes it (requires sturdy bricks)
-
-## Hard perk ideas
+A simple, single player, challenging arcade breakout game.
+The goal is to break all the bricks of 7 levels, which catching as many coins as you can.
+You have only one life, if you lose your ball you'll go back to the start
+At the end of each level, you get to select an upgrade.
+
+[Play now](https://breakout.lecaro.me/) -
+[Google Play](https://play.google.com/store/apps/details?id=me.lecaro.breakout) -
+[itch.io](https://renanlecaro.itch.io/breakout71) -
+[GitLab](https://gitlab.com/lecarore/breakout71)
+[Donate](https://github.com/sponsors/renanlecaro)
+
+## TODO
+- automate itch update https://itch.io/docs/butler/pushing.html
+- apply a minimum speed to the ball (when 2 slower balls picked it is crawling)
+- Fdroid
+- easily start a test game with specific upgrades or levels (with query string or through menu)
+- show total score on end screen (score added to total)
+- show stats on end screen compared to other runs
+- handle back bouton in menu
+- more levels : famous simple games, letters, fruits, animals
+- perk : wrap left / right
+- perk : twice as many coins after a wall bounce, twice as little otherwise
+- perk : fusion reactor (gather coins in one spot to triple their value)
+- perk : missing makes you loose all score of level, but otherwise multiplier goes up after each breaking
+- perk : n/10 of the broken bricks respawn when the ball comes back
+- perk : bricks take twice as many hits but drop 50% more coins
+- perk : wind (puck positions adds force to coins and balls)
+- perk : balls repulse coins
+- missing triggers and explosive lighting strike around ball path
+
+## maybe
+
+- Make a small mp4 of game which can be shown on gameover and shared. https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
+- perk : soft reset, cut combo in half instead of zero
+- perk : missile goes when you catch coin
+- perk : missile goes when you break a brick
+- when game resumes near bottom, be unvulnerable for .5s ? , once per level
- accelerometer controls coins and balls
-- [colin] side pucks - same as above but with two side pucks : hard to know where to put them
-- [colin] Perk: second puck in the middle of the screen
-- [colin] Sponge Ball : the ball stores coins it collides with, and releases them when bouncing on any border (left, right, top).
+- mouvement relatif du puck
+- balls should collide with each other
+- randomize coins gravity a bit, to make fall more appealing
+- apply global curve / brightness to canvas when things blow, or just always to make neon effect better
+- perk: bricks attract coins
+- perk : puck bounce +1 combo, hit nothing resets
+- manifest for PWA (android and apple)
+- publish on fdroid
+- nerf the hot start a bit
+- brick parts fly around with trailing effect ?
+- trailing white lines behind ball
+- some 3d ish effect ?
+- shrink brick at beaking time ?
+- perk : multiple hits on the same brick (show remaining resistance as number)
+- particle effect around ball when loosing some combo (looks bad)
+- Make bricks shadow the light ? using a "fill path" in screen mode, with a gradient background...would get very laggy, maybe just for the ball
+- keyboard support
+- perk : bricks attract ball
+- perk : replay last level (remove score, restores lives if any, and rebuild )
+- perk: breaking bricks stains neighbours
+- perk: extra kick after bouncing on puck
+- perk: transparent coins
+- perk: coins of different colors repulse
+- 2x coins when ball goes downward ?
+- engine: Offline mode web for iphone
+- engine: webgl rendering (not with sdf though, that's super slow)
-## ideas to sort
-- wind : move coins based on puck movement not position
-- double coin value when they hit the sides
-- [colin]Brambles — coins that touch the walls and ceiling get stuck and are thrown back when the last brick is destroyed
-- [colin]Ball of Greed — the ball can collect coins (might be worth dividing into levels: lvl 1, can collect coins only after two bounces on bricks or walls. lvl 2, can collect after 1 bounce. lvl 3, can collect coins anytime)(or change the ball collection radius as the level grows)
-- [colin]Phantom ball — the ball phases through 2 bricks then becomes solid (lvl2: through 6 bricks, lvl3; through all bricks until it touches a wall)
-- [colin]Cryptomoney — coins that should be generated by bricks are instantly collected, but count for half their value
-- [colin]Relative time — ball speed depends on its position: if it's high up on thi screen it's fast, if it's lower it's slower
-- ball attracted by bricks of the color of the ball
-- level flips horizontally every time a ball bounces on puck
-- [colin] close quarters - balle attirée par tous les blocs/par un bloc aléatoire, actif à portée de bloc (+1bloc au lvlup)/proportionnel à une force (+puissance au lvlup)…
-- [colin] plusieurs perks qui déclenchent des effets quand une balle est perdue. par ex: +3 combo à chaque balle perdue, 5 blocs transformés en bombe, balle et coins ralentis, blocs régénérés…
-- [colin] faster style - augmente le combo en fonction de la vitesse de la balle
-- [colin] perk: roulette - gagne instantanément 2 perks aléatoires
-- other block types : bumper (speed up ball) [colin], metal (can't break) [nicolas]
-- flip perk
+## Credits
-## extra levels
+I pulled many background patterns from https://pattern.monster/
+They are displayed in [patterns.html](patterns.html) for easy inclusion.
+Some of the sound generating code was written by ChatGPT, and heavily
+adapted to my usage over time. Some of the pixel art is taken from google
+image search. I hope to replace it by my own over time.
-- Good games :
- - FTL
- - Nova drift
- - Noita
- - Enter the gungeon
- - Zero Sivert
- - Factorio
- - Swarm
- - Nuclear throne
- - Brigador
+[Heart](https://www.youtube.com/watch?v=gdWiTfzXb1g)
+[Sonic](https://www.deviantart.com/graystripe2000/art/Pixel-art-16x16-Sonic-936384096)
+[Finn](https://at.pinterest.com/pin/finn-the-human-pixel-art--140806230775275/)
+[Mushroom](https://pixelartmaker.com/art/cce4295a92035ea)
+## APK version
-- letters and an associated word or name
-- famous characters and movies
-- famous places : eiffel tower, taj mahal, etc..
-- fruits
-- animals
-- countries flags and shapes
+The web app is around 50kb, compressed down to 10kb with gzip
+I wanted an APK to start in fullscreen and be able to list it on fdroid and the play store.
-
-## UX / gameplay
-
-- make menu and score button more "button like" when you just installed the game.
-- avoid showing a +1 and -1 at the same time when a combo increase is reset
-- explain to iOS users how to add the app to home screen to get fullscreen
-- delayed start on mobile to let users place the puck where they want
-- experiment with showing the combo somewhere else, maybe top center, maybe instead of score.
-- display a multiplicator if it's not 100%, have some perks add to it
-
-
-## Game engine features ideas
-- add a clickable button to allow sound to play in chrome android
-- save state in localstorage for easy resume of a game in progress
-- handle back bouton in menu
-- Offline mode web for iphone
-- controller support on web/mobile
-- leaderboard for not using each perk, like "best runs without hot start"
-
-
-## Maybe one day
-- https://weblate.org/fr/ quite annoying to have merge conflicts while pushing, i'll enable it later.
-- auto-detect device performance at first startup and adjust settings accordingly (hard to do in any sort of useful way)
-- [jaceys] Move the restart button out of the menu, so that it is more easily accessible (will allow user to choose starting perk instead)
-- colored coins only (coins should be of the color of the ball to count, otherwise what ? i'd rather avoid negative points)
-- coins avoid ball of different color (pointless)
-- [colin] wormhole - the puck sometimes don't bounce the ball back up but teleports it to the top of the screen as if it fell through from bottom to top. higher levels reduce the times it takes to reload that effect (not sure how that to word that in 1 setence)
-- [colin] Mental charge - the puck is divided into two smaller pucks, then 3 smaller ones at lvl 2 : what's the point ?
-- [colin] sturdy ball - does more damage to bricks, to conter sturdy bricks :that's pierce now
-- [colin] plot - plot the ball's trajectory as you position your puck : too hard when you add other perks
-- [colin] piggy bank - bricks absorb coins that fall onto it, and release them back as they are broken, with added value : equivalent to Asceticism
-- [colin] ball coins - coins share the same physics as coins and bounce on walls and bricks : really hard to balance with speeds and all
-- non brick-shaped bricks, tilted bricks,moving blocks : very difficult because of engine optimisations
-- 3 random perks immediately, or maybe "all level get twice as many upgrades, but they are applied randomly, and you aren't told which ones you have."
-- coins repulse coins, could get really laggy ?
-- russian roulette: 5/6 chances to get a free upgrade, 1/6 chance of game over. Not really fun
-- [colin] bigger ball - self-explanatory, or is it ? what's the point ? physics would break now if ball bigger than bricks
-- [colin] smaller ball - doable, but why
-- [colin] earthquake - when the puck hits any side of the screen with velocity, the screen shakes and a brick explodes/falls from the level. alternatively, any brick you catch with the puck gives you the coins at the current combo rate. each level lowers the amount of hits before a brick falls. Problem : no limit on how often you can slam the puck around
-- missile goes when you catch coin
-- missile goes when you break a brick
-- [colin] Batteries - lvl1: recharge les pouvoirs du puck quand la balle touche le haut de l'écran (1 fois par lancer, se recharge en touchant le puck). lvl2: également après voir détruit 6 blocs. lvl3: également quand elle touche les bords de l'écran : i'll probably just let the second puck replace this
- - store much more details about run (level by level) as numbers only (instead of json that gets big false)
-- [colin] hitman - hit the marked brick for +5 combo. each level increases the combo you get for it.
-- [colin] sweet spot - place your puck directly below a moving spot at the top of the level to increase your combo
-- [colin] reward the player with more choices/perks for breaking a brick while having reached an increasing combo thresholds. 5 combo, then 10, then 20, then 40 etc… once a threshold is reached you aren't rewarded for that threshold again until you start a rew run
-- mobile option: relative movement of the touch would be amplified and added to the puck
-- mobile option: don't pause on mobile when lifting finger
-- translate fastlane presentation texts to french
-- convert captures to mp4 unsing ffmpeg wasm because reddit refuses webm files
-- disable zooming (for ios double tap)
-- Waterline under the puck, coins slow down a lot, reflections
-- webgl rendering: background gradient light map, shinier coins, quite hard
-- on mobile, add an element that feels like it can be "grabbed" and make it shine while writing "Push here to play"
-- hard mode : bricks take many hits, perks more rare, missing clears level score, missing coins deducts score..
-- architect mode :
- - play 7 levels, each with a different build.
- - Perk levels can only be used once, so if you take one for level 1, you won't have it to level 2-7.
- - Your final score is your worst score times your best score
- - You'll see the levels in advance
-- stats by lack of perk, like "best score without using hot start".
-- split screen multiplayer
-- Add color schemes into the game (ex : Catppuccin, Dracula, Terminal, etc)
-- final bosses (large vertical level that scrolls down faster and faster)
-- add loop run where user levels can't be used in further loops (boring)
-- add lab mode where you need to make three builds (complex, lots of clicking, not fun)
-
-# Credits
-
-I pulled the background patterns from https://pattern.monster/
-
-I wanted an APK to start in fullscreen and be able to list it on fdroid and the play store. I started with an empty view and went to work trimming it down, with the help of that tutorial : https://github.com/fractalwrench/ApkGolf/blob/master/blog/BLOG_POST.md
-
-Colin (obigre) brought a lot of fantastic ideas to the game, here's his website (in French) : https://colin-crapahute.bearblog.dev/
-
-# How to install
-
-Breakout 71 can be installed and work offline in many ways:
-
-- Download an index.html file from [itch.io](https://renanlecaro.itch.io/breakout71) to play offline on your computer (latest version always)
-- Download the latest apk from [itch.io](https://renanlecaro.itch.io/breakout71) to play offline on your android phone (latest version always)
-- Add [the app](https://breakout.lecaro.me/) to your home screen on android, and it should play even when offline thanks to the service workers (latest version always)
-- Install the latest version from the play store : https://play.google.com/store/apps/details?id=me.lecaro.breakout (updated from time to time)
-- Install the latest version from Fdroid : https://f-droid.org/packages/me.lecaro.breakout/ (updated very rarely because of the updates publication lag)
-- Download the index.html file or apk from my archive server : https://archive.lecaro.me/public-files/b71/ (any version including latests)
-
-# System requirements
-
-The game should perform well even on low-end devices. It's very lean and does not take much storage space (Roughly 0.1MB). The web version is supposed to work on iOS safari, Firefox ESR and chrome, on desktop and mobile.
-If the app stutters, turn on "fast mode" in the settings to render a simplified view that should be faster. You can adjust many aspects of the game there, go have a look !
-
\ No newline at end of file
+I stated with an empty view and went to work trimming it down, with the help of that tutorial
+https://github.com/fractalwrench/ApkGolf/blob/master/blog/BLOG_POST.md
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index a3d8da6..41b7697 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -1,27 +1,9 @@
-import java.util.Properties
-import java.io.FileInputStream
-
plugins {
alias(libs.plugins.androidApplication)
alias(libs.plugins.jetbrainsKotlinAndroid)
}
-
-val keystorePropertiesFile = rootProject.file("keystore.properties")
-val keystoreProperties = Properties()
-keystoreProperties.load(FileInputStream(keystorePropertiesFile))
-
-
android {
- signingConfigs {
- create("release") {
- keyAlias = keystoreProperties["keyAlias"] as String
- keyPassword = keystoreProperties["keyPassword"] as String
- storeFile = file(keystoreProperties["storeFile"] as String)
- storePassword = keystoreProperties["storePassword"] as String
- }
- }
-
namespace = "me.lecaro.breakout"
compileSdk = 34
@@ -29,8 +11,8 @@ android {
applicationId = "me.lecaro.breakout"
minSdk = 21
targetSdk = 34
- versionCode = 29106110
- versionName = "29106110"
+ versionCode = 28996651
+ versionName = "28996651"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary = true
@@ -45,7 +27,7 @@ android {
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
- signingConfig = signingConfigs.getByName("release")
+ signingConfig = signingConfigs.getByName("debug")
}
}
compileOptions {
@@ -67,6 +49,22 @@ android {
}
}
}
-dependencies {
- implementation(libs.androidx.core)
-}
+
+//dependencies {
+//
+// implementation(libs.androidx.core.ktx)
+// implementation(libs.androidx.lifecycle.runtime.ktx)
+// implementation(libs.androidx.activity.compose)
+// implementation(platform(libs.androidx.compose.bom))
+// implementation(libs.androidx.ui)
+// implementation(libs.androidx.ui.graphics)
+// implementation(libs.androidx.ui.tooling.preview)
+// implementation(libs.androidx.material3)
+// testImplementation(libs.junit)
+// androidTestImplementation(libs.androidx.junit)
+// androidTestImplementation(libs.androidx.espresso.core)
+// androidTestImplementation(platform(libs.androidx.compose.bom))
+// androidTestImplementation(libs.androidx.ui.test.junit4)
+// debugImplementation(libs.androidx.ui.tooling)
+// debugImplementation(libs.androidx.ui.test.manifest)
+//}
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 7e787ff..2700098 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -1,8 +1,8 @@
' + t + '
').join('\n'), repeats, choices, + }; +} + +async function openUpgradesPicker() { + let {text, repeats, choices} = getLevelStats(); + scoreStory.push(`Finished level ${currentLevel + 1} (${currentLevelInfo().name}): ${text}`,); + + while (repeats--) { + const actions = pickRandomUpgrades(choices); + if (!actions.length) break + let textAfterButtons; + if (actions.length < choices) { + textAfterButtons = `You are running out of upgrades, more will be unlocked when you catch lots of coins.
` + } + const cb = await asyncAlert({ + title: "Pick an upgrade " + (repeats ? "(" + (repeats + 1) + ")" : ""), actions, text, allowClose: false, + textAfterButtons + }); + cb(); + } + resetCombo(); + resetBalls(); +} + +function setLevel(l) { + pause() + if (l > 0) { + openUpgradesPicker().then(); + } + currentLevel = l; + + levelTime = 0; + lastTickDown = levelTime; + levelStartScore = score; + levelSpawnedCoins = 0; + levelMisses = 0; + + resetCombo(); + recomputeTargetBaseSpeed(); + resetBalls(); + + const lvl = currentLevelInfo(); + if (lvl.size !== gridSize) { + gridSize = lvl.size; + fitSize(); + } + incrementRunStatistics('lvl_size_' + lvl.size, 1) + incrementRunStatistics('lvl_name_' + lvl.name, 1) + coins = []; + bricks = [...lvl.bricks]; + flashes = []; + + background.src = 'data:image/svg+xml;base64,' + btoa(lvl.svg) + +} + +function currentLevelInfo() { + return runLevels[currentLevel % runLevels.length]; +} + +function reset_perks() { + + for (let u of upgrades) { + perks[u.id] = 0; + } + + if (nextRunOverrides.perks) { + const first = Object.keys(nextRunOverrides.perks)[0] + Object.assign(perks, nextRunOverrides.perks) + nextRunOverrides.perks = null + return first + } + + const giftable = getPossibleUpgrades().filter(u => u.giftable) + const randomGift = isSettingOn('easy') ? 'slow_down' : giftable[Math.floor(Math.random() * giftable.length)].id; + perks[randomGift] = 1; + // TODO + // perks.puck_repulse_ball=3 + // perks.ball_repulse_ball=3 + // perks.ball_attract_ball=3 + // perks.multiball=3 + + return randomGift +} + +const upgrades = [ + { + "threshold": 0, + "id": "extra_life", + "name": "+1 life", + "max": 3, + "help": "Survive dropping the ball once." + }, + { + "threshold": 0, + "id": "streak_shots", + "giftable": true, + "name": "Single puck hit streak", + "max": 1, + "help": "Break many bricks at once." + }, + + { + "threshold": 0, + "id": "base_combo", + "giftable": true, + "name": "+3 base combo", + "max": 3, + "help": "Your combo starts 3 points higher." + }, + { + "threshold": 0, + "id": "slow_down", + "name": "Slower ball", + "max": 2, + "help": "Slows down the ball." + }, + { + "threshold": 0, + "id": "bigger_puck", + "name": "Bigger puck", + "max": 2, + "help": "Catches more coins." + }, + { + "threshold": 50, + "id": "viscosity", + "name": "Slower coins fall", + "max": 3, + "help": "Coins quickly decelerate." + }, + { + "threshold": 100, + "id": "sides_are_lava", + "giftable": true, + "name": "Shoot straight", + "max": 1, + "help": "Avoid the sides for more coins." + }, + { + "threshold": 200, + "id": "telekinesis", + "giftable": true, + "name": "Puck controls ball", + "max": 2, + "help": "Control the ball's trajectory." + }, + { + "threshold": 400, + "id": "top_is_lava", + "giftable": true, + "name": "Sky is the limit", + "max": 1, + "help": "Avoid the top for more coins." + }, + { + "threshold": 800, + "id": "coin_magnet", + "name": "Puck attracts coins", + "max": 3, + "help": "Coins falling are drawn toward the puck." + }, + { + "threshold": 1600, + "id": "skip_last", + "name": "Last brick breaks", + "max": 3, + "help": "The last brick will self-destruct." + }, + { + "threshold": 3200, + "id": "multiball", + "giftable": true, + "name": "+1 ball", + "max": 3, + "help": "Start each level with one more balls." + }, + { + "threshold": 5600, + "id": "smaller_puck", + "name": "Smaller puck", + "max": 2, + "help": "Gives you more control." + }, + { + "threshold": 7000, + "id": "pierce", + "giftable": true, + "name": "Ball pierces bricks", + "max": 3, + "help": "Go through 3 blocks before bouncing." + }, + { + "threshold": 12000, + "id": "picky_eater", + "giftable": true, + "name": "Single color streak", + "color_blind_exclude": true, + "max": 1, + "help": "Hit groups of bricks of the same color." + }, + { + "threshold": 16000, + "id": "metamorphosis", + "name": "Coins stain bricks", + "color_blind_exclude": true, + "max": 1, + "help": "Coins color the bricks they touch." + }, + { + "threshold": 22000, + "id": "catch_all_coins", + "giftable": true, + "name": "Compound interest", + "max": 3, + "help": "Catch all coins with your puck for even more coins." + }, + { + "threshold": 26000, + "id": "hot_start", + "giftable": true, + "name": "Hot start", + "max": 3, + "help": "Clear the level quickly for more coins." + }, + { + "threshold": 33000, + "id": "sapper", + "giftable": true, + "name": "Bricks become bombs", + "max": 1, + "help": "Broken blocks are replaced by bombs." + }, + { + "threshold": 42000, + "id": "bigger_explosions", + "name": "Bigger explosions", + "max": 1, + "help": "All bombs have larger area of effect." + }, + { + "threshold": 54000, + "id": "extra_levels", + "name": "+1 level", + "max": 3, + "help": "Play one more level before game over." + }, + { + "threshold": 65000, + "id": "pierce_color", + "name": "Color pierce", + "color_blind_exclude": true, + "max": 1, + "help": "Colored ball pierces bricks of the same color." + }, + { + "threshold": 760000, + "id": "soft_reset", + "name": "Soft reset", + "max": 2, + "help": "Only loose half your combo when it resets." + }, + { + "threshold": 87000, + "id": "ball_repulse_ball", + "name": "Balls repulse balls", + requires:'multiball', + "max": 3, + "help": "Only has an effect with 2+ balls." + }, + { + "threshold": 98000, + "id": "ball_attract_ball", + requires:'multiball', + "name": "Balls attract balls", + "max": 3, + "help": "Only has an effect with 2+ balls." + }, + { + "threshold": 120000, + "id": "puck_repulse_ball", + "name": "Puck repulse balls", + "max": 3, + "help": "Prevents the puck from touching the balls." + }, +] + + +function getPossibleUpgrades() { + const ts = getTotalScore() + return upgrades + .filter(u => !(isSettingOn('color_blind') && u.color_blind_exclude)) + .filter(u => ts>=u.threshold) + .filter(u => !u.requires || perks[u.requires]) +} + + +function shuffleLevels(nameToAvoid = null) { + const ts = getTotalScore(); + runLevels = allLevels + .filter(l => nextRunOverrides.level ? l.name === nextRunOverrides.level : true) + .filter((l, li) => ts >= l.threshold) + .filter(l => l.name !== nameToAvoid || allLevels.length === 1) + .sort(() => Math.random() - 0.5) + .slice(0, 7 + 3) + .sort((a, b) => a.bricks.filter(i => i).length - b.bricks.filter(i => i).length); + + nextRunOverrides.level = null +} + +function getUpgraderUnlockPoints() { + let list = [] + + upgrades + .filter(u => !(isSettingOn('color_blind') && u.color_blind_exclude)) + .forEach(u => { + if (u.threshold) { + list.push({ + threshold: u.threshold, + title: u.name + ' (Perk)', + help: u.help, + }) + } + }) + + allLevels.forEach((l, li) => { + list.push({ + threshold: l.threshold, + title: l.name + ' (Level)', + }) + }) + + return list.filter(o => o.threshold).sort((a, b) => a.threshold - b.threshold) +} + + +let lastOffered={} +function pickRandomUpgrades(count) { + + let list = getPossibleUpgrades() + .map(u=>({...u, score:Math.random() + (lastOffered[u.id]||0) })) + .sort((a,b) => a.score-b.score) + .filter(u => perks[u.id] < u.max) + .slice(0, count) + .sort((a, b) => a.id > b.id ? 1 : -1) + .map(u => { + incrementRunStatistics('offered_upgrade.' + u.id, 1) + return { + key: u.id, text: u.name, value: () => { + perks[u.id]++; + incrementRunStatistics('picked_upgrade.' + u.id, 1) + scoreStory.push("Picked upgrade : " + u.name); + }, help: u.help, max: u.max, + checked: perks[u.id], + } + }) + + + list.forEach(u=> { + lastOffered[u.key] = Math.round(Date.now()/1000) + }) + + return list; +} + +let nextRunOverrides = {level: null, perks: null} +let hadOverrides = false + +function restart() { + console.log("restart") + hadOverrides = !!(nextRunOverrides.level || nextRunOverrides.perks) + // When restarting, we want to avoid restarting with the same level we're on, so we exclude from the next + // run's level list + shuffleLevels(levelTime || score ? currentLevelInfo().name : null); + resetRunStatistics() + score = 0; + scoreStory = []; + if (hadOverrides) { + scoreStory.push(`This is a test run, started from the unlocks menu. It stops after one level and is not recorded in the stats. `) + } + const randomGift = reset_perks(); + + incrementRunStatistics('starting_upgrade.' + randomGift, 1) + + setLevel(0); + scoreStory.push(`You started playing with the upgrade "${upgrades.find(u => u.id === randomGift)?.name}" on the level "${runLevels[0].name}". `,); +} + +function setMousePos(x) { + + needsRender = true; + puck = x; + + if (offsetX > ballSize) { + // We have borders visible, enforce them + if (puck < offsetX + puckWidth / 2) { + puck = offsetX + puckWidth / 2; + } + if (puck > offsetX + gameZoneWidth - puckWidth / 2) { + puck = offsetX + gameZoneWidth - puckWidth / 2; + } + } else { + // Let puck touch the border of the screen + if (puck < puckWidth / 2) { + puck = puckWidth / 2; + } + if (puck > offsetX * 2 + gameZoneWidth - puckWidth / 2) { + puck = offsetX * 2 + gameZoneWidth - puckWidth / 2; + } + } + if (!running && !levelTime) { + putBallsAtPuck(); + } +} + +canvas.addEventListener("mouseup", (e) => { + if (e.button !== 0) return; + if (running) { + pause() + } else { + play() + } +}); + +canvas.addEventListener("mousemove", (e) => { + setMousePos(e.x); +}); + +canvas.addEventListener("touchstart", (e) => { + e.preventDefault(); + if (!e.touches?.length) return; + setMousePos(e.touches[0].pageX); + play() +}); +canvas.addEventListener("touchend", (e) => { + e.preventDefault(); + pause() +}); +canvas.addEventListener("touchcancel", (e) => { + e.preventDefault(); + pause() + needsRender = true +}); +canvas.addEventListener("touchmove", (e) => { + if (!e.touches?.length) return; + setMousePos(e.touches[0].pageX); +}); + +let lastTick = performance.now(); + +function brickIndex(x, y) { + return getRowColIndex(Math.floor(y / brickWidth), Math.floor((x - offsetX) / brickWidth),); +} + +function hasBrick(index) { + if (bricks[index]) return index; +} + +function hitsSomething(x, y, radius) { + return (hasBrick(brickIndex(x - radius, y - radius)) ?? hasBrick(brickIndex(x + radius, y - radius)) ?? hasBrick(brickIndex(x + radius, y + radius)) ?? hasBrick(brickIndex(x - radius, y + radius))); +} + +function shouldPierceByColor(ballOrCoin, vhit, hhit, chit) { + if (!perks.pierce_color) return false + // if (ballOrCoin.color === 'white') return true + if (typeof vhit !== 'undefined' && bricks[vhit] !== ballOrCoin.color) { + return false + } + if (typeof hhit !== 'undefined' && bricks[hhit] !== ballOrCoin.color) { + return false + } + if (typeof chit !== 'undefined' && bricks[chit] !== ballOrCoin.color) { + return false + } + return true +} + +function brickHitCheck(ballOrCoin, radius, isBall) { + // Make ball/coin bonce, and return bricks that were hit + const {x, y, previousx, previousy, hitSinceBounce} = ballOrCoin; + + const vhit = hitsSomething(previousx, y, radius); + const hhit = hitsSomething(x, previousy, radius); + const chit = (typeof vhit == "undefined" && typeof hhit == "undefined" && hitsSomething(x, y, radius)) || undefined; + + + let pierce = isBall && ballOrCoin.piercedSinceBounce < perks.pierce * 3; + if (pierce && (typeof vhit !== "undefined" || typeof hhit !== "undefined" || typeof chit !== "undefined")) { + ballOrCoin.piercedSinceBounce++ + } + if (isBall && shouldPierceByColor(ballOrCoin, vhit, hhit, chit)) { + pierce = true + } + + + if (typeof vhit !== "undefined" || typeof chit !== "undefined") { + if (!pierce) { + ballOrCoin.y = ballOrCoin.previousy; + ballOrCoin.vy *= -1; + } + + if (!isBall) { + // Roll on corners + const leftHit = bricks[brickIndex(x - radius, y + radius)]; + const rightHit = bricks[brickIndex(x + radius, y + radius)]; + + if (leftHit && !rightHit) { + ballOrCoin.vx += 1; + } + if (!leftHit && rightHit) { + ballOrCoin.vx -= 1; + } + } + } + if (typeof hhit !== "undefined" || typeof chit !== "undefined") { + if (!pierce) { + ballOrCoin.x = ballOrCoin.previousx; + ballOrCoin.vx *= -1; + } + } + + return vhit ?? hhit ?? chit; +} + +function bordersHitCheck(coin, radius, delta) { + if (coin.destroyed) return; + coin.previousx = coin.x; + coin.previousy = coin.y; + coin.x += coin.vx * delta; + coin.y += coin.vy * delta; + coin.sx ||= 0; + coin.sy ||= 0; + coin.sx += coin.previousx - coin.x; + coin.sy += coin.previousy - coin.y; + coin.sx *= 0.9; + coin.sy *= 0.9; + + let vhit = 0, hhit = 0; + + + if (coin.x < (offsetX > ballSize ? offsetX : 0) + radius) { + coin.x = offsetX + radius; + coin.vx *= -1; + hhit = 1; + } + if (coin.y < radius) { + coin.y = radius; + coin.vy *= -1; + vhit = 1; + } + if (coin.x > canvas.width - (offsetX > ballSize ? offsetX : 0) - radius) { + coin.x = canvas.width - offsetX - radius; + coin.vx *= -1; + hhit = 1; + } + + return hhit + vhit * 2; +} + +let lastTickDown = 0; + +function tick() { + + recomputeTargetBaseSpeed(); + const currentTick = performance.now(); + + puckWidth = (gameZoneWidth / 12) * (3 - perks.smaller_puck + perks.bigger_puck); + + if (running) { + + levelTime += currentTick - lastTick; + // How many time to compute + let delta = Math.min(4, (currentTick - lastTick) / (1000 / 60)); + delta *= running ? 1 : 0 + + + coins = coins.filter((coin) => !coin.destroyed); + balls = balls.filter((ball) => !ball.destroyed); + + const remainingBricks = bricks.filter((b) => b && b !== "black").length; + + if (levelTime > lastTickDown + 1000 && perks.hot_start) { + lastTickDown = levelTime; + decreaseCombo(perks.hot_start, puck, gameZoneHeight - 2 * puckHeight); + } + + if (remainingBricks < perks.skip_last) { + bricks.forEach((type, index) => { + if (type) { + explodeBrick(index, balls[0], true); + } + }); + } + if (!remainingBricks && !coins.length) { + incrementRunStatistics('level_time', levelTime) + + if (currentLevel + 1 < max_levels()) { + setLevel(currentLevel + 1); + } else { + gameOver("Run finished with " + score + " points", "You cleared all levels for this run."); + } + } else if (running || levelTime) { + let playedCoinBounce = false; + const coinRadius = Math.round(coinSize / 2); + + + coins.forEach((coin) => { + if (coin.destroyed) return; + if (perks.coin_magnet) { + coin.vx += ((delta * (puck - coin.x)) / (100 + Math.pow(coin.y - gameZoneHeight, 2) + Math.pow(coin.x - puck, 2))) * perks.coin_magnet * 100; + } + + const ratio = 1 - (perks.viscosity * 0.03 + 0.005) * delta; + + coin.vy *= ratio; + coin.vx *= ratio; + + // Gravity + coin.vy += delta * coin.weight * 0.8; + + const speed = Math.abs(coin.sx) + Math.abs(coin.sx); + const hitBorder = bordersHitCheck(coin, coinRadius, delta); + + if (coin.y > gameZoneHeight - coinRadius - puckHeight && coin.y < gameZoneHeight + puckHeight + coin.vy && Math.abs(coin.x - puck) < coinRadius + puckWidth / 2 + // a bit of margin to be nice + puckHeight) { + addToScore(coin); + + } else if (coin.y > canvas.height + coinRadius) { + coin.destroyed = true; + if (perks.catch_all_coins) { + decreaseCombo(coin.points * perks.catch_all_coins, coin.x, canvas.height - coinRadius); + } + } + + const hitBrick = brickHitCheck(coin, coinRadius, false); + + if (perks.metamorphosis && typeof hitBrick !== "undefined") { + if (bricks[hitBrick] && coin.color !== bricks[hitBrick] && bricks[hitBrick] !== "black" && !coin.coloredABrick) { + bricks[hitBrick] = coin.color; + coin.coloredABrick = true + } + } + if (typeof hitBrick !== "undefined" || hitBorder) { + coin.vx *= 0.8; + coin.vy *= 0.8; + + if (speed > 20 && !playedCoinBounce) { + playedCoinBounce = true; + sounds.coinBounce(coin.x, 0.2); + } + + if (Math.abs(coin.vy) < 3) { + coin.vy = 0; + } + } + }); + + balls.forEach((ball) => ballTick(ball, delta)); + + flashes.forEach((flash) => { + if (flash.type === "particle") { + flash.x += flash.vx * delta; + flash.y += flash.vy * delta; + if (!flash.ethereal) { + flash.vy += 0.5; + if (hasBrick(brickIndex(flash.x, flash.y))) { + flash.destroyed = true; + } + } + } + }); + } + } + + render(); + + requestAnimationFrame(tick); + lastTick = currentTick; +} + +function isTelekinesisActive(ball) { + return perks.telekinesis && !ball.hitSinceBounce && ball.vy < 0; +} + +function ballTick(ball, delta) { + ball.previousvx = ball.vx; + ball.previousvy = ball.vy; + + if (isTelekinesisActive(ball)) { + ball.vx += ((puck - ball.x) / 1000) * delta * perks.telekinesis; + } + + const speedLimitDampener = 1 + perks.telekinesis + perks.ball_repulse_ball + perks.puck_repulse_ball + perks.ball_attract_ball + if (ball.vx * ball.vx + ball.vy * ball.vy < baseSpeed * baseSpeed * 2) { + ball.vx *= (1 + .02 / speedLimitDampener); + ball.vy *= (1 + .02 / speedLimitDampener); + } else { + ball.vx *= (1 - .02 / speedLimitDampener); + ; + if (Math.abs(ball.vy) > 0.5 * baseSpeed) { + ball.vy *= (1 - .02 / speedLimitDampener); + ; + } + } + + if (perks.ball_repulse_ball) { + for (b2 of balls) { + // avoid computing this twice, and repulsing itself + if (b2.x >= ball.x) continue + repulse(ball, b2, perks.ball_repulse_ball, true) + } + } + if (perks.ball_attract_ball) { + for (b2 of balls) { + // avoid computing this twice, and repulsing itself + if (b2.x >= ball.x) continue + attract(ball, b2, 2 * perks.ball_attract_ball) + } + } + if (perks.puck_repulse_ball) { + repulse(ball, { + x: puck, + y: gameZoneHeight, + color: currentLevelInfo().black_puck ? '#000' : '#FFF', + }, perks.puck_repulse_ball, false) + } + + + const borderHitCode = bordersHitCheck(ball, ballSize / 2, delta); + if (borderHitCode) { + if (perks.sides_are_lava && borderHitCode % 2) { + resetCombo(ball.x, ball.y); + } + if (perks.top_is_lava && borderHitCode >= 2) { + resetCombo(ball.x, ball.y + ballSize); + } + sounds.wallBeep(ball.x); + ball.bouncesList?.push({x: ball.previousx, y: ball.previousy}) + } + + // Puck collision + const ylimit = gameZoneHeight - puckHeight - ballSize / 2; + if (ball.y > ylimit && Math.abs(ball.x - puck) < ballSize / 2 + puckWidth / 2 && ball.vy > 0) { + const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy); + const angle = Math.atan2(-puckWidth / 2, ball.x - puck); + ball.vx = speed * Math.cos(angle); + ball.vy = speed * Math.sin(angle); + + sounds.wallBeep(ball.x); + if (perks.streak_shots) { + resetCombo(ball.x, ball.y); + } + if (!ball.hitSinceBounce) { + incrementRunStatistics('miss') + levelMisses++; + flashes.push({ + type: "text", + text: 'miss', + time: levelTime, + color: ball.color, + x: ball.x, + y: ball.y - ballSize, + duration: 450, + size: puckHeight, + }) + if (ball.bouncesList?.length) { + ball.bouncesList.push({ + x: ball.previousx, + y: ball.previousy + }) + for (si = 0; si < ball.bouncesList.length - 1; si++) { + // segement + const start = ball.bouncesList[si] + const end = ball.bouncesList[si + 1] + const distance = distanceBetween(start, end) + + const parts = distance / 30 + for (var i = 0; i < parts; i++) { + flashes.push({ + type: "particle", + duration: 200, + ethereal: true, + time: levelTime, + size: coinSize / 2, + color: ball.color, + x: start.x + (i / (parts - 1)) * (end.x - start.x), + y: start.y + (i / (parts - 1)) * (end.y - start.y), + vx: (Math.random() - 0.5) * baseSpeed, + vy: (Math.random() - 0.5) * baseSpeed, + }); + } + } + } + + } + incrementRunStatistics('puck_bounces') + ball.hitSinceBounce = 0; + ball.piercedSinceBounce = 0; + ball.bouncesList = [{ + x: ball.previousx, + y: ball.previousy + }] + } + + if (ball.y > gameZoneHeight + ballSize / 2 && running) { + ball.destroyed = true; + if (!balls.find((b) => !b.destroyed)) { + if (perks.extra_life) { + perks.extra_life--; + resetBalls(); + sounds.revive(); + pause() + coins = []; + flashes.push({ + type: "ball", + duration: 500, + time: levelTime, + size: brickWidth * 2, + color: "white", + x: ball.x, + y: ball.y, + }); + } else { + gameOver("Game Over", "You dropped the ball after catching " + score + " coins. "); + } + } + } + const hitBrick = brickHitCheck(ball, ballSize / 2, true); + if (typeof hitBrick !== "undefined") { + const wasABomb = bricks[hitBrick] === "black"; + explodeBrick(hitBrick, ball, false); + + if (perks.sapper && !wasABomb) { + bricks[hitBrick] = "black"; + } + } + + if (!isSettingOn("basic")) { + ball.sparks += (delta * (combo - 1)) / 30; + if (ball.sparks > 1) { + flashes.push({ + type: "particle", + duration: 100 * ball.sparks, + time: levelTime, + size: coinSize / 2, + color: ball.color, + x: ball.x, + y: ball.y, + vx: (Math.random() - 0.5) * baseSpeed, + vy: (Math.random() - 0.5) * baseSpeed, + }); + ball.sparks = 0; + } + } +} + + +let runStatistics = {}; + +function resetRunStatistics() { + runStatistics = { + started: Date.now(), + ended: null, + hadOverrides, + width: window.innerWidth, + height: window.innerHeight, + easy: isSettingOn('easy'), + color_blind: isSettingOn('color_blind'), + } +} + + +function incrementRunStatistics(key, amount = 1) { + runStatistics[key + '_total'] = (runStatistics[key + '_total'] || 0) + amount + runStatistics[key + '_lvl_' + currentLevel] = (runStatistics[key + '_lvl_' + currentLevel] || 0) + amount +} + +function getTotalScore() { + try { + return JSON.parse(localStorage.getItem('breakout_71_total_score') || '0') + } catch (e) { + return 0 + } +} + +function addToTotalScore(points) { + if (hadOverrides) return + try { + localStorage.setItem('breakout_71_total_score', JSON.stringify(getTotalScore() + points)) + } catch (e) { + } +} + +function gameOver(title, intro) { + if (!running) return; + pause() + + runStatistics.ended = Date.now() + + const {stats} = getLevelStats(); + + scoreStory.push(`During level ${currentLevel + 1} ${stats}`); + if (balls.find((b) => !b.destroyed)) { + scoreStory.push(`You cleared the last level and won. `); + } else { + scoreStory.push(`You dropped the ball and finished your run early. `); + } + + try { + // Stores only last 100 runs + const runsHistory = JSON.parse(localStorage.getItem('breakout_71_history') || '[]').slice(0, 99).concat([runStatistics]) + + // Generate some histogram + + localStorage.setItem('breakout_71_history', '' + JSON.stringify(runsHistory, null, 2) + '') + } catch { + } + + let animationDelay = -300 + const getDelay = () => { + animationDelay += 800 + return 'animation-delay:' + animationDelay + 'ms;' + } + // unlocks + let unlocksInfo = '' + const endTs = getTotalScore() + const startTs = endTs - score + const list = getUpgraderUnlockPoints() + list.filter(u => u.threshold > startTs && u.threshold < endTs).forEach(u => { + unlocksInfo += ` +
+ ${u.title} + +
+` + }) + + const previousUnlockAt = list.findLast(u => u.threshold <= endTs)?.threshold || 0 + const nextUnlock = list.find(u => u.threshold > endTs) + + if (nextUnlock) { + const total = nextUnlock?.threshold - previousUnlockAt + const done = endTs - previousUnlockAt + intro += `Score ${nextUnlock.threshold - endTs} more points to reach the next unlock.` + + const scaleX = (done / total).toFixed(2) + unlocksInfo += ` ++ ${nextUnlock.title} + +
+ +` + list.slice(list.indexOf(nextUnlock) + 1).slice(0, 3).forEach(u => { + unlocksInfo += ` ++ ${u.title} +
+` + }) + } + + // Avoid the sad sound right as we restart a new games + combo = 1 + asyncAlert({ + allowClose: true, title, text: ` +${intro}
+ ${unlocksInfo} + `, textAfterButtons: ` + + ${scoreStory.map((t) => "" + t + "
").join("")} + ` + }).then(() => restart()); +} + +function explodeBrick(index, ball, isExplosion) { + const color = bricks[index]; + if (color === 'black') { + delete bricks[index]; + const x = brickCenterX(index), y = brickCenterY(index); + + incrementRunStatistics('explosion', 1) + sounds.explode(ball.x); + const {col, row} = getRowCol(index); + const size = 1 + perks.bigger_explosions; + // Break bricks around + for (let dx = -size; dx <= size; dx++) { + for (let dy = -size; dy <= size; dy++) { + const i = getRowColIndex(row + dy, col + dx); + if (bricks[i] && i !== -1) { + explodeBrick(i, ball, true) + } + } + } + // Blow nearby coins + coins.forEach((c) => { + const dx = c.x - x; + const dy = c.y - y; + const d2 = Math.max(brickWidth, Math.abs(dx) + Math.abs(dy)); + c.vx += (dx / d2) * 10 * size / c.weight; + c.vy += (dy / d2) * 10 * size / c.weight; + }); + lastexplosion = Date.now(); + + flashes.push({ + type: "ball", duration: 150, time: levelTime, size: brickWidth * 2, color: "white", x, y, + }); + spawnExplosion(7 * (1 + perks.bigger_explosions), x, y, "white", 150, coinSize,); + ball.hitSinceBounce++; + } else if (color) { + // Flashing is take care of by the tick loop + const x = brickCenterX(index), y = brickCenterY(index); + + bricks[index] = ""; + + levelSpawnedCoins += combo; + + incrementRunStatistics('spawned_coins', combo) + + coins = coins.filter((c) => !c.destroyed); + for (let i = 0; i < combo; i++) { + // Avoids saturating the canvas with coins + if (coins.length > MAX_COINS * (isSettingOn("basic") ? 0.5 : 1)) { + // Just pick a random one + coins[Math.floor(Math.random() * coins.length)].points++; + continue; + } + + const coord = { + x: x + (Math.random() - 0.5) * (brickWidth - coinSize), + y: y + (Math.random() - 0.5) * (brickWidth - coinSize), + }; + + coins.push({ + points: 1, + color, ...coord, + previousx: coord.x, + previousy: coord.y, + vx: ball.vx * (0.5 + Math.random()), + vy: ball.vy * (0.5 + Math.random()), + sx: 0, + sy: 0, + weight: 0.8 + Math.random() * 0.2 + }); + } + + combo += perks.streak_shots + perks.catch_all_coins + perks.sides_are_lava + perks.top_is_lava + perks.picky_eater; + + if (!isExplosion) { + // color change + if ((perks.picky_eater || perks.pierce_color) && color !== ball.color) { + // reset streak + if (perks.picky_eater) resetCombo(ball.x, ball.y); + ball.color = color; + } else { + sounds.comboIncreaseMaybe(ball.x, 1); + } + } + ball.hitSinceBounce++; + + flashes.push({ + type: "ball", duration: 40, time: levelTime, size: brickWidth, color: color, x, y, + }); + spawnExplosion(5 + combo, x, y, color, 100, coinSize / 2); + } +} + +function max_levels() { + if (hadOverrides) return 1 + return 7 + perks.extra_levels; +} + +function render() { + if (running) needsRender = true + if (!needsRender) { + return + } + needsRender = false; + + const level = currentLevelInfo(); + const {width, height} = canvas; + if (!width || !height) return; + + let scoreInfo = ""; + for (let i = 0; i < perks.extra_life; i++) { + scoreInfo += "🖤 "; + } + + scoreInfo += score.toString(); + scoreDisplay.innerText = scoreInfo; + + + if (!isSettingOn("basic") && !level.color && level.svg && !level.black_puck) { + + ctx.globalCompositeOperation = "source-over"; + ctx.globalAlpha = 0.7 + ctx.fillStyle = "#000"; + ctx.fillRect(0, 0, width, height); + + ctx.globalCompositeOperation = "multiply"; + ctx.globalAlpha = 0.3; + const gradient = ctx.createLinearGradient(offsetX, gameZoneHeight - puckHeight, offsetX, height - puckHeight * 3,); + gradient.addColorStop(0, "black"); + gradient.addColorStop(1, "transparent"); + ctx.fillStyle = gradient; + ctx.fillRect(offsetX, gameZoneHeight - puckHeight * 3, gameZoneWidth, puckHeight * 4,); + + ctx.globalCompositeOperation = "screen"; + ctx.globalAlpha = 0.6; + coins.forEach((coin) => { + if (!coin.destroyed) drawFuzzyBall(ctx, coin.color, coinSize * 2, coin.x, coin.y); + }); + balls.forEach((ball) => { + drawFuzzyBall(ctx, ball.color, ballSize * 2, ball.x, ball.y); + }); + ctx.globalAlpha = 0.5; + bricks.forEach((color, index) => { + if (!color) return; + const x = brickCenterX(index), y = brickCenterY(index); + drawFuzzyBall(ctx, color == 'black' ? '#666' : color, brickWidth, x, y); + }); + ctx.globalAlpha = 1; + flashes.forEach((flash) => { + const {x, y, time, color, size, type, duration} = flash; + const elapsed = levelTime - time; + ctx.globalAlpha = Math.min(1, 2 - (elapsed / duration) * 2); + if (type === "ball") { + drawFuzzyBall(ctx, color, size, x, y); + } + if (type === "particle") { + drawFuzzyBall(ctx, color, size * 3, x, y); + } + + }); + + ctx.globalAlpha = 0.9; + ctx.globalCompositeOperation = "multiply"; + if (level.svg && background.complete) { + if (backgroundCanvas.title !== level.name) { + backgroundCanvas.title = level.name + backgroundCanvas.width = canvas.width + backgroundCanvas.height = canvas.height + const bgctx = backgroundCanvas.getContext("2d") + bgctx.fillStyle = level.color + bgctx.fillRect(0, 0, canvas.width, canvas.height) + bgctx.fillStyle = ctx.createPattern(background, "repeat"); + bgctx.fillRect(0, 0, width, height); + console.log("redrew context") + } + ctx.drawImage(backgroundCanvas, 0, 0) + + + } + } else { + + ctx.globalCompositeOperation = "source-over"; + ctx.globalAlpha = 1 + ctx.fillStyle = level.color || "#000"; + ctx.fillRect(0, 0, width, height); + + flashes.forEach((flash) => { + const {x, y, time, color, size, type, duration} = flash; + const elapsed = levelTime - time; + ctx.globalAlpha = Math.min(1, 2 - (elapsed / duration) * 2); + if (type === "particle") { + drawBall(ctx, color, size, x, y); + } + }); + } + + if (combo > baseCombo()) { + // The red should still be visible on a white bg + ctx.globalCompositeOperation = !level.color && level.svg ? "screen" : 'source-over'; + ctx.globalAlpha = (2 + combo - baseCombo()) / 50; + + if (perks.top_is_lava) { + drawRedGradientSquare(ctx, offsetX, 0, gameZoneWidth, ballSize, 0, 0, 0, ballSize,); + } + if (perks.sides_are_lava) { + drawRedGradientSquare(ctx, offsetX, 0, ballSize, gameZoneHeight, 0, 0, ballSize, 0,); + drawRedGradientSquare(ctx, offsetX + gameZoneWidth - ballSize, 0, ballSize, gameZoneHeight, ballSize, 0, 0, 0,); + } + if (perks.catch_all_coins) { + drawRedGradientSquare(ctx, offsetX, gameZoneHeight - ballSize, gameZoneWidth, ballSize, 0, ballSize, 0, 0,); + } + if (perks.streak_shots) { + drawRedGradientSquare(ctx, puck - puckWidth / 2, gameZoneHeight - puckHeight - ballSize, puckWidth, ballSize, 0, ballSize, 0, 0,); + } + if (perks.picky_eater) { + let okColors = new Set(balls.map((b) => b.color)); + + bricks.forEach((type, index) => { + if (!type || type === "black" || okColors.has(type)) return; + const x = brickCenterX(index), y = brickCenterY(index); + drawFuzzyBall(ctx, "red", brickWidth, x, y); + }); + } + ctx.globalAlpha = 1; + } + + ctx.globalAlpha = 1; + ctx.globalCompositeOperation = "source-over"; + const lastExplosionDelay = Date.now() - lastexplosion + 5; + const shaked = lastExplosionDelay < 200; + if (shaked) { + ctx.translate((Math.sin(Date.now()) * 50) / lastExplosionDelay, (Math.sin(Date.now() + 36) * 50) / lastExplosionDelay,); + } + + ctx.globalCompositeOperation = "source-over"; + renderAllBricks(ctx); + + ctx.globalCompositeOperation = "screen"; + flashes = flashes.filter((f) => levelTime - f.time < f.duration && !f.destroyed,); + + flashes.forEach((flash) => { + const {x, y, time, color, size, type, text, duration, points} = flash; + const elapsed = levelTime - time; + ctx.globalAlpha = Math.max(0, Math.min(1, 2 - (elapsed / duration) * 2)); + if (type === "text") { + ctx.globalCompositeOperation = "source-over"; + drawText(ctx, text, color, size, {x, y: y - elapsed / 10}); + } else if (type === "particle") { + ctx.globalCompositeOperation = "screen"; + drawBall(ctx, color, size, x, y); + drawFuzzyBall(ctx, color, size, x, y); + } + }); + + // Coins + ctx.globalAlpha = 1; + ctx.globalCompositeOperation = "source-over"; + coins.forEach((coin) => { + if (!coin.destroyed) drawCoin(ctx, coin.color, coinSize, coin, level.color || 'black'); + }); + + + // Black shadow around balls + if (coins.length > 10 && !isSettingOn('basic')) { + ctx.globalAlpha = Math.min(0.8, (coins.length - 10) / 50); + balls.forEach((ball) => { + drawBall(ctx, level.color || "#000", ballSize * 6, ball.x, ball.y); + }); + } + + + ctx.globalAlpha = 1 + ctx.globalCompositeOperation = "source-over"; + const puckColor = level.black_puck ? '#000' : '#FFF' + balls.forEach((ball) => { + drawBall(ctx, ball.color, ballSize, ball.x, ball.y); + // effect + if (isTelekinesisActive(ball)) { + ctx.strokeStyle = puckColor; + ctx.beginPath(); + ctx.bezierCurveTo(puck, gameZoneHeight, puck, ball.y, ball.x, ball.y); + ctx.stroke(); + } + }); + // The puck + + ctx.globalAlpha = 1 + ctx.globalCompositeOperation = "source-over"; + drawPuck(ctx, puckColor, puckWidth, puckHeight) + + if (combo > 1) { + + ctx.globalCompositeOperation = "source-over"; + drawText(ctx, "x " + combo, !level.black_puck ? '#000' : '#FFF', puckHeight, { + x: puck, y: gameZoneHeight - puckHeight / 2, + }); + } + // Borders + ctx.fillStyle = puckColor; + ctx.globalCompositeOperation = "source-over"; + if (offsetX > ballSize) { + ctx.fillRect(offsetX, 0, 1, height); + ctx.fillRect(width - offsetX - 1, 0, 1, height); + } + if (isSettingOn("mobile-mode")) { + ctx.fillRect(offsetX, gameZoneHeight, gameZoneWidth, 1); + if (!running) { + drawText(ctx, "Keep pressing here to play", puckColor, puckHeight, { + x: canvas.width / 2, y: gameZoneHeight + (canvas.height - gameZoneHeight) / 2, + }); + } + } + + if (shaked) { + ctx.resetTransform(); + } +} + +let cachedBricksRender = document.createElement("canvas"); +let cachedBricksRenderKey = null; + +function renderAllBricks(destinationCtx) { + ctx.globalAlpha = 1; + + const level = currentLevelInfo(); + + const newKey = gameZoneWidth + "_" + bricks.join("_") + bombSVG.complete; + if (newKey !== cachedBricksRenderKey) { + cachedBricksRenderKey = newKey; + + cachedBricksRender.width = gameZoneWidth; + cachedBricksRender.height = gameZoneWidth + 1; + const ctx = cachedBricksRender.getContext("2d"); + ctx.clearRect(0, 0, gameZoneWidth, gameZoneWidth); + ctx.resetTransform(); + ctx.translate(-offsetX, 0); + // Bricks + bricks.forEach((color, index) => { + const x = brickCenterX(index), y = brickCenterY(index); + + if (!color) return; + drawBrick(ctx, color, x, y, level.squared || false); + if (color === 'black') { + ctx.globalCompositeOperation = "source-over"; + drawIMG(ctx, bombSVG, brickWidth, x, y); + } + }); + } + + destinationCtx.drawImage(cachedBricksRender, offsetX, 0); +} + +let cachedGraphics = {}; + +function drawPuck(ctx, color, puckWidth, puckHeight) { + + const key = "puck" + color + "_" + puckWidth + '_' + puckHeight; + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = puckWidth; + can.height = puckHeight * 2; + const canctx = can.getContext("2d"); + canctx.fillStyle = color; + + + canctx.beginPath(); + canctx.moveTo(0, puckHeight * 2) + canctx.lineTo(0, puckHeight * 1.25) + canctx.bezierCurveTo(0, puckHeight * .75, puckWidth, puckHeight * .75, puckWidth, puckHeight * 1.25) + canctx.lineTo(puckWidth, puckHeight * 2) + canctx.fill(); + cachedGraphics[key] = can; + } + + ctx.drawImage(cachedGraphics[key], Math.round(puck - puckWidth / 2), gameZoneHeight - puckHeight * 2,); + + +} + +function drawBall(ctx, color, width, x, y) { + const key = "ball" + color + "_" + width; + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + const size = Math.round(width); + can.width = size; + can.height = size; + + const canctx = can.getContext("2d"); + canctx.beginPath(); + canctx.arc(size / 2, size / 2, Math.round(size / 2), 0, 2 * Math.PI); + canctx.fillStyle = color; + canctx.fill(); + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], Math.round(x - width / 2), Math.round(y - width / 2),); +} + +function drawCoin(ctx, color, width, ball, bg) { + const key = "coin with halo" + "_" + color + "_" + width + '_' + bg; + + const size = width * 3; + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = size; + can.height = size; + + const canctx = can.getContext("2d"); + + // coin + canctx.beginPath(); + canctx.arc(size / 2, size / 2, width / 2, 0, 2 * Math.PI); + canctx.fillStyle = color; + canctx.fill(); + + canctx.strokeStyle = bg; + canctx.stroke(); + + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], Math.round(ball.x - size / 2), Math.round(ball.y - size / 2),); +} + +function drawFuzzyBall(ctx, color, width, x, y) { + const key = "fuzzy-circle" + color + "_" + width; + + const size = Math.round(width * 3); + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = size; + can.height = size; + + const canctx = can.getContext("2d"); + const gradient = canctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2,); + gradient.addColorStop(0, color); + gradient.addColorStop(1, "transparent"); + canctx.fillStyle = gradient; + canctx.fillRect(0, 0, size, size); + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], Math.round(x - size / 2), Math.round(y - size / 2),); +} + +function drawBrick(ctx, color, x, y, squared) { + const tlx = Math.ceil(x - brickWidth / 2); + const tly = Math.ceil(y - brickWidth / 2); + const brx = Math.ceil(x + brickWidth / 2) - 1; + const bry = Math.ceil(y + brickWidth / 2) - 1; + + const width = brx - tlx, height = bry - tly; + const key = "brick" + color + "_" + width + "_" + height + '_' + squared + // "_" + + // isSettingOn("rounded-bricks"); + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = width; + can.height = height; + const canctx = can.getContext("2d"); + + + if (squared) { + + canctx.fillStyle = color; + canctx.fillRect(0, 0, width, height); + } else { + + const bord = Math.floor(brickWidth / 6); + canctx.strokeStyle = color; + canctx.lineJoin = "round"; + canctx.lineWidth = bord * 1.5; + canctx.strokeRect(bord, bord, width - bord * 2, height - bord * 2); + + canctx.fillStyle = color; + canctx.fillRect(bord, bord, width - bord * 2, height - bord * 2); + } + + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], tlx, tly, width, height); + // It's not easy to have a 1px gap between bricks without antialiasing +} + +function drawRedGradientSquare(ctx, x, y, width, height, redX, redY, blackX, blackY ) { + const key = "gradient" + width + "_" + height + "_" + redX + "_" + redY + "_" + blackX + "_" + blackY ; + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = width; + can.height = height; + const canctx = can.getContext("2d"); + + const gradient = canctx.createLinearGradient(redX, redY, blackX, blackY); + gradient.addColorStop(0, "rgba(255,0,0,1)"); + gradient.addColorStop(1, "rgba(255,0,0,0)"); + canctx.fillStyle = gradient; + canctx.fillRect(0, 0, width, height); + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], x, y, width, height); +} + + +function drawIMG(ctx, img, size, x, y) { + const key = "svg" + img + "_" + size + '_' + img.complete; + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = size; + can.height = size; + + const canctx = can.getContext("2d"); + + const ratio = size / Math.max(img.width, img.height); + const w = img.width * ratio; + const h = img.height * ratio; + canctx.drawImage(img, (size - w) / 2, (size - h) / 2, w, h); + + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], Math.round(x - size / 2), Math.round(y - size / 2),); +} + +function drawText(ctx, text, color, fontSize, {x, y}) { + const key = "text" + text + "_" + color + "_" + fontSize; + + if (!cachedGraphics[key]) { + const can = document.createElement("canvas"); + can.width = fontSize * text.length; + can.height = fontSize; + const canctx = can.getContext("2d"); + canctx.fillStyle = color; + canctx.textAlign = "center"; + canctx.textBaseline = "middle"; + canctx.font = fontSize + "px monospace"; + + canctx.fillText(text, can.width / 2, can.height / 2, can.width); + + cachedGraphics[key] = can; + } + ctx.drawImage(cachedGraphics[key], Math.round(x - cachedGraphics[key].width / 2), Math.round(y - cachedGraphics[key].height / 2),); +} + +function pixelsToPan(pan) { + return (pan - offsetX) / gameZoneWidth; +} + +let lastComboPlayed = NaN, shepard = 6; + +function playShepard(delta, pan, volume) { + const shepardMax = 11, factor = 1.05945594920268, baseNote = 392; + shepard += delta; + if (shepard > shepardMax) shepard = 0; + if (shepard < 0) shepard = shepardMax; + + const play = (note) => { + const freq = baseNote * Math.pow(factor, note); + const diff = Math.abs(note - shepardMax * 0.5); + const maxDistanceToIdeal = 1.5 * shepardMax; + const vol = Math.max(0, volume * (1 - diff / maxDistanceToIdeal)); + createSingleBounceSound(freq, pan, vol); + return freq.toFixed(2) + " at " + Math.floor(vol * 100) + "% diff " + diff; + }; + + play(1 + shepardMax + shepard); + play(shepard); + play(-1 - shepardMax + shepard); +} + +const sounds = { + wallBeep: (pan) => { + if (!isSettingOn("sound")) return; + createSingleBounceSound(800, pixelsToPan(pan)); + }, + + comboIncreaseMaybe: (x, volume) => { + if (!isSettingOn("sound")) return; + let delta = 0; + if (!isNaN(lastComboPlayed)) { + if (lastComboPlayed < combo) delta = 1; + if (lastComboPlayed > combo) delta = -1; + } + playShepard(delta, pixelsToPan(x), volume); + lastComboPlayed = combo; + }, + + comboDecrease() { + if (!isSettingOn("sound")) return; + playShepard(-1, 0.5, 0.5); + }, coinBounce: (pan, volume) => { + if (!isSettingOn("sound")) return; + createSingleBounceSound(1200, pixelsToPan(pan), volume); + }, explode: (pan) => { + if (!isSettingOn("sound")) return; + createExplosionSound(pixelsToPan(pan)); + }, revive: () => { + if (!isSettingOn("sound")) return; + createRevivalSound(500); + }, coinCatch(pan) { + if (!isSettingOn("sound")) return; + createSingleBounceSound(440, pixelsToPan(pan), .8) + } +}; + +// How to play the code on the leftconst context = new window.AudioContext(); +let audioContext, delayNode; + +function getAudioContext() { + if (!audioContext) { + audioContext = new (window.AudioContext || window.webkitAudioContext)(); + } + return audioContext; +} + +function createSingleBounceSound(baseFreq = 800, pan = 0.5, volume = 1, duration = 0.1,) { + const context = getAudioContext(); + // Frequency for the metal "ping" + const baseFrequency = baseFreq; // Hz + + // Create an oscillator for the impact sound + const oscillator = context.createOscillator(); + oscillator.type = "sine"; + oscillator.frequency.setValueAtTime(baseFrequency, context.currentTime); + + // Create a gain node to control the volume + const gainNode = context.createGain(); + oscillator.connect(gainNode); + + // Create a stereo panner node for left-right panning + const panner = context.createStereoPanner(); + panner.pan.setValueAtTime(pan * 2 - 1, context.currentTime); + gainNode.connect(panner); + panner.connect(context.destination); + + // Set up the gain envelope to simulate the impact and quick decay + gainNode.gain.setValueAtTime(0.8 * volume, context.currentTime); // Initial impact + gainNode.gain.exponentialRampToValueAtTime(0.001, context.currentTime + duration,); // Quick decay + + // Start the oscillator + oscillator.start(context.currentTime); + + // Stop the oscillator after the decay + oscillator.stop(context.currentTime + duration); +} + +function createRevivalSound(baseFreq = 440) { + const context = getAudioContext(); + + // Create multiple oscillators for a richer sound + const oscillators = [context.createOscillator(), context.createOscillator(), context.createOscillator(),]; + + // Set the type and frequency for each oscillator + oscillators.forEach((osc, index) => { + osc.type = "sine"; + osc.frequency.setValueAtTime(baseFreq + index * 2, context.currentTime); // Slight detuning + }); + + // Create a gain node to control the volume + const gainNode = context.createGain(); + + // Connect all oscillators to the gain node + oscillators.forEach((osc) => osc.connect(gainNode)); + + // Create a stereo panner node for left-right panning + const panner = context.createStereoPanner(); + panner.pan.setValueAtTime(0, context.currentTime); // Center panning + gainNode.connect(panner); + panner.connect(context.destination); + + // Set up the gain envelope to simulate a smooth attack and decay + gainNode.gain.setValueAtTime(0, context.currentTime); // Start at zero + gainNode.gain.linearRampToValueAtTime(0.8, context.currentTime + 0.5); // Ramp up to full volume + gainNode.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 2); // Slow decay + + // Start all oscillators + oscillators.forEach((osc) => osc.start(context.currentTime)); + + // Stop all oscillators after the decay + oscillators.forEach((osc) => osc.stop(context.currentTime + 2)); +} + +let noiseBuffer; + +function createExplosionSound(pan = 0.5) { + const context = getAudioContext(); + // Create an audio buffer + if (!noiseBuffer) { + const bufferSize = context.sampleRate * 2; // 2 seconds + noiseBuffer = context.createBuffer(1, bufferSize, context.sampleRate); + const output = noiseBuffer.getChannelData(0); + + // Fill the buffer with random noise + for (let i = 0; i < bufferSize; i++) { + output[i] = Math.random() * 2 - 1; + } + } + + // Create a noise source + const noiseSource = context.createBufferSource(); + noiseSource.buffer = noiseBuffer; + + // Create a gain node to control the volume + const gainNode = context.createGain(); + noiseSource.connect(gainNode); + + // Create a filter to shape the explosion sound + const filter = context.createBiquadFilter(); + filter.type = "lowpass"; + filter.frequency.setValueAtTime(1000, context.currentTime); // Set the initial frequency + gainNode.connect(filter); + + // Create a stereo panner node for left-right panning + const panner = context.createStereoPanner(); + panner.pan.setValueAtTime(pan * 2 - 1, context.currentTime); // pan 0 to 1 maps to -1 to 1 + + // Connect filter to panner and then to the destination (speakers) + filter.connect(panner); + panner.connect(context.destination); + + // Ramp down the gain to simulate the explosion's fade-out + gainNode.gain.setValueAtTime(1, context.currentTime); + gainNode.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 1); + + // Lower the filter frequency over time to create the "explosive" effect + filter.frequency.exponentialRampToValueAtTime(60, context.currentTime + 1); + + // Start the noise source + noiseSource.start(context.currentTime); + + // Stop the noise source after the sound has played + noiseSource.stop(context.currentTime + 1); +} + +let levelTime = 0; + +setInterval(() => { + document.body.className = (running ? " running " : " paused ") + (currentLevelInfo().black_puck ? ' black_puck ' : ' '); +}, 100); + +window.addEventListener("visibilitychange", () => { + if (document.hidden) { + pause() + } +}); + +const scoreDisplay = document.getElementById("score"); + + +function asyncAlert({ + title, + text, + actions = [{text: "OK", value: "ok", help: ""}], + allowClose = true, + textAfterButtons = '' + }) { + return new Promise((resolve) => { + const popupWrap = document.createElement("div"); + document.body.appendChild(popupWrap); + popupWrap.className = "popup"; + + function closeWithResult(value) { + resolve(value); + // Doing this async lets the menu scroll persist if it's shown a second time + setTimeout(() => { + document.body.removeChild(popupWrap); + }); + } + + if (allowClose) { + const closeButton = document.createElement("button"); + closeButton.title = "close" + closeButton.className = "close-modale" + closeButton.addEventListener('click', (e) => { + e.preventDefault() + closeWithResult(null) + }) + popupWrap.appendChild(closeButton) + } + + const popup = document.createElement("div"); + + if (title) { + const p = document.createElement("h2"); + p.innerHTML = title; + popup.appendChild(p); + } + + if (text) { + const p = document.createElement("div"); + p.innerHTML = text; + popup.appendChild(p); + } + + actions.filter(i => i).forEach(({text, value, help, checked = 0, max = 0, disabled}) => { + const button = document.createElement("button"); + let checkMark = '' + if (max) { + checkMark += '' + for (let i = 0; i < max; i++) { + checkMark += ''; + } + checkMark += '' + } + button.innerHTML = `${checkMark} +You are playing level ${currentLevel + 1} out of ${max_levels()}.
+ ${scoreStory.map((t) => "" + t + "
").join("")} + `, allowClose: true, actions: [{ + text: "New run", help: "Start a brand new run.", value: () => { + restart(); + return true; + }, + }], + }); + if (cb) { + await cb() + } +}); + +document.getElementById("menu").addEventListener("click", (e) => { + e.preventDefault(); + openSettingsPanel(); +}); + +const options = { + sound: { + default: true, name: `Game sounds`, help: `Can slow down some phones.`, + }, "mobile-mode": { + default: window.innerHeight > window.innerWidth, + name: `Mobile mode`, + help: `Leaves space for your thumb.`, + afterChange() { + fitSize(); + }, + }, + basic: { + default: false, name: `Fast mode`, help: `Simpler graphics for older devices.`, + }, + "easy": { + default: false, name: `Easy mode`, help: `Slower ball as starting perk.`, restart: true, + }, "color_blind": { + default: false, name: `Color blind mode`, help: `Removes mechanics about colors.`, restart: true, + }, +}; + +async function openSettingsPanel() { + pause() + + const optionsList = []; + for (const key in options) { + optionsList.push({ + checked: isSettingOn(key) ? 1 : 0, max: 1, text: options[key].name, help: options[key].help, value: () => { + toggleSetting(key) + if (options[key].restart) { + restart() + } else { + openSettingsPanel(); + } + }, + }); + } + + const cb = await asyncAlert({ + title: "Breakout 71", text: ` + `, allowClose: true, actions: [ + { + text: 'Unlocks', + help: "See and try what you've unlocked", + async value() { + const ts = getTotalScore() + const tryOn = await asyncAlert({ + title: 'Your unlocks', + text: ` +Your high score is ${highScore}. In total, you've cought ${ts} coins. Click an upgrade below to start a test run with it (stops after 1 level).
+ `, + actions: [...upgrades + .sort((a, b) => a.threshold - b.threshold) + .map(({ + name, + max, + help, id, + threshold + }) => ({ + text: name, + help: help + (ts >= threshold ? '' : `(${threshold} coins)`), + disabled: ts < threshold, + value: {perks: {[id]: 1}} + }) + ) + + , + ...allLevels + .sort((a, b) => a.threshold - b.threshold) + .map((l, li) => { + const avaliable = ts >= l.threshold + return ({ + text: l.name, + help: `A ${l.size}x${l.size} level with ${l.bricks.filter(i => i).length} bricks` + (avaliable ? '' : `(${l.threshold} coins)`), + disabled: !avaliable, + value: {level: l.name} + + }) + }) + ] + + + , + allowClose: true, + }) + if (tryOn) { + nextRunOverrides = tryOn + restart() + } + } + }, + + ...optionsList, + + (window.screenTop || window.screenY) && { + text: "Fullscreen", + help: "Might not work on some machines", + value() { + const docel = document.documentElement + if (docel.requestFullscreen) { + docel.requestFullscreen(); + } else if (docel.webkitRequestFullscreen) { + docel.webkitRequestFullscreen(); + } + } + }, + { + text: 'Reset Game', + help: "Erase high score and statistics", + async value() { + if (await asyncAlert({ + title: 'Reset', + actions: [ + { + text: 'Yes', + value: true + }, + { + text: 'No', + value: false + } + ], + allowClose: true, + })) { + localStorage.clear() + window.location.reload() + } + + } + } + ], + textAfterButtons: ` +Made in France by Renan LE CARO
+ privacy policy -
+ Google Play -
+ itch.io
+
+