Free Programming Tutoring/mentorship this Friday (June 19)

My company has decided to give all its employees this Friday (Juneteenth) off for a day of volunteering and charitable giving. Since the FreeCodeCamp community has done a lot for me and helped me get my first programming job, I thought I would pay it forward by helping others on this site who are learning to code.

I am mainly a front-end developer and am experienced making web apps in Vanilla JavaScript, React, Vue, Redux, and I’ve worked with probably dozens of other popular JS and CSS libraries at some point.

If you would like some help learning any of the above, send me a message, and we can arrange a time. You should have something that you would like to work on, either an exercise or your own project, and we can do a screen share over Google Meet. I will be available during work hours (EST).

12 Likes

This is so nice of you and I would love to take you up on your offer. Unfortunately, I have to work on Friday.

I want a little help with getting an opportunity to participate in a React project. I have a demo project that shows that I am familiar with the basics of React.
My spoken English is not good, so I prefer the communication to be a chat, depending on your time.
Your idea for help is very nice and collegial, let every developer remember where he came from and help those after him :grinning:

That’s fine if you want to do it by chat. You could also send me a link to the React code and I can review it and write some feedback, if that’s easier for you. Just let me know.

1 Like

Maybe another time then, when you are off work.

Oh wow - I’m trying to customise a pac-man game tutorial and I’d love some help and feedback?

Help: I need to figure out how to match the styles of the Gameboy NES version of Pac-man, and I’ve gotten a bit stuck.

Feedback: I’ve managed to figure out how to use sprites (!) and I’m working on mobile-friendly controls.

We could either set up a time to work on it or if you have a repository set up, I could take a look at that and send you feedback. Matching the styling of a gameboy game actually sounds pretty complicated. Depending on your approach, you might want to find the original sprite sheets for the game which are often available online, rather than recreating them from scratch. Anyway, that’s what I would do as I have limited artistic ability. As for the controls, I have a couple of ideas for how to make it mobile-friend, either using gestures or based on the quadrant of the screen the user is pressing. But maybe you have an even better idea. By the way, are you using a game engine or writing it from scratch?

Hiya!

Yeah the NES is hard to translate but I’m giving it a shot! It’s available here https://clairevanblerck.com/games/gameboy-pacman/ and I have a tetris game here https://clairevanblerck.com/games/gameboy-tetris/ (1) which shows the beginnings of my mobile-friendly controls attempt. I love your gestures/quadrant ideas for pac-man!! There’s literally no space for controls when viewed on mobile lol

I snapped up a spritesheet from the web, yeah :smiley:

I’m not using a game engine, no, but I might try Unity in the coming weeks. My goal with these two games was to try learn JavaScript through game tutorials, and it’s really helped a lot.

(1) My tetris game is also far from finished lol

It looks really good already, but I will post some detailed feedback after I look over the code.

1 Like

I can’t do any video calls or anything, but will you be able to look at some of my web pages and give me feedback if I send them to you through this forum? I am learning to be a front end developer. Right now I am following Youtube tutorials to practice html and css because i lllooovveee html and css.

Wow these is so lovely, i will make sure i make out time on friday. Pls what time are starting it

Yes I can take a look.

1 Like

Probably 10am-6pm EST. Let me know when is good for you.

https://codepen.io/hopefulcodegirl/pen/mdVyBdW I have 943 views on this one.

https://codepen.io/hopefulcodegirl/pen/vYLEpxY The JS on this one was a little hard. I am not that great at JS.

https://codepen.io/hopefulcodegirl/pen/PoPVOgv

https://codepen.io/hopefulcodegirl/pen/PoPRGog

https://codepen.io/hopefulcodegirl/pen/wvMaeLv

https://codepen.io/hopefulcodegirl/pen/YzwXzye

https://codepen.io/hopefulcodegirl/pen/dyGGMGB
I am having trouble with last one because the rain looks terrible in some of the views like full page view

