Coding Challenge #3: The Snake Game

Hello and welcome to what today will be a 15 minute coding challenge! I am going to attempt to program, from scratch, in JavaScript, the snake game. I don’t think I’ve ever done this before, perhaps I have I’ve certainly made stuff that resembles it. But if you’re not familiar with the Snake game, pause this video, Google it, play it – I think you’ll find it. Okay, so let’s just get started. I kinda want to spend some time getting to know you But I can’t because I only have fourteen minutes and thirty seconds right now. So the first thing I want to do is—and I’m in a JavaScript framework called p5js— And p5js requires a setup function and a draw function. And the first thing I’m going to do is just make a canvas. That is, I dunno, 600 by 600 pixels. And we’re going to go over here to look at this page There we go, there’s a canvas there. It’s empty. Boy, I’ve got to move faster than this. And, now we’re going to give it a background. I just want to make sure things are up and running. So, I’ve got a canvas. Maybe I need to move this over, it’s kind of under the timer but whatever, you get the point: There’s a canvas. My timer is in the way. Okay, that’s fine, it’ll get better next time. So, Uhm— So, let’s see what we want to do here. So, I want to do this with some object-oriented programming. kAnd I’m going to write something called a constructor function I have some tutorials about constructor functions if you don’t know what that is. And what I’m going to do is make an object that has an x and a y And I’m also going to keep track of an xspeed and a yspeed. Because, what I want— and let’s just make this one What I want is for this snake object to have some functions Like an update function And what happens in that update function is that x value simply changes by the xspeed value And the y value simply changes by the yspeed value Now, I want another function And I’m going to call it show Because what I want is for… Uhhh, I’m going to draw—

100 thoughts on “Coding Challenge #3: The Snake Game”

1. The Coding Train says:

If you want to know what happened during "technical difficulties"! https://youtu.be/yUO2bWfBgN8?t=1253

so funny wkwk

3. Glendriv says:

Ty help me alot with OOP concept.

4. NERDIOUS GAMING says:

Couldn't hold my self from subscribing and Liking this Video

Thanks a bunch, twas sooo great and fun

5. Melzarts says:

I tried this;
}

function draw() {
background(51);
}

function Snake() {
this.x = 0;
this.y = 0;
this.xspeed = 1;
this.yspeed = 0;

this.update = function()
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}

this.show = function() {
rect(this.x, this.y, 10, 10);

but I keep getting the error "unexpected token: this"

would you mind telling me what I'm doing wrong?

6. Eddie says:

I like that shirt.

7. Aidan Lawrence says:

I can’t even Skript Minecraft 🙁

8. Smiling Alpaca says:

I can't believe the fact that I've watched this vid a few months ago without any knowledge for programming and now I'm here again realising that he's actually using Processing, that I'm actually learning with

9. Riccardo Filippone says:

im at minute 13:10 and i run my sketch and console say me Uncaught TypeError: Cannot read property 'eat' of undefined
at sketch.js:32
(anonymous) @ sketch.js:32
this the line
if (s.eat(food)){

pickLocation();

}

10. Coder Desk says:

you always forget the this. and i always forget my semicolons

11. Rogelio Rivera says:

Do you know how he runs the script on atom?? HELP

2019 anyone ?

13. [6iXsix6]Charlie says:

software? and what device.

14. General relativity says:

I wanna learn to program now, this looks awesome

15. Amber Burroughs says:

hilarious banter

16. Thanh Tuấn Lê says:

so fun man ! =))

Got motivated by you, and started javascript, just because xD i thought i could do a easy exercise for practice and started by developing tictactoe. To difficult, just gave up. What about you do it? 😃 great job you doing, by the way, you should be teaching kids 😄

18. Vain's Memery says:

What is the language? Python?

19. Michael Cunnningham says:

This Dude is a nut, but I like him. Entertaining vid.

20. snusk monster says:

Lol im into programming and i forgot which direction X and Y is lol XD

21. Korok says:

when ur looking for ur tail everywhere in ur code just ctrl+f x)

22. Spriggan King says:

The program runs but I cannot control the snake

23. Iamzero says:

Though of sharing my implementation https://github.com/bemineni/lotus-naga/blob/master/src/naga.js
Demo – https://bemineni.github.io/app/lotus_naga/index.html

24. maxijomo says:

My else isn't working

25. Fresh says:

Didn't need to use comments, respect.

26. Pro Odermonicon says:

His best trick is it's obviously prerecorded

27. hassan omer says:

this.tail
this.tail
this.tail

28. Luke Lopez says:

i copyed it exactly and it didn't work

29. Maurice Williams says:

Lol! I love all of your videos.

30. Donica_Twitch says:

Hey Code Train 👋 I am a 13 year old kid that has some questions on programming and I have also been having some trouble . I would be so thankful if you would help me because I have been trying to find my problem but I have found nothing and I was hoping to get some advice from you Thank you 😊

31. Ab dremo says:

I think it’s much more easier with SFML/C++
Nice video btw

32. Willy dermawan says:

What should i learn for making game ? C++ or python or java or something else ?

33. MrCreativity says:

How is he able to actually see his JavaScript code working in the other window he pulls up?

34. alak dam says:

