How I Learned to Code My Own Game

lately there's been a thought that's been developing in the back of my mind that's been bothering me somewhat we live in a world that is run by code all these services and apps and devices that I use on a daily basis are full of instructions that were written by someone in a code on a computer and run to make my life better and it seems crazy to me that I'm so reliant on something but haven't the faintest idea of how it works at all I've always wanted to learn I've always wanted to write something myself but I really struggled with the terminal layer and then the very blank vanilla text that has no graphical interface I think for me to start learning something like us I really really need some sort of visual graphics to play with here and that's when YouTube's algorithm which was quoted by people recommended me a channel called the coding train this guy Daniel Shipman is a fantastic programmer and an excellent teacher and he does these videos where he does a coding challenge so he'll code flappy bird right there in front of you live and like less than half an hour so inspired by this channel which you should definitely check out by the way I want to code something for myself I want to learn how to do this I want to learn to program a fun simple game that runs in a browser so that anyone can play this as always this is day one hour zero let's get started all right step one I need to learn the basics of programming and writing in the language I want to write this game in technical details I'm gonna write this using a tool called p5 which is a JavaScript library it's free it runs in everyone's browser so you don't need to install anything it's designed to be accessible for beginners that's perfect for me all right let's draw a circle I'm just using the tutorial on the p5 website I began learning by simply following basic tutorials on line drawing circles and rectangles look at that that is a gorgeous circle perfectly wrapped a fund away p5 is written to be really intuitive and for the first time with programming that felt like I was gang somewhere ellipse means draw an ellipse rectangle means draw a rectangle it's more like English and I can see exactly what's happening right here this is what this is going to be a piece of cake I'd make mistakes but they often led to pleasing and interesting results I've made art next I tried copying other people's code and messing around with it to see the effects and to try and gain an understanding of how it worked I found this to be one of the most effective learning methods I typed it line by line along with the cooling train by doing this it means I have a code that runs so um you know I can play around with it that's really looks like gathered enough knowledge I thought I'd challenged myself by attempting to write my first little program so I've got an idea for the first original project that I want to create you know the DVD like I'm saying screen where it bounces all over the screen and everyone wants it to bounce off the corner I'm gonna be cool to code something like that so just a little rectangle that bounces around the screen hopefully one day hits the corner I don't know this is cool because I've programmed it so that it knows when it's at the corner and of bounces off it so what I want to do now is set this to have a random direction and location so it's really like the real DVD screen how it changes color each time it hits off the wall is equal to the COS theta F Miss Mel my maths teacher is somehow watching this you'd be pleased to know that fifteen years later I still got my trig down thank you very much okay that's just a little bit fast it took me more than four hours to write this code which is only 49 lines but if I run it blah it's a good approximation of the DVD oh yeah it does it does I think I've got a good enough grasp on the tools I need to make what I want so tomorrow I'll get started on the game all right so here's my idea rather than just ripping off someone else's design I thought I'd do something that's relevant to me so do you guys remember a while back I made a video where I learned to break a wineglass using just my voice anyway I thought I'd make a game that is based on that concept so what I want to do is have a randomly I want to have a randomly generated wineglass so it chooses from a range of different wine glasses different styles and scales at randomly and this wine glass will have a pitch that breaks it and then I'm here my face is here I don't know how to draw a face god that's terrible why does that look so damn creepy maybe some teeth anyway I'm here and I'm showing into the wineglass and the user has to guess the pitch that the wine glass will break based on the size and they can move the mouse up or down or left and right I don't know which way yet and that will adjust the pitch so up so it higher or lower and when you're on the right pitch this wine glass will shaped and eventually it will break and all the while the game keeps the scoreboard of how many wine glasses you've broken so to summarise the game generates a randomly scaled wineglass and the user has to generate what pitch to break that glass and as they move their mouse around the screen the pitch either decreases or increases and when they get it right the wine glass breaks so the aim of the game is to break as many as you can before your breath runs out that's the basic concept I want to learn how to code this that's one of the worst rounds ever seen this felt like a huge undertaking so I decided to split the game up into its component parts and learn to code each of them hopefully pull all together at the end and I decided to start with sand since sound will be integral to the game I needed to figure out how to pitch a sound up or down based on the mouse position all right this is version 1 off the game progress is a little bit slower than I would have hoped how about the house today No am I still in my jammies yes there's the only thing I'd be in an entire pocket of peanut M&Ms yes but check better so this chord plays this mp3 file over and over again and based on where my mouse is on the screen at pitches it up or down is pretty cool progress was slow I knew what I wanted I just didn't know how to code it a lot of the time I would end up with code that actually runs but didn't produce the intended result that's not what I wanted it took me so long like 4 versions of the game just to get an image displayed on the screen it's loading the images but just a lower faster than I would have what and then I wanted to have that image shake when the mouse was in the right place and it took me so long to figure out ok I wanted the object to move around a little bit but that's perhaps a little bit too much this point I'm using images of fruit as a placeholder because I haven't designed any graphics yet the resources I mainly used we're a JavaScript class and the p5 website all these little details painstaking by was learning for a beginner by far and away the most frustrating and time-consuming thing was error messages and I got a lot of them the request status was 404 not fun how does that mean cannot read set volume of defined set up what uncaught reference error screen set volume is not what does that mean unexpected token cannot read property what I always get this error I didn't change anything unexpected end of empu and expect to talk it unexpected talking else error what error is it now [Music] after debugging so many errors I started to learn how the computer thinks a little bit actually the biggest change to my work for was when I went right back to basics when I had an idea that I wanted to implement rather than just jump straight onto the computer and start coding which would just result in hundreds of errors actually got a pen and paper and scribbled out my ideas this workflow worked so much better and by the time I got to coding things went way smoother I was beginning to figure this out alright we are version 15 off the wine glass game now and the mechanics and how this all works is kind of where I wanted to be for example you have a health bar and a breath bar and a score and you can shake the glass at the right pitch and it will break pushes the spacebar to restart the game and health going down breath going down keeping score it all works now most of the code is right and it's time to bring this game to life with some graphics and some proper Sun design doing the Sun design for this game I wanted to create a rich vibrant diverse soundscape that allows the user to really be immersed within the game we've added all these recording techniques and the maxim pot to create what I think is the most profound sonic experience in a game today take one tremendous stuff Mike tremendous stuff is really in the zone this is gonna be magnificent all right we need graphics now luckily I've been learning to use illustrator so I don't have to resort to that absolute drivel [Music] okay it is very very late but I'm gonna upload this video tomorrow so let's get these graphics baked into the game and also make a couple extra tweaks just to make the game a little bit more playable [Music] Oh all [Music] so ridiculous it's done I made it and learned to code it it's only 200 lines of code but it is mine I'd learn how to do it it's original like and subscribe Punk by the way you can play it too and for free of course I'm gonna leave a link in the description please go check out let me know what you think on Twitter or in the comments for this video in particular Skillshare came in really handy because there was a bunch of different things I needed to learn to pull this project together javascript obviously but also Adobe Audition to clean up the audio and illustrate our to design the graphics and I got pretty good at it too check out this logo I also made for the channel skill share classes are made by people who are not just experts in their field but really excel at teaching this means I don't have to worry about crappy unclear audio or really confusing instructions I can just jump and learn what I need and then get back to creating skill show now has more than 25,000 classes like these available on the platform which means that you can learn whatever you like perhaps a skill just to better yourself or maybe a skill that you need to learn for work I teach a class on Skillshare - it's about learning and how to optimize your process to reduce frustration increase your odds of achieving your goals and speed the whole process up I think one of the things people struggle with when learning a new skill is that feeling I've just wanted to quit early when they first encounter difficulty this class has a bunch of strategies that I use to mitigate against that and prepare for that Lo and the learning curve you can check out my classes are any number of the 25000 available for free using the link in the description which will get you two months of Skillshare premium for free hurry though that offer is only available to first 500 people so if you want to take on an ambitious project like this that requires a little bit of knowledge from a bunch of different disciplines then give Skillshare a go use the link in the description to get two months for free and there's no commitment to carry on after that offer period and so you're free to have a browse around and see if it suits you and by doing that you'll also be helping out the show thank you very much for watching I'll see you next time peace

Channel: Mike Boyd

Views: 1,807,904

Rating: 4.9560924 out of 5

Keywords: mike boyd, learns, learn quick, javascript, p5, game, coding, program

Id: s12npdDmGUc

Length: 15min 53sec (953 seconds)

Published: Sat Feb 02 2019