Web Development using BLAZOR WEBASSEMBLY! | Let's Build Flappy Bird WITHOUT JAVASCRIPT! (PART 1)

so this is my first youtube video so i'm gonna do a little bit of introduction stuff here but if you are not interested in that i will put a time stamp right here ish for you and you can just go straight to the tutorial part of this video but i wanted to just take a second to explain what my goals are here and what i want this channel to be there is a lot of entry-level like beginning c-sharp type tutorials or beginning blazer tutorials or beginning mvc tutorials but it seems like what's missing is a way to bridge the gap from this pool of knowledge to implementing that in the real world my goals are to help you go from your introductory c-sharp courses and tutorials and turn them into projects and real applications that you can put on your portfolio or that you can use to practice we're gonna start a lot of applications and then we're gonna finish them where they in places where they could go in multiple directions and you can then take those applications and move them into those directions and yeah i am very open to hearing about what you feel would be helpful i want to be helpful to you so we're all going to learn together um and hopefully we're going to create some really cool applications in the process and so this first application which was inspired by the javascript games tutorial video where the creator created a web application with just uh html css and javascript and they recreated the flappy bird uh game so that's what we're going to do here but instead of using javascript we're going to use c sharp and this should get us a little more familiar about what blazer web assembly is and why it's so cool if all this sounds interesting to you definitely subscribe and hit the notification button let me know in the comments what you want to see or if you think that i should be doing something differently just let me know i am very very very open to feedback so with all that being said let's get into the tutorial okay so i've got visual studio 2019 open here and we're going to go down and create a new project so we're going to search for the blazer app template and hit next and we're going to create new projects so let's call this flappy bird i'm going to call this flappy bird demo and then i'm going to specify that the project is a web project and i'm just going to keep the solution name as flappy bird demo so naming the project flappy bird demo.web solution flappy bird demo um everything else looks good so we're going to hit create and then we have the option to choose either blazer web assembly or blazer server we are going to be focusing on blazer web assembly in this but blazer server we could do the same thing here it's more just um the behind the scenes of how it's working is what's going to be different so but you could essentially make this uh application using either of these so anyway uh blazer web assembly app we're gonna keep all of this the same so keep configure for https checked um we're not gonna have it be asp.net core hosted this would scaffold out a client-side project a server-side project and a shared project for us which is too much that's not what we're gonna that's not what we wanna do right now so keep this unchecked and then we're also gonna keep progressive web application unchecked so straight out of the box blazer webassembly app we will hit create and visual studio will scaffold out a demo application for us so let's go ahead and run this just to make sure that everything is working as expected and we will see the blazer template so if you've used blazer before then you've seen this template um it just has a simple home page with hello world a link to a survey it has a counter page which shows you that you can hit the button and the number goes up and then uh there's the fetch data page which gives you some weather forecast data so all of these things are working so it looks like our template application loaded correctly so we are good to go so the first thing that i want to do for this so that we are really like starting from the ground up is to just delete everything that we don't need um so the template version the temp the blazer template comes with a lot of stuff um so let's go ahead and we're gonna go through this project and delete the stuff we don't want so in the css folder we're gonna just delete all of bootstrap we're not gonna be using a css framework for this and same thing with open iconic we don't want that so all we're doing in terms of css is just this one style sheet app.css and even in here so we're going to come into app.css and we're going to just delete almost everything in here now you could delete everything in here this is just my preference to leave this blazer error ui styling here this is something that's in the template that if something happens with your app something goes wrong an exception is thrown it'll just show a little message on the browser screen uh saying hey your app messed up um so and if you are curious the um div for this is in the index.html file so if you wanted to truly start from scratch and delete everything from app.css you also want to come in here to index.html and delete this div otherwise it's going to show up because by default it's just a div with no styling so anyway we're going to keep it because i think it's useful and we'll continue on so the sample data folder has this data that um the forecast page pulls from which we don't need so we're going to delete that folder okay and so that's good for up here for the root folder now let's go into pages and we're going to delete that counter page and we're going to delete that fetch data page and we're just going to leave this index.raiser page so this will be our one page in this application we're going to delete the survey prompt as well that's a component that is in the shared folder right here that we are also going to delete so we deleted the pages we're going to delete the survey prompt and the nav menu these are two components that are used this main layout page is different this is the layout that all of our pages are going to use so any page that we create is going to render in this at body location um if we look in the app.razer file we'll see that it's specified that which layout we're going to use so we could create multiple layouts but we are just going to stick to the main layout and we are going to delete everything in the main layout except for that body which is just saying just show what's in the page whatever page is being loaded up okay everything else we're going to keep so let's just run our app make sure we didn't break anything by deleting a bunch of stuff and all we should see is this hello world message welcome to your new app which is from the index page right here so if we look at the index page you'll see this at page up here so this is saying hey i am a blazer page if we did not have this at page up here then this would be a razer component which would need to be embedded inside of a razer page in order to be seen just like we saw with the survey prompt that we had deleted down here okay so now let's start to add pieces of our game so i'm going to right click on the solution and say add new folder and i'm going to call this folder components and i'm going to add a new razer component within that folder and we're going to call this game container and this is going to hold all of the content of our game so i'm going to type in some html in here this comes directly from the original tutorial video so if you want more detail into the html and css side of things you can go watch the original that's linked down below i'm going to skim past this because it's not super important to us but i'll explain on a basic level so this game container get div is going to hold our game inside of the game container div we're going to add a sky element which will represent the sky and we're going to add a ground element which will represent the ground and then inside the sky div we're going to add a bird div so we've got a game container the sky and the ground are going to fill up the game container that's how we're going to write the css and then the bird is going to exist within the sky okay so let's add some styling to this so that we can actually see what's going on here and i'm going to paste this in i'm going to come up to the top of our app.css file and just paste in this code the css so we're styling our game container we're giving it a fixed width and height with the sky we're also giving we're giving all of our elements of fixed width and height the sky height and the ground height are going to add up to the game container height so it spans the full height of the game container and the width of the sky and the width of the ground is the same as the width of the game container so the sky and the ground elements fill up the entire area of the game container and then lastly we have our bird element or a bird class and we are giving it a fixed width and height of 60 pixels wide and 45 pixels tall and we are giving a gap of 220 pixels from the left hand side of the bird which will make it appear in the middle of our screen okay so now we have our game container component and we've styled the elements that are in here and so now in order to view what's in our game container we need to put this inside of a blazer page and so index.razer because it has this page directive at the top is a blazer page so we're going to use this page uh let's let's reference game container within the index.razer page and you can see intellisense auto completed this to include the entire namespace but what i'm going to do is copy and cut this out and come into our imports.razer file and we're gonna add in a using statement here to include this namespace so that we don't have to keep including it in our razor pages and razor components just to demonstrate here if i went into the game container and gave this a page directive so let's say this is paid this is a slash game let's just see what um what that does so we can demonstrate so now this is a blazer page so when we load our app up we are in index.razer right now and this is the content of index.razer we can see our ground in our sky and our bird if we went to slash game we would see the same thing if we went to slash i don't know it would say sorry there's nothing here so we could give this a page directive and use it as a component it's not um they're not mutually exclusive things um but we're just gonna keep this just as a component and we're just going to put it inside index.razer so it's automatically the first thing that loads up for us okay so now we've got some elements on the screen and we want to see if we can make them move without using javascript so we can do this with blazer um and we're gonna do this by we're gonna first add some models here so i'm gonna create a folder called models and i'm going to add in a class we're going to call it game manager and game manager is going to be the class that monitors and controls what's going on at a high level in our game um so this is going to contain the references to all of the other model classes that we're going to use um this will yeah become more clear as we get into it so let's also create a model class for our bird element and we're going to call this bird model and so we want our bird to fall to the ground that'll be the first thing that um we accomplish in this game so what needs to happen is the bird's vertical position needs to change over time so we need a variable to control the bird's distance from the ground so i'm going to create a property here called distance from ground and i'm gonna just give it a default value of a hundred i'm also going to remove all of our unused using statements that's totally not required but is a habit of mine so great so now we have a bird model and we have this one property which will allow us to control its distance from the ground so let's go into our game manager and we're going to add a bird model object to the game so let's say bird model bird we're going to make this public and then let's let's instantiate it in our constructor so we're going to say bird equals new bird model let me remove the using statements from this too great so now we have this bird model class it has this distance from ground that is being referenced within our game manager so our game manager currently holds a bird object and so now we can add a reference or now we're going to reference the game manager from our game container so let's go into here and at the bottom of this page we're going to do at code and this is where we're going to put some of our c sharp code so we're going to add a game not game container a game manager to our game container and this is going to throw some red squigglies at me because it doesn't know where to find game manager so let's go into imports and also add a using for the models folder okay so we are going to instantiate this game manager object using this method protected override void on initialized so you can see that there's three options here there's uninitialized which is going to be called once when the component is first initialized there's going to be the on component or on parameters set method which will be called after our parameters are set if we had any so we'll see that later on an instance of that and then we have on after render which will be called anytime the component re-renders so we're going to use the uninitialized method because we just care about this executing when the component is loaded up initially and we're going to say game manager is new game manager okay so now we have this game manager reference within within our game container and we want to access the bird model object to set the birds the birds distance from the ground so we're going to do that by adding some styling by referencing a string so we're going to say string we're going to call this bird css and this is going to return this css like string where we're going to say bottom and we're going to pass in the gamemanager.bird.ground property and say that's in pixels and this has now converted essentially this just integer from our c-sharp class into this css string and we're going to reference that string directly from this div by saying by saying style equals we're going to do it at sign to say what comes next is c sharp and then we're going to say burn css and so now this is going to reference this string right here um you do not always have to put an at sign sometimes uh it's smart enough to know whether or not you're going to be putting c sharp code somewhere but because this uh the style attribute expects a string um we needed to be specific and say hey i'm not typing bird css as a string i'm typing it as a reference so cool let's run this and see if this has done anything awesome so now our bird is generating 100 pixels above the ground and we controlled that um just using c sharp so that's pretty cool what would be even cooler is if it fell to the ground over time if it animated over time so how are we going to do that so let's go back into our game manager and i'm going to write whoops i'm going to write a new method it's going to be an async method called main loop and this is going to be the loop that executes over and over again throughout the course of our game so this is going to be a while loop in here and we're going to just pass in true right now just so that it executes over and over and over again um in the future we'll replace this with a check to check if the game is running actually let's just add that now so up here i'm going to say public pool is running this is going to represent whether or not the game is currently running let's give it a default value of false even though this is already the default value of a boolean but just to be explicit and we will say while is running and we will run this loop now is running is false so we need a way to set this to true right now let's just set it to true right above our while loop okay so our game manager has this main loop method when this is called it's going to set is running to true and then it's going to execute this while loop over and over and over and over again so this is where we're going to tell the bird that we want it to fall so let's go into our bird model class and let's create a method here called fall where we will make the bird fall so we need to decide how far we want the bird to fall each time this is called so i'm going to actually pass in an argument here called gravity say and we will subtract out gravity from the bird's distance from the ground so if we go back into our manager class we can say bird dot fall and we need to pass in some number to tell it how much to fall which we're going to call gravity so i'm going to come up here and set i'm going to make a read-only variable here private read only integer we're going to call this gravity and we're going to say that this is equal to 2. so the bird is going to fall two pixels uh every time that this method is called so we don't want this to be executing over and over and over again so fast that this just happens as fast as possible we want to put in a little time buffer here so that this is called only x amount of time and so we're just going to say a weight task.delay i'm going to say 20 this will say weight 20 milliseconds so this loop in total says bird fall by 2 pixels and then wait 20 milliseconds and then fall two pixels and then wait 20 milliseconds and that will be our loop um so i'm going to hit run on this and we will see that the behavior here actually we have not called this yet from the container so let's go do that so we have this way of starting this loop but we need to um actually call main loop in order for it to start so let's do that so we're in our game container here i'm going to add i'm going to say at on click within this first game container div and we are going to say start game and we're going to write a method down here right now called void start game and this is going to call game manager main loop so what's gonna happen is when i click on the game container an event and on click event will be raised which we have assigned to say call this method then when we call this method we're going to say we're going to call the main loop method within game manager and then this is going to execute this loop over and over again so now i'll hit play but what we'll see is that we're not exactly getting the behavior that we expect so if i click and click again and click again and click again you'll see that the bird keeps falling but it only is falling when i click my mouse so why is it doing that the reason it's doing that is because the container does not know that it needs to re-render this element here it has no idea about what's going on behind the scenes so we need a way to alert the game container to say hey something inside of you has changed so can you please re-render so we're going to do that and we're going to do that by using the i notify property changed so this is an interface that we're implementing on the game manager class i'm going to control dot and say implement interface and this will add the uh property changed event handler property changed event so what we're going to do is we're going to raise this event whenever the bird model changes so we're going to come into our main loop here and we know that the bird just fell two pixels here so after this method we're going to say hey a property changed so we're going to do that by saying property changed question mark dot invoke the sender is this game manager and then we're going to say new property changed event args name of we're going to just say bird so the bird object has changed after the fall method so fall notify that something changed oh wait 20 milliseconds is now what our loop reads now we need to go into our game container and tell it what to do when the property changed event uh is raised so we're going to come in here right after we create the new instance of our game manager we're going to also say a game manager property changed event we're going to tell we're going to take this and we're going to say oops we're going to say state has changed so when the property changed event is raised we are going to call state has changed and status change is a method which will cause the this component to re-render so now that we've done that if we hit play and we click on the screen we'll see now the bird is continuously falling down so that's what we want now it is falling down indefinitely through the ground so that's maybe not exactly what we want but we're closer than we were before so let's let's make the game stop when the bird hits the ground so let's go into our game manager here and what we want to do when the game stops is to stop executing this loop so we need to add a check in here to see if the bird has collided with the ground so we're gonna say we're gonna come back into our while loop and we're gonna add um a little more stuff in here so the first part of this is say okay follow two pixels and then update the ui now we're going to add in a check here to say if the bird's distance from ground i'm going to say is less than or equal to zero equals zero is fine too but this is just to be extra sure that i mean if the bird is less than zero pixels from the ground we definitely want the game to stop so i'm gonna keep that there and we're going to set is running to false okay so make the bird fall two pixels notify the ui that the property changed check if the bird is on the ground if it is stop the game otherwise we're going to wait 20 milliseconds we're going to do this loop again so now let's run the game again and we'll click on the screen and we'll see that the game stops the bird stops falling when it hits the ground you'll notice if i click on the um the screen here the bird will continue to fall and actually if i set this to equals equals zero so it's only going to stop the game when the bird is exactly on the ground then if i click again this should this will continue to fall so maybe we want to change this a little bit i'm going to change this back to less than or equal to because i feel like that is a safer statement here but let's make the game reset when main loop is called so let's create let's separate these things out into some smaller methods here so i'm going to say actually you know what i'm going to do i'm going to say public void start game and what we want to do when we start a game is create a new instance of our bird model um new bird model and then we want to call main loop okay so let's go into our game container and let's get rid of this and when we click on the game let's just call start game from the game manager now we also want to make sure that a new game isn't started if the game's already running so let's just add a check in here that says not isn't all is running if the game is not running you can start a new game otherwise this method's not going to do anything okay let's also write a method here called game over so we have a start and end game and all this is going to do is set is running to false and then we will call oops we'll call game over instead of directly setting that property here okay so our loop's gonna work the same we have this start game method that we've now pointed this click event to so let's try this out so we're going to click the bird's gonna fall to the ground great let's click again we'll see that it starts up again and again but if if the game is not over my click doesn't do anything cool so that is going to be it for the first part of this tutorial series so if you enjoyed this let me know like the video subscribe to the channel and i will be back with a part two of this very shortly thank you so much for watching and i will see you next time