You are too smart for me to understand.

35. azim mahina says:

anyone 2019

36. shoaib akhtar says:

Hello

37. shoaib akhtar says:

Please do GTA 5 and PUBG next

38. Fizol ! says:

What a long second

you are an inspiration to all programmers who lack motivation

40. Mizlabeled TV says:

well done, thank you. Great old game. Remember putting it on the Ti 8x?

41. johnny boy says:

Funny thing is i don't know jackshit about coding but i kinda get the logical stuff coz they taught us advanced coordinate geometry in 11th grade.

42. Fox dog Fox says:

Can you cut to game with processing on Java 🙄😁

43. Mr.Weebster says:

This cured my depression

44. Abdullah PC says:

Sir,
Which language are you using

45. isaiah trujillo says:

420

46. ChachA Medo says:

p5 ???? i need this

47. ayoch chan says:

Make it with html next

48. Noah the mighty says:

There's no way you'll find this comment after 3 years

49. Siddhant Bajaj says:

i love you so much

50. nguyen cong huy tuan says:

is this python

51. pawan mishra says:

Thanks to you, I made my own version of snake

52. Cheshmish Khan says:

Sir how i will learn programming

53. Tessuttaja says:

I don't know anything about coding, but I find it interesting and fun and now I want to learn it. Also if it would be possible I would try to copy this but add some changes because it would be a good practice and for some reason I understood almost all of this xd

54. Wyatt Marsiglio says:

What is on the first line that is covered by the timer!?

55. pedrodenice says:

I'm trying to learn to code. The basics r so boring but I learn so much for these video your fast pace and explaining as you go really keeps me watching

56. Khanh Nghiem says:

I would have a mental breakdown with all those bugs

57. Noor Wachid says:

coding time = 10%, the rest is naming variable.

58. Alejandra Cabeza says:

it's incredible how this guy films something in 2016 and make it look like 1998. awesome content tho. 😀

59. Gamer FC says:

Which app do u use

60. Bilal B says:

I need help

nothing is shown on index.html I have write code according to video but nothing happens.

61. Pruthiraj Tripathy says:

This looks fun!

62. Jaagrav Seal says:

You are the best!!!!

63. TON_Blurz says:

What pogram did you use?

64. kosiak10851 says:

you failed in time.
thumbs down.
next time speak less, don't waste time

65. C Ret says:

How many this in this code ?

66. Alfredo CH says:

Awesome! I'm learning more here than from my teachers…

67. Maverick Berkland says:

Quick Question, how do you run this?

68. Jonny Upchurch says:

CreateVector is not defined, what am I doing wrong?

69. person the human says:

ive tried before by copying the heads last positions in an array as long as its body.

70. aXxelus says:

I was wondering, since using global variables is kind of meh, how can I avoid it while still using keyPressed() function. How can I get to the snake without global variable. Is there any way ? Thanks!

你为什么还有这么多头发？

72. Learn SFi says:

Please can you code the schelling's segregation model using java please!!!! You will save my life 🙁 Help!!!

73. Mohd Suhel Mansoori says:

This guy is crazy unstoppable.
U r osam coder never seen like u before.

74. Sunggaki Channel says:

i hope my teacher in my college teach me coding like this

75. Rasla says:

Hey! Super

76. Tal Moore says:

"You'll see how long this video is and that's how long it took."

77. Thiện Nguyễn Ngọc says:

"hold on"

78. Sugam Rijal says:

Hello friends, I have been teaching myself Python, I need beginner coding problems links.

79. Mo says:

i don't see you are calling functions, only defining them.. sorry im noob. can you explain how?
actually i had tons of questions in the first 60 seconds. but impossibe to ask all of them lol.

80. icezee minekykung says:

C or C++ or C# ?

81. Ltugamerkasstep Stakeliūnas says:

Jesus you're amazing Im a literal newbie to programing and I understand what you're talking + you make everything look so easy

82. Jv Rh says:

I don’t understand anything but I watched 3 times and still don’t understand 😂🤣

83. johnnie gilkerson says:

I'm having a problem with installing p5.js, it wont load error: Expected identifier, string or number
Code: 800A0404

84. Tamla Htoo says:

Why don't you use python?

85. Sunday BG says:

Python is easier ._.

86. Walney moreira klein says:

87. Walney moreira klein says:

please speak game chess ou damas ? tnhks

88. Alan Zulfikar says:

21:55 why another day ?

89. vrooomize says:

90. DARLING dare says:

Dude what coding software do you use

91. Bar X says:

92. 0119325 says:

1,5x speed works

93. Evan Roderick says:

is it possible to do this in processing?

94. Doc Brown says:

Coding Challenge #3: The Kevin Durant Game

95. Extreme Titan2 says:

I've taken my time to learn python and I really enjoy it but java looks great as well should I learn java next?

96. Gopi Talari says:

this = open("The_Coding_Train.txt", "r")

Hello Snake

97. MegaMacMan says:

JavaScript is starting to look easier than c++…

98. ishak programing is my life says:

Next time you should code god of war 5 🙂

99. Eduard Voinea says:

Great vid 👍

100. Argy Pournaris says:

Man you are my hero!! You have coded so many things so far!!! Thank you!!!!