Coding Challenge
Вставка
- Опубліковано 5 чер 2024
- An attempt to implement the basic mechanics of Angry Birds in JavaScript using p5.js and the matter.js physics engine. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #137:...
🎥 Next video: • Coding Challenge #139:...
🎥 All videos: • Coding Challenges
References:
🐦 Angry Birds: www.angrybirds.com/
🚒 Matter.js: brm.io/matter-js/
Videos:
🚂 Matter.js Physics: • Matter.js Physics
🚂 Inheritance in JavaScript: • 16.17: Inheritance in ...
🚂 Inheritance in Java: • 4.5: Introduction to I...
🕹️ Phaser Game Development with Catt Small: • Guest Tutorial #8: Pha...
🔴 Coding Train Live 171: • Coding Train Live 171:...
Related Coding Challenges:
🚂 #62 Plinko with Matter.js: • Coding Challenge #62.1...
🚂 #41 Clappy Bird: • Coding Challenge #41: ...
🚂 #31 Flappy Bird: • Coding Challenge #31: ...
🚂 #20 3D Cloth with Toxiclibs: • Coding Challenge #20: ...
🚂 #147 Chrome Dinosaur Game: • Coding Challenge #147:...
Timestamps:
0:00 Introduction!
1:30 Getting started with an Object Oriented Approach
5:08 Adding and setting up Matter.js
11:05 Adding and using the physics engine
12:52 Making the ground static
15:38 Adding mouse constraints to control the bird
21:20 Adding the slingshot
27:00 Launching the bird with the slingshot!
30:57 Fixing bugs and things to refactor later!
33:07 Replacing the shapes with images
37:15 Adding restitution
38:47 Wrapping things up and improvements to make!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: ua-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#matterjs #physicsengine2d #angrybirds #p5js #javascript
20 minutes in and just realized this was angry birds and no flappy bird
I know right? I thought it was flappy bird too for the first couple of seconds!😂
He's done flappy bird in another video iirc
elvsrbad2 yes, but he’s done sooooo many flappy bird videos that it wasn’t too much of a stretch for him to do another one😂
Holy shit same lol
"I'm gonna be ising matter.js physics engine" - a bit of overkill if you ask me
"it already knows the name bird.js" when it was first file you already made
Once he created bird.js it became a suggested name. Its only once he created the file that it showed.
Edit: But I dont doubt that he has done this challenge off camera to make sure he can actually complete it.
@@xBrOwNeDoG thats what i said lol
@@CYXXYC lol I didnt think thats what you meant. All good though
I laughed so hard at that moment
It was literally the first file he created in this video. No doubt he has done this before to test, but that's not where the suggestion necessarily came from.
i don't even javascript but these videos definitely help me in terms of understanding how to properly break down an issue into a programmable solution. the jovial attitude just makes it more infectious.
Him: making a bird.js file
Also him after 5 min: IT EXACTLY KNOWS WHAT I AM GONNA CREATE IN ADVANCE
So good. The style, attitude and communication are brilliant!
41:24 such a weird kiss 😂
you are the funnest tutor on UA-cam
Keep going!
Those libraries in your hands are simply OP. Keep it up!
I think the best way for the bird to reach Max speed is to release after test if bird position has reached slingshot point position not just delaying it 100ms,
PS: thx for matter.js explanation
I always watch your videos for motivation in my own code. Thank you so much!
Amazing presenter, great personality, even better coder and yet, the worse box drawer (that’s proportional and square) I have ever seen!
Love the vids!
I love very much the coding train channel. I learn whole javascript from this channel only.. I thank to this channel to makes me knowledgeable...❤❤
the editing at the end of the the video was pretty good and also unexpected.
I got a coding challenge for you.
You have done a lot of the really, really classic games, and a few modern ones, but I don't think we have seen you make any mid-era classics yet. So my challenge would be Dr. Mario.
For the uninitiated, you have a 8x32 grid. At random positions, 3-8 (depending on difficulty) "virus blocks" are placed. Your playing piece will start at the top middle and fall down. The pieces consist of 2 blocks of random colours. You may rotate the piece as it falls, just like in Tetris.
Your mission is to match up 4 or more blocks of the same colour, where the "virus block" is part of that chain. Once you do, all blocks in that chain disappears. Once all viruses are gone, you have won. If a piece lands in a way so that one block ends up over the top of the screen, you have lost, just like in Tetris.
If a piece land sideways with one block sticking out, and there is no block in the position right below it, the overhanging block will continue to fall, but you no longer have control over it, until it lands on top of another block or the floor.
Good luck, fellow programmers!
now i want to code bomberman in p5
@@sadhlife Go ahead. It's all grid-based, so if you watch Coding Train's videos about grids, you'll be halfway there.
IMO, a better approach would be to replace the setTimeout controlling the slingshot release with an if statement that checks if the bird has crossed the point on the x-axis where the slingshot is placed.
Thank you for giving us your knowledge and also being so positive😁. Keep up the good work
A solution to dettaching the slingshot would be comparing the circle's x (call it c) value to the slingshot's x (call it s) value. If c > s and mouseReleased, dettach the slingshot.
29:49 Yeah I might, and it would be to compare the x positions of the bird and the point that spring is attached to. When bird.pos.x is higher than that attach point, it would be released. And this way bird will be faster cause you won't be wasting the energy that's left in the spring like you do with the timeout thing.
Missed the chance to call it birdbox challenge. great as always.
Wow 139 likes and 0 dislikes atm, btw nice video. It's a pity I've missed the stream
You could just check the birds X if its a bit greater than the connection point of the sling (the bird is on the right) it should release. So that way it will only release if it actually moves to the right of the sling. Could also check the speed as well. Like if speed > X and x > slingshot.X + 5 fly()
If you had written it in python, you could've used semicolons as the boxes.
the bird is ‘def’
lmaooo
Love ur content
38:24 "Things have gone really off the rails here!"
Heh.
4:00 "oh look it like knows what I'm going to do in advance" xD
Great fun! I'm gonna try Matter with my students. And good to see you naturally using const now.
Pretty soon I'll be pronouncing GIF with a soft g!
@@TheCodingTrain Ha ha. If you did that I would be thrilled!
6:30 When he said that I imagined javascript reporting ''Error: Null Pointer Exception (I dunno what ur talkin about)"
Just remember, pong took him longer.
Awesome!
great vid, how do you setup the presentation of your vidoes (what are the softwares)
I noticed the "rest length" really seems to be a "min length", because it pushes the object towards the length value. Obviously, that's not the desired behavior.
It's especially noticeable at 27:01. All sorts of weird behavior because it's trying to keep the bird at least 100 units away from the pivot point.
Was kinda surprised nobody in chat mentioned this.
29:46 :D I had this idea in my mind while you were thinking:
Let's assume that users are only going to pull the bird towards the left side. If that is the case, then if the bird's x-position is greater than that of pointA (..? ...or whatever is the starting point of the constraint is called!), then we destroy/remove/stop the constraint.
Same thing if it's going backwards!
Another idea I had while writing/typing (😂👍) literally the last line was to check for the length of the constraint. If the 'spring' of the slingshot/constraint has reached a certain radius from the point/has been extended to a certain length, we store the force gained, and then let go of the constraint...that is, delete it (just like you set it to null). Then we remove all existing forces from the bird (other than gravity of course!) and add the force stored in the last step, back into the body.
Pretty sure I accidentally didn't write the last step correctly and my idea is not gonna work xD!
But the first one has to work....99 point cardinally infinite 9's guarantee! (I feel so confused about the second method I specified that my brain is going haywire right now...like, what does 'guarantee' even mean!? >:O)
( _please send help_ )
finally was a HAPPY BIRDS , thanks Dan
awesome!, you made a great game as few minutes..
the coding train is the most subbed programming channel on UA-cam
thanx for the help , u deserve more subs
That keyboard sound
wooow that's amazing
i am learned English to watch your lessons. VERY NICE TANKS YOU!!!!!
Aayush Pokharel oh, yes my level elementary but i am continue learning
This really should be the "Crush the castle with Matter.js" coding challenge
Tank Wars :D
I am a kid and i love watching this guys videos
It would be great if u do the jenga one!
you ara a coding hero
Oh rainbow im coding with unity for game this is awesome. I love 🌈
Maybe you could release the bird when it’s position is at the slingshot?
Pål Oliver Kristiansen agreed, either when the bird is at the slingshot constraint 0 point, or simpler when the x delta changes sign after release ( ie your bird went past the slingshot post)
that’s exactly what I thought... looking forward to implement that tomorrow!
@@joogps anyone get this working be trying this for a while would be much appreciated.
@@joogps
function mouseReleased() {
console.log(balls.x)
console.log(slingshot.sling.pointA.x)
if (balls.x >= slingshot.sling.pointA.x){
slingshot.fly();
}
}
cant get it to work. Everything is the same I cant get it to spring forward before detaching the constraint it just drops as soon as i release.
Robert Lister you aren’t constantly checking the x positions... only once when the mouse is released
this is why type="module" is useful, everyone is just tired over worrying over the order of scripts
Bonne vidéo!!!
Maybe it would be better to release the bird when its distance to pointA is less than a certain number, that way the bird can get the full momentum before releasing and you don't have to time it.
Good job
u r my leader in coding world
Hi, a big fan of your channel! You have mentioned this project is done in an object orientated manner, I can't help but wonder how would you simulate this in a functional programming paradigm :) Cheers!
With great difficulty. OOP is really ideal for graphical and physics problems as they typically revolve around objects.
Functional programming is better suited for tasks requiring guaranteed memory and thread safety.
bird's x velocity is maximum when its x position passes the slingshot's x position, so release then.
To detach the bird at the right moment, you could also detect when the bird's x position is greater than the slingshot's x position and then when it is, trigger the detachment 🙂
This method works great when the slingshot is fully charged, but not very effective when slingshot is not very pulled back.
@@victorwei6053 if you don't pull it back very much, you can't get any more power out of the shot. This is because once the bird's x position passes the slingshot's x position, the slingshot will start to slow the velocity of the bird down and bring it back. It's pendulum physics 😉
@@Eniallator do you have the code to get this to work having trouble because of the class objects.
@@robertlister5192 I don't, sorry
No worries :)
what about checking the position: when the bird is on the right side of the constraint position, release the sling
bro you are best
Another minor thing was that because the ground was exactly the same size as the screen, any blocks that went partially off screen could be seen falling off the ground
Ah, yes, that definitely needs to be fixed!
Heya, I was just wondering why you sometimes use function and sometimes use classes when you can just do both with function. Is there a difference, and if so, is it important enough to use both?
Edit: great video btw
Think of OOP as a way to model a problem, which is closer to how we (humans) think. You could resolve all programming problems with just variables, loops, conditionals, and functions (and maybe even without functions), which in the end is how CPUs work.
When you model your data and behaviours in classes, you're making it easier for you to think about a solution. A classic example would be to model a car, which has an engine, and wheels, all interconnected, and you can only accelerate, brake, or steer. Otherwise, imagine having a chassis, an engine, and wheels, and having access to their innards, and moving everything with wire and by hand :D
Why u so pro at programing ?? How did u learn that ??
Good Content
you better do more videos like this before those (fast typing) fingers get tired
whenever you copy and paste code, especially large parts such as at 15:10, it's time for pulling it out and making it it's own function, possibly a parent class member.
👍👍👍厲害！
Daniel Sir Can you tell me which book should I prefer for javascript coding that includes all the concepts right from variables to physics enjine and everything please tell! :)
Just release the bird when distance between the bird and the constraint is less than the initial length
bird box?
ground
:O
I have tried to find someone say bird box in the chat for a long time, FINALY😂
Could you do a video of depolying processing applications on Android? I couldn't get it to work that well unfortunately.
im learning about kinetic energy and potental energy at school!
Super late to the party, I know, but is there a reason not to have the this.body.isStatic in the box constructor, and so when you create a new box you just tell it if it’s true or false?
keep coding challenage
15:36 I don't know why but I had to write " this.body = Matter.Bodies.circle(x, y, r/2); " dividing radius by 2. Is it possible that they updated the way matter.js works and made it the diameter input instead of radius?
I feel like your right, but the api still has it as radius, maybe they havent updated the api? I was having the issue of it floating over the ground
AMAZING
😂😂😂😂😂😂
If anyone is having troubles with the mouseConstraint part, you may need to set this parameter if you are on a HD display:
mouseConstraint.mouse.pixelRatio = 2;
It is a very useful and entertaining video, I just missed the part where the teacher explains than you must run the code from a java server or the browser will not load the images Because the cors system. but it let me learn about Apache and tomcat, so a the end I'm thankful for that too
More in this workflow series! ua-cam.com/play/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X.html
12:22 *its okay, we can break physics and make a floor*
do you think you could make a simulation of clouds forming and raining and forming again if you know what i mean
What about problem: click on equals enemy to move them? :D plz show how to fix it!
Can you do a coding challenge where you create an interactive Rubik's cube? And possibly publish it to the Internet? Also, include a few buttons to make those moves (like an R button, L button etc.).
Please suggest or upvote here! github.com/CodingTrain/Rainbow-Topics/issues
What purpose does pushing and popping in the bird show method serve?
I explain these concepts in this video: ua-cam.com/video/o9sgjuh-CBM/v-deo.html
Sir, can you provide some ui and backed with firebase and ui with p5.js..
suppose where menu screen need to click and go to game screen
woooo!
Can you do the Tower of Hanoi, showing the algorithm's work every step. I would love to see this!! :)
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
I just can't stop laughing with that bird.js
I guess the proper way is to calculate the circle distance to start position and when it reaches 0 cut the line.
Wait u til mouse press set a flag the flag looks for mouse release and then once that happens it waits until the ball crosses the center point i.e. string is length 0 it releases.
help 19:00
matter-js: MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected
i dont know why but when i type mouse: mouse it doesnt let me move the ball but i figured if i type Mouse: mouse it does but comes up with the warning above
Same... Did you ever figure it out im just now watchong this?
Next Coding Challenge: Full Fledged Physics Engine With SAT Collision Detection And Resolution
I think it would be more realistic to remove the constraint when mouse is released *and* the magnitude/length of the slingshot line equals 0
why is my bird floating
спасибо за русские субтитры!)
Hello Daniel, I have a question :
I am 13 years old and I'm currently in 8th grade and I will be in 9th grade in April. I have opted for computer science because I love coding a lot and I want to become a software engineer when I grow up. I will be taught processing.py in school.
So I decided to learn Java (Processing) and came across your channel. I saw that in your older videos, you taught processing but in the newer videos, you moved to p5.js and you began to do most of the Coding Challenges with p5.js.
It made me think whether I should continue to learn Processing or move to p5.js and leave Processing.
This is my question - Whether I continue learning Processing or turn to p5.js.
Please answer this question as soon as possible.
Thanks
Hi! So glad to hear from you! Maybe this is a disappointing answer, but my answer is. . I have no answer! I think both are great and can have their pros and cons. One reason to use p5.js is that you can run everything in the browser and share easily with friends. But Processing is often faster and you can do more "full screen" things with it as well as interface with hardware and many Processing libraries! Just go with what you enjoy and feel like doing!
@@TheCodingTrain I feel like doing both, I'll first learn from all of your Processing videos and then I will begin with p5.js because it seems more tempting.
Thanks a lot for replying.
I actually have an error. In around the minute 19:00 Dan writes code that is able to move the bird object around and toss it. This rarely works for me and it grabs the bird when the cursor isn't even on it! I think that this has to do with the scale but I can't think of anything else, if anybody who has also had this problem or have been able to do this challenge anyway, please help. Thanks
Oh! Are you on a "high pixel density display" by any chance? Try adding the following:
mouse.pixelRatio = pixelDensity();
@@TheCodingTrain I had the same problem on a 4k display, this fixed it. Thanks !
Hi, is there a library to make online games?
isaid stream you should take a look at his videos about websockets :)
Dan, you of all people should know by now that preincrement is superior to postincrement.
Nice video! Btw instead of const options = { mouse: mouse} you can just do const options = { mouse}
Hey what soft ware are u using in the video???
I'm using the p5.js web editor (editor.p5js.org).
4:00 lol🤣
❤
My collision physics is off. things shoot out in the wrong direction with non realistic momentum.
Has someone encountered this problem?
esketit
you need a shorter drumroll sound.
Hey yall, anyone know how I can prevent the user from clicking and interacting with the boxes? Awesome Tutorial Btw!
The coding train Vs all coding challenge