Channel: Erin McLaughlin

Views: 21,762

Keywords: Blazor, Blazor WebAssembly, C#, Coding Tutorial, Programming Tutorial, Game Development, .NET, .NET Core, ASP.NET Core, Flappy Bird, The Code Bug, Code Bug

Id: wTmZCu16LNU

Length: 32min 57sec (1977 seconds)

Published: Tue Aug 18 2020

Reddit Comments

[u/[deleted]]

Just watched through was excellent.

[u/Artmageddon]

I’ve been so far behind forever on learning ASP.Net and can’t tell you how excited I am to get a chance to watch this

[u/fvertk]

I really liked this! Your style of speaking is very thoughtful and kind, pausing to think about what you're going to say next, something about it makes it really easy to listen to and understand... moreso than others.

So how popular is Blazor? I don't know much about it, and it only sucks to learn something that may not get wide adoption.

[u/geesuth]

Awesome 👌 I'll back to you.

[u/_tekgnosis_]

Re: Video itself (not the content within it): be sure to equalize the audio. The volume dropped significantly when you switched over to showing just your screen. I realize this is full-anal-feedback but you mentioned in the video that it's your first post so I thought it may be appropriate to point it out.

You do well with 'ums' and 'like' in the video (dont say them often)--keep up the good work!

[u/Ilinois]

Subsribed

[u/codeblue18]

This was great. I hope you make a part 2

[u/nem8]

I like, maybe this will finally let me learn web programming.. :)

[u/TheDevAbides]

Thank you! Great job on this video.