First of all your pac-man game looks really good already. My initial thoughts on how you can further improve it:

  1. The code could be organized a bit better. The code for the controls, scoring, movement, etc is all kind of mixed together. This is fine for a small program, but once the program gets to be more that a couple of thousand lines of code, it will get unmanageable, and in this case, it’s already causing some bugs. So I would think about how to separate the concerns of each function/code section. For example, all of the code for controlling the ghost’s movement and behavior could be added as methods on the ghost class. Likewise, you could have another class that deals only with pac-man’s behaviors. Then you could have a main update function that is called every frame, who’s job is to keep track of the overall state of the game and call the methods on pac-man and the ghosts to update their position, and then update the score based on data returned from the pac-man or ghost methods. The important thing is that each part of your code is responsible for something specific, and it cannot change values (aka state) or call functions unrelated to it’s purpose, otherwise it’s easy to end up with all kinds of weird bugs where different functions are changing the same values at different times, and it becomes impossible to reason about what your program is actually doing. I should note that structuring a large program well is really hard, and even most professionals struggle with it.
  2. I would recommend using Window.requestAnimationFrame() ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame ) to update your game loop instead of using setInterval. setInterval is not guaranteed to keep accurate time, and will lag if the program is still running other code when the interval is reached. requestAnimationFrame will be called reliably each time your browser refreshes (usually 60 times a second). You can update everything in the game accurately by passing a callback to requestAnimationFrame, and checking how much time has passed since it was last called using the timestamp that is passed into the callback, and subtracting the previous time (refer to the example on that page).
  3. If you are able to implement #2, then getting smooth movement for pac-man and the ghosts shouldn’t be too hard. Rather than moving them immediately from one grid cell to the next, figure out how many pixels they should move per second and then move them a certain percentage of that each frame based on the time difference between frames and the distance between cells. For example, if there are 100 pixels between two cells and you want pac-man to move 1 cell per second, and the time since the last frame was 30 milliseconds (.03 seconds), you can calculate that you should move pac-man .03seconds/1 second * 100pixels = 3.3pixels on that frame. Since pac-man can only change direction when he is on a grid cell, you can check each frame to see if he has arrived at a cell (you might want to use Math.round to round to the nearest pixel), and ignore keypresses that happen when he is between cells.
  4. This is a bit advanced, but in the original pac-man, each ghost has different behavior: some move randomly while others actively pursue pac-man. If you learn a little bit about pathfinding algorithms or even just use a library, you can make the behavior of the ghosts much more interesting. This library might be good: https://github.com/qiao/PathFinding.js/
  5. For mobile friendly controls, I think there are two ways you could try:
    1. detect the position that the user taps by setting a mousedown event listener and checking the clientX and Y: https://www.w3schools.com/jsref/event_clientx.asp. If the tap is near the top of the screen, move up, near the bottom move down, etc. (you can get the window height/width using window.innerHeight/innerWidth)
    1. Use a library such as this one to detect gestures: https://zingchart.github.io/zingtouch/
      If you use the swipe function in that library, you can figure out the direction to move pac-man based on the angle of the swipe.

Let me know if you want me to explain any of the above points in further detail.

1 Like

Hi, your pens are very nice and you have a great visual sense. Since you were having trouble with the last pen, I rewrote the rain animation using html canvas: https://codepen.io/doug012310/pen/rNxjWmO

I was unable to get it to loop correctly using the rain image you had so I thought a more dynamic approach would work better.

I wrote detailed comments explaining when each line of JS does, but let me know if you have any other questions. You should be able to adjust the rain size, speed and frequency to achieve any type of rain effect you need.

My code is based on this code which I cleaned up a bit: https://www.html5canvastutorials.com/advanced/html5-canvas-rain-effect/

As for your other pens, I think they look great for the most part. I think some of the colors clash on your portfolio page (like with the title and background for example), so I would try to find a simple color scheme that has good contrast. Also some elements could use more spacing so they have more room to “breathe”, like the codepen embeds for example. Besides that, I would recommend investing more time in learning JS if you plan to do this professionally, since you are already very good at HTML and CSS.

1 Like

Thank you. I must go to bed now, but I will look at everything tomorrow.

This is brilliant!

I’m sure it’ll take me some time to implement, but having this kind of feedback and direction is a huge motivation!

Thank you so much. I’ll let you know when I’ve made progress :smiley: :beers:

1 Like

Thanks for your time. This is my React project. React project
I am waiting for an opinion on the written code. Is it possible with such a demo to win participation in a project with React? If that’s not enough, what does it take to get a chance to show what I’ve learned?

I’m not exactly sure what you mean by your question:

Is it possible with such a demo to win participation in a project with React? what does it take to get a chance to show what I’ve learned?

But anyway, I will look over your code and give you feedback.