Share your repls and programming experiences

← Back to all posts
💥 [GAME] Play 'POP 100!!!' a Totally Awesome Game! 💥
RolandJLevy (1052)

This game is challenging and fun - it really tests your skills and reflexes. I coded this from scratch in 4 days using vanilla JavaScript and CSS only. It's really fun to play. Try to pop all 100 balloons without missing any. To add your score to the Leader Board top 20 just send me a screenshot of your score with your name.


🎈 POP 100!!! 🎈

Links 🔗

The game 🏁

https://github.com/rolandjlevy/js-balloon-popping-game/blob/master/images/pop-100.png?raw=true

How to Play 👉

  • Aim of the game: Pop all 100 balloons without missing any.
  • Scoring: Each balloon shows the amount of points on it. Popping smaller balloons scores more points.

  • Bonus points: Look out for the yellow balloon to get 20 bonus points!

Features 💡

  • Completely responsive and mobile friendly

  • Reset the game at any time

  • Turn the sound on or off

  • Built from scratch with Vanilla JavaScript and CSS; no front-end frameworks or libraries like React, Vue etc...

  • Includes Leader Board. Send me a screenshot of your score with your name, so I can add you in.

Comments
hotnewtop
RolandJLevy (1052)

Here's my high score...

RolandJLevy (1052)

Hey @LOLHAJIN, thanks - I have added your score to the leaderboard :)

RolandJLevy (1052)

Hey @LOLHAJIN, thanks for your high score. I have added it to the leaderboard and you are in the top 20! :)

Raymans (55)

Really good, this repl deserves 1000,000 upvotes! I bet you have put lots of effort into this and it's been worth it

RolandJLevy (1052)

Hey @Raymans, thanks so much! Making this was challenging and fun. I spent quite a few evenings scratching my head, trying to get the animations to work

RolandJLevy (1052)

Hey @LoganSpong, those are good scores and are all in the top 20 - well done! I've added them to the Leader Board.

LoganSpong (54)

@RolandJLevy So sorry for spamming, I am now addicted to this.

RolandJLevy (1052)

@LoganSpong, np! glad to hear you're enjoying it :)

LoganSpong (54)

@RolandJLevy cool remember when randomguy222's posts were like, so popular for a while? I can't believe it didn't get taken down for low effort tho.

RolandJLevy (1052)

Hey @JudeAustin1, well done! you are number 1! 💥

Smart0ne (725)

This game just shows how bad my mouse is :(

RolandJLevy (1052)

Hi @Smart0ne, have you tried playing it on a mobile? It's much easier :)

Whippingdot (570)

two high scores to be on the leaderboard:

second one:

RolandJLevy (1052)

Hey @Whippingdot, well done! you're second place on the leader board :)

CarsonBradshaw1 (3)

@RolandJLevy Honored to be on your leaderboard buddy:)

RolandJLevy (1052)

@CarsonBradshaw1 thanks buddy! Happy to hear you enjoy the game :)

CarsonBradshaw1 (3)

This is my best score

RolandJLevy (1052)

Hi @CarsonBradshaw1, that's a good score! I've added it to the leader board :)

AgastyaSandhuja (172)

nice! this is a creative idea + its addicting lol. It gets kinda laggy tho just saying

RolandJLevy (1052)

@AgastyaSandhuja thanks for letting me know. What kind of spec does your computer have?

AgastyaSandhuja (172)

its a macbook pro 2017 with 16 gigs ram. I personally think it might have been just me now that i look back, as i was running a java server which took most of my ram. @RolandJLevy

RolandJLevy (1052)

Hi @AgastyaSandhuja, maybe you're right. I've also got a macbook bro which is a 2015 model. I haven't had any performance issues so maybe it was your java server, like you said. Thanks for letting me know

RolandJLevy (1052)

Hey @JasonLiu19, thanks for your score. Were you playing on a computer or on a phone?

RolandJLevy (1052)

@JasonLiu19 OK. You can get much higher scores if you play it on a mobile

gwynethwingell (55)

@RolandJLevy u r welcome it was a great game

RolandJLevy (1052)

hey @gwynethwingell, it's easier to play on a mobile if you can :)

gwynethwingell (55)

@RolandJLevy i found it a little hard to play it because i am using my laptop.

RolandJLevy (1052)

@gwynethwingell, yes it's harder using a mouse. On a mobile it's much easier to hit the balloons

gwynethwingell (55)

@RolandJLevy u r right but it is exciting when u don't hit the balloon so it makes the person play the game again and again to get the highest score and to be on the leader board.Even i am still playing it is 6:00 A.M for me in INDIA and i even have class tomorrow but this game is going to keep me up i think i am going to get sleep only when i get the highest score.

RolandJLevy (1052)

Hi @gwynethwingell, I'm glad you like the game! You must be quite tired of you were up until 6am! Send me a screen shot of you high score when you're ready. Thanks!

FlaminHotValdez (441)

ooh it's hard... rly fun tho!

RolandJLevy (1052)

