Hey peeps!
Im working on this college project and I’m having trouble trying to switch between two different image files for a game.
It’s supposed to switch between a Rocket (with flames) when clicking the accelerate button, and a Rocket (without flames) when not clicking the accelerate button. similar to a flappy bird game.
Needless to say, I’m probably missing some element or function that I haven’t figured out yet.
I should also mention I looked at tutorials to make this game from W3 Schools.
Can you upload your files to an online code editor like Codepen or Replit? It’s much easier to help when we can see the code in a text editor as opposed to a screenshot
Hmmm, I signed up for both but neither seems to be working with what I have.
What if I send a zip.file with all the contents I have for this project? will this suffice?
No, that adds too much hassle. A better approach would be for you to paste relevant code snippets as needed. Is your flappy bird game’s visuals built entirely on the canvas, or is it using HTML elements?
That “component” function is nasty!!!
You shouldnt try to put so much extra functionality into one function, especially when it results in the functions parameter names becoming meaningless. A function should typically have one function and be obvious what it does (usually by its name) and what the parameters do. The other thing that bothers me about that function is the use of “myGameArea.context”. Typically a function/component/thing shouldnt know of things that exist outside of itself. This should be passed into it from somewhere/thing outside of it that follows this rule. So in this case I would have made this.update have a parameter ctx that is passed to it by updateGameArea (which i would have attached to myGameArea as update) and ctx would be attached to myGameArea. Why?..ummmm, errrrr, ummmm, I kinda forget all reasons but it stops you making spaghetti and allows the reader to follow the flow of code easier. You should have three components, Player, Wall (obstacle) and Score. If they have enough code or variables that they share then you could have a base component that they inherit from with Class’s or prototyping…
You prolly would of had a problem running this code on Codepen because it doesnt (as far as I remember, been a LONG time) allow the uploading of images unless you have a paid account, normally you have to put the images in the html or css as base64. The other one does tho so you should of been able to put your code there.
W3 schools is cool and all, but in the past it was known that it has bad advice and out of date (I dunno about now). Always try to look at the MDN first.
As far as how to swap images…
Id have a “draw” function on Player. The function would have a parameter that would accept a string. The string would tell it what image to draw. The images would be defined by a function on Player or in its initialization (constructor) function using a parameter that would accept an array of objects and this array would be stored on Player. Each object would be like {name:“somename”,src:“urlOrBase64”}. How to display this image is in the code your have.
Warning! Disclaimer Warning!
Im an idiot with EXTREMELY bad memory!! As such I cant remember jargon and details. I make mistakes a lot a joke that I am the perpetual noob. I havent coded in a looooong time and as such have forgotten a lot. Im here and elsewhere trying to help others as thats my fav way of triggering my memory and getting back into coding. Take everything I say with a pinch of salt and touch of chilli.
OH! And Im not big on giving code to students until I see their code and it shows that they attempted the thing they are asking about. Im happy to help you correct your work, but not do it for you.
Sounds like there’s a lot of work to do here!
There is a bit of html, but as you can already see the CSS and Javascript are all put in one file.
I also put the code into Replit. and here’s the invite link: Join AnaeliRivera's "LittleRocketGame" - Replit
Caution, I do not know this online code editor very well. I primarily work with Adobe Dreamweaver. Not sure why it isn’t displaying the output as expected, but hopefully you know more then I do & can explain whatever went wrong so I could do better
Ok Ive had a look at it seems that one problem was yours (just a little prob where you didnt know how things worked) and another that is their fault.
The replits starting page has to be index.html (I think, couldnt find a way to change it) so I renamed the file to that.
But then it still didnt show your work. The problem here turned out to be that the site (replit) is adding a canvas to the page that takes up the whole page and is over your work. In your style sheet you are targeting all canvas’s including this one and then setting the background colour which makes it stop being transparent. So I added an ID to your canvas in the code and changed the css to target that.
Also when you are loading your png it would fail because things are case sensitive, so I changed the name of your files so that png isnt in capitals.
Ive never used the site either, seems pretty cool. What I LOOOOVE is the ability to add comments/chat to the code, great for helping people and wotnot. What I dont like is that it kept disconnecting but that could be a prob at my end, so meh.
Thank you so much!
I have compared the your improved code with the old code and saw what had been done to make the game function properly.
And thanks for confirming that Replit’s starting index page can’t be changed. I wasn’t too sure myself, ill just go with whichever works for now lol.
I noticed Replit allows users to collaborate to work on code and thought it was pretty neat as well!
I will continue to figure out how to allow the game piece to switch between image files. I’ll look at W3 Schools for reference, but this time ill keep an open mind and try to check the MDN often.
Although it goes without saying I still need some assistance with this. I realize its messy code, especially for a simple game.
funny you should ask, there were none.
this was meant to be a colaberative project with everything we learned. (not very much about games)
But I simply wanted to take the extra mile. I would create a series of simple games (like tic-tac-toe and a guessing game) and add them to our own little website; like a final project. This game however proved to be a challenge.
If you are interested in a guessing game, here is a numbers version that also comes with a cool badge if you share your version here: Guess the Number Game
while trying to copy the game into a web page I have already prepared, the game canvas disappears. it’s only this game that I seem to be having difficulties with.
It worked perfectly with the other games, not positively sure what could be causing this dilemma. https://replit.com/join/wpfscgries-anaelirivera
Which file should we be looking at? Your index.html seems to be incomplete, for the closing HTML and BODY tags aren’t there. May be a copy/paste error when moving content from one file to another?
Ah! In that file, you are missing the canvas element altogether. Somewhere in your HTML, you need have a <canvas id="something">.
All of those files just disappeared while I was writing this, so I’m guessing you are making some changes. Once those files are back, add the Canvas element in to avoid it from disappearing
The reason nothing was happening was because you moved the onLoad event from the body to a section and that doesnt work.
If it had of been on the body element still the JS would have run and the canvas would have been added. Kinda better for the canvas to be in the html code tho coz then you know where it is.
Ive made those changes and wotnot and put in a few comments to show where and what.
Here you go… RocketGameInWeb - Replit
PS Pretty page …altho the main font is a little sharp
Thank you so much for fixing up my code! I was also able to switch image files as well! This has been a fun learning experience!
Thanks again you two for your help!
2 Likes
Creating engaging and entertaining content for designers and developers since 1998.