Hey @maxyang, if you play it on a mobile it's much easier to pop the balloons! give it a try :)

FlaminHotValdez (441)

@RolandJLevy Oh... okay... The thing is, I don't have a mobile device.

DynamicSquid (4624)

Ooh... it's hard, well done!

RolandJLevy (1052)

Hi @DynamicSquid, thanks! I tried to make the randomisation and speed difficult but not too difficult to play. If you play this on a mobile it's much easier to get the points - give it a try :)

DynamicSquid (4624)

@RolandJLevy Yeah I just tried it on my phone and it was a bit easier. You know, since you do a lot of vanilla JS work, you should try to make your own graphics library. I'll make a game using it

fuzzyastrocat (1513)

@RolandJLevy Yeah, pretty hard but fun! :D

RolandJLevy (1052)

Hi @fuzzyastrocat, thanks - I know what you mean. It's actually a lot easier to pop the balloons if you play it on your phone. Setting the speed any slower would mean it would be way too easy to play on a phone

RolandJLevy (1052)

Hi @DynamicSquid, thanks. That sounds interesting. I'm not sure how that would work. What do you mean by a graphics library?

DynamicSquid (4624)

@RolandJLevy Something like p5.js, a library to abstract away many of the features of vanilla JS

RolandJLevy (1052)

Hi @fuzzyastrocat,

I hope you're doing well. I'm wondering if you could give me your advice on a problem I'm having with a Node project?

I am using Babel to build a es2015 dist folder so any ES6 code is compatible on browsers.

I have installed the devDependencies and defined "main" and "scripts" in package.json. I've also defined presets in the .babelrc file.

When I do npm run start in shell it successfully builds and runs from the dist folder in the repl, which is good but now I want to deploy the project but don't know how to do this in repl.

How do I run the es2015 code from the dist folder in the repl so people see the es2015 compatible version of the project?

Here is the repl: https://repl.it/@RolandJLevy/express-template-starter

Many thanks if you can help with this :)

Many thanks,
Roland

fuzzyastrocat (1513)

@RolandJLevy Hey! Thanks, I'm doing well, and hope the same of you!

I'm not sure if you're familiar with this (and I might be misunderstanding your question), but it sounds like you're looking for the .replit file.

If you make a file called .replit in the root directory (well, "root" directory — not the actual root of the filesystem, just the root of what you can see) then repl.it will use that file to determine how to run your repl and other attributes. So, here's how you can make that repl run the es5 version instead:

  1. Click "add file" in the repl, and make sure it adds in the top directory
  2. Name the file .replit
  3. In the file, put the following: run="npm run start"

You should be good to go! Just click the run button and it will now run your es5 version. (Basically, what repl does is it looks for the key run=" blah " in the .replit file when you hit the run button. It then runs that command.)

RolandJLevy (1052)

Hey @fuzzyastrocat! Thank you so much. Running the .repl file is exactly what I was looking for. It works perfectly :) I'm so relieved - I spent so long looking for a solution!

Now I have another challenge... when I run npm run start from the .repl file, it runs dist/index.js as defined in "main" in package.json.

The problem is that the copied files inside the dist folder include the package.json from the root level but this has dist/index.js defined in "main".

I thought the solution might be to exclude package.json in the "build" script in package.json and then copy a dplicate of package.json called package-dist.json into the dist folder and rename it package.json. But I can't manage to do the renaming part. Maybe I'm approaching this in the wrong way. What do you think?

Can you see the problem and do you think there is a solution?

Here is the repl: https://repl.it/@RolandJLevy/express-template-starter

Thanks for your help :) :) :)

RolandJLevy (1052)

Hi @fuzzyastrocat, I think I got something working but not sure if the project is running as es2015. I added this to index.js to rename package-dist.json to package.json.

const views = path.join(__dirname, '/views');
if (views.includes('dist')) {
  const fs = require('fs');
  const oldPath = path.join(__dirname, 'package-dist.json');
  const newPath = path.join(__dirname, 'package.json');
  try {
    if (fs.existsSync(oldPath)) {
      fs.rename(oldPath, newPath, function (err) {
        if (err) console.log('ERROR: ' + err);
      });
    }
  } catch(err) {
    console.error(err);
  }
}

Would be great to know what you think :)

fuzzyastrocat (1513)

@RolandJLevy Hey! Sorry this took a while to get back to you, I was a bit busy.

That seems to work — I'm not 100% sure about the original problem since the code has changed, but if I understand it correctly that looks like it works.

As for what the project is running as, I'm pretty sure it's es2015.

RolandJLevy (1052)

Hi @fuzzyastrocat, np! thanks for getting back to me.

It looks like the es2015 code works fine but my main concern is how I'm copying over the package-dist.json file to the dist folder and then renaming it. Is this the right approach or is there a better alternative? Thanks!

fuzzyastrocat (1513)

@RolandJLevy I'm sure there probably is a more elegant alternative, but this approach works fine so I'd stick with it.

RolandJLevy (1052)

Hi @fuzzyastrocat, thanks for getting back to me. Sorry for the delay replying. I think the original problem is resolved now and the code is es2015. This has been a good learning experience. Thanks for your advice!

RolandJLevy (1052)

Hi @fuzzyastrocat, thanks. I agree, and I think there are probably better tried and tested solutions out there that I will learn in the future. Thanks again :)

RolandJLevy (1052)

Hi @fuzzyastrocat, thanks for all your help. This helped me complete this small project which I've just posted. Check it out: https://repl.it/talk/share/snowflake-GAME-Snow-Quotes-snowflake/111731

RolandJLevy (1052)

Hi @fuzzyastrocat, can you post the answer you gave, which advises me to make a file called .replit, here: https://repl.it/talk/ask/Using-Babel-and-want-to-deploy-dist-folder-in-Node-project/111295

I asked the same question the same time I asked you.

It will help anyone else with the same problem. I will mark it as the correct answer which will give you 5 cycles.

RolandJLevy (1052)

Hi @firedragondnd, thanks - if you want your score added to the Leader Board just send me a screenshot

MrMV (1)

Nice Got 299 :)

RolandJLevy (1052)

Hi @MrMV, thanks - if you want to be added to the Leader Board just send me screenshot of your score

JudeAustin1 (5)

@RolandJLevy Imagine topping the leaderboard in two tries... 212 points, I'm good at this, I guess?

RolandJLevy (1052)

@JudeAustin1 yes, well done. That's a good score!

zplusfour (890)

that was pretty cool!

zplusfour (890)

@RolandJLevy yea sure but I forgot sorry

realTronsi (911)

@ZDev1 hey lol saw you deleted the post, didn't want to bother you but perhaps if you added some more features such as hash tables or added some more methods for data manipulation it would be a lot better :thumbs:

zplusfour (890)

@RolandJLevy :D
hey roland, wanna make some project together?
Because I am bored and the last post I've been posted (1 hour ago) is low effort so I deleted it, so yea I am bored

zplusfour (890)

@realTronsi like what?
I am not good too much at classes and objects

realTronsi (911)

@ZDev1 a basic example would be quicker searching for a particular "key", you could implement hash tables or binary searching etc. for that purpose.

zplusfour (890)

@realTronsi I dont even know how to do this
I thought from the beginning that it'll be not good and has no good features

RolandJLevy (1052)

Hi @ZDev1, yeah - that would be cool to work on something with you :) I'd like to make something simple and practical that solves a daily problem.

Maybe we could use MongoDb or Graphql on the back-end as I am keen to learn both of these. What do you think? Do you have any ideas for projects?

zplusfour (890)

@RolandJLevy yes im decent at mongodb
I'll think about ideas after school :)
have a great day

RolandJLevy (1052)

Hi @ZDev1, that would be great. Catch up with you soon :)

RolandJLevy (1052)

Hey @ZDev1, I made this Emoji Fruit Slot Machine, check it out and let me know what you think: https://repl.it/talk/share/Game-Play-the-NEW-Emoji-Fruit-Slot-Machine/81485

RolandJLevy (1052)

@ZDev1 I'm still keen to work with you on a project. Just let me know 👍

zplusfour (890)

@RolandJLevy I have no idea for a project

RolandJLevy (1052)

@ZDev1 ok, np - I'll have a think...

RolandJLevy (1052)

Hey @ZDev1, I've got an idea for a project we could work on: let's make a pizza shop where the user has a menu to order from 🍕 add to a shopping cart, checkout and receive and email confirmation or the order.

I'd like to use the MERN stack as my React skills are a bit rusty and I'm keen to work with MongoDb. What do you think?

zplusfour (890)

@RolandJLevy yeah Im good at M.E.R.N (mongo, express, react, node)

RolandJLevy (1052)

@ZDev1 OK, that's great. Will be good to work with you. I'll start by creating some basic routes in express and let you know how I get on. I'll definitely need you're help with React and Mongo 👍

RolandJLevy (1052)

@ZDev1 ok, will do later this evening soon

zplusfour (890)

@RolandJLevy what's up roland? how it's going?

RolandJLevy (1052)

Hey @ZDev1, I've been busy with work but in the evenings playing around with React, trying to get my head around React hooks. I made something very basic and invited you. Here is the link: https://repl.it/join/mwmwncwe-rolandjlevy

How would you create a repl that uses the MERN stack? When you create a new repl there is an option called react-express-template which looks interesting. Is that something we could use or is there a better way to create a MERN repl?

RolandJLevy (1052)

@ZDev1 feel free to work on the repl I invited you to

RolandJLevy (1052)

Hey @ZDev1, how are you doing? I just finished this small project which uses Node, Pug and JavaScript. I just posted it here, check it out: https://repl.it/talk/share/snowflake-GAME-Snow-Quotes-snowflake/111731

zplusfour (890)

@RolandJLevy yey!
sure i'll check it later

RolandJLevy (1052)

@tsunami21 have you tried playing it on your phone? It's much easier