What I expect to happen: [The student wants to be able to click on the dollar bill one time and have it turn into a basketball. Then use World.mouseX and World.mouseY to grab the ball and carry it over to the basketball hoop in the Court to score a point in the card game. ] What actually happens: [Upon clicking the dollar bill, the pre-clicking value is being added as it should ( as noted in the debugging text…however, the basketball will only show up for a moment and then disappear. It will not stick around long enough for them to be able to play the game or drag the ball across the screen. ]
What I’ve tried: [
mousePressedOver(Sprite) all by itself – this causes the basketball points to add up according the frame rate increments and makes the point additions out of control when the user carries the ball over to the basket using World.mouseX and World.mouseY.
Only by using mouseWentDown and mousePressedOver(Sprite) did it control the point increments as one point at a time. However, it broke the ability for the student to hover and carry the basketball. It fixed one problem, but created another problem. mouseDown(“Left”) && the x,y values of the dollar bill sprite – also created out of control points according to frame rate increments.
All the above examples are even after creating the variables at the top OUTSIDE of the draw loop:
var moneyClick = 0;
var gamePoints = moneyClick;
…to try to slow the point incrementing down and provide some kind of control.
Still both mouseDown(“Left”) and mousePressedOver(sprite) increment out of control. The only one that does not is mouseWentDown – it controls the point system correctly. However, it also, makes the period of time that the mouse is on the sprite so short the basketball no longer shows up or allows the hover of World.mouse.X or World.mouseY.
]
There are a few spots where the money is being drawn during game play. First of all, by putting the courtScreen function on line 52 inside the draw loop, it is being drawn every time the draw loop runs. This in and of itself will replace the ball with the money instantly.
Then, inside of the playBasketball function, it checks to see if a player is scoring (even if they don’t have the ball), but it then checks to see if they clicked on the money and then draws the basketball. However, it immediately exits out of that and starts all over again in the draw loop and the next time, the mouse hasn’t just barely clicked so it draws the money again.
So, the courtScreen function should only run once … right at the beginning to set the court up. It probably should not be inside the draw Loop at all.
Then, the student will need to figure out how to let the ball stay a ball for a little while before switching back to the money again. Perhaps a variable could be incremented right upon the clicking the money and when that variable has gone through a certain number of cycles, it could only then go back and allow the money to replace the ball.
There are a number of ways it could be done, but they will have to figure out how to stop the else statement on line 130 from running once the ball shows up … at least for a few seconds.
Alright, the game is much closer to being possible.
The ball is being kept in its sprite form by a timer. set to 8 seconds. I put the courtScreen(); function outside of the draw loop for the student to experiment.
There is now a new issue, when the user tries to come back from the first point, the dollar bill goes away and will not allow the returning user to click on it again to be able to transform it into a ball as it should again. Each point earned on the 2nd screen, should initiate a reset when the user returns to the 1st screen to try to score again.
Inserting new World.mouseX and World.mouseY hover coordinates for when the mouse is over the dollar bill to try to make it show up again does not work to make it visible again. It stays hidden.
…
Looking at things now, I don’t see that the timer is working as intended. It appears that the only way to get the timer to increase is by clicking near the bottom of the screen (which also increases the score).
They may be able to use the world.Seconds block to implement a timer …
Also, in order to get the ball to become money again, you would probably want to think about when should that happen. If a condition is met, and you want to change it back to money, you would probably call your CourtScreen function again to reset everything back to the start.
So, for some pseudocode that may help…
When Game starts, run CourtScreen to set the screen up.
When money clicked, run a function to change the money to a ball and start a timer.
When the timer has reached a specific point, run CourtScreen again to reset the screen.
When the goal is scored, run CourtScreen and reset the screen.
When 5 points scored, run winner function
This may require reformulating the code a little, but breaking it down into these different functions will make it easier to understand and easier to implement.
I hope this helps a little. I can see there have been some improvements and they are getting close, but probably just need to rethink exactly how it should work and then it will come together! Good luck and let us know if you get to another hurdle you can’t quite figure out.
The basketball Play function is adding a point in that function because it is the hidden mechanism when someone scores with the ball in their hand and proceeds to the second page, then a point gets transferred to the Second Screen to the Point System*
Originally the CourtScreen(); was in the draw loop but you shared it should not be in the draw loop at all, so it was taken out. It can be placed back in and experimented with again if that is your new recommendation.
*There already is a 5 point system set up for the function that has always worked. The bug in the program is just in the middle of the game.
After experimenting with the CourtScreen(); again and swapping out the Timer number values with world.Seconds block I will let you know the results.
No, the CourtScreen should not be inside the draw loop. It should be outside, but it should be called when necessary to reset the sprites. But yes, give it a shot and let us know if you run into more problems. Maybe I’m just not fully understanding what you are trying to accomplish.
As you probably saw in the last version sent to you, it had been placed outside the draw loop immediately after you asked. I made a point of not calling it inside the draw loop as it had been before to reset the screen when the user is coming back from dropping off the ball in the second screen, because of your earlier recommendation. If that earlier recommendation is no longer is important. I will go back to using it. I have put in world.Seconds and the CourtScreen(); in a few solutions and so far it is not resolving the issue. I will keep trying different things.
This kind of debugging is really hard and takes a lot of heads put together and a lot of ideas. I actually do appreciate the ideas and don’t expect the solution to happen all at once. I know what it is like believe me. Thank you for the ideas about the world.Seconds block. I will keep trying to work with it!
There is always more than one way to do something. I don’t think it works to have the CourtScreen inside the Draw Loop, but it can be called from the draw loop when it is needed (inside a conditional block). That way, the function is only called when it is needed and not every time the Draw Loop runs.
I was able to place the moneyClick into its own function and create a more effective world.Seconds timer. The effect got as far as creating an ability for the basketball to score one point exactly. The dollar bill will turn into a basketball, hover into the hoop, score one point and then come and turn BACK into the dollar bill again under world.Seconds. This is an improvement. However, it cannot continue on and do more than one point.
After, the first point, it will not turn back into a basketball after the user clicks on it again as a Dollar Bill sprite. Any final advice?
Each time it seems to improve more which is encouraging
Tomorrow when I try to help this student, this information will help resolve some of his issues. Any further advice on how to go up more than one point please let me know.
I played around a little with your code. It is starting to get better. In the version I am sharing below, I declared your count variable outside the loops at the beginning. Then, to get the ball to turn back into money, I made count = to the World.seconds only when the money was clicked. Then I make a further comparison between World.seconds and the timer to see how much time has passed. If it’s more than 3 seconds, I have it change back to money.
Ideally, you would also have it change back to money when someone scores, but I would leave that up to the student to struggle through.
Very nice! I love it and it fixed the world Seconds challenges in the draw loop with the money not returning, I made the code with slightly longer seconds and it allowed the complete game to run. I noticed the shortcoming of having the pre-click happening on the money as it turned into the ball is that it ended the game before the user actually scored the last hoop on the point 5. Now that we can actually test the full game.
I tried to fix this, by placing the point system into the hover so the user can only gain a point by putting the ball into the basketball hoop but it creates an out of control point increment. This was the same issue that happened before, which is why it was placed outside in the first place with a click mechanism from the dollar bill to try to work around that issue.
Do you know how the hoop world.MouseX and world.mouseY location can act as the hoop score for the game and not get wildly out of control? Or is it just one of those input events like mouseDown that would allow continuous reading by the computer, so it is not a good way to input the score?
Here is the new game based on the combined code changes (you can see the hover input event with the ball into the hoop creates scoring issues right away):
The latest improvements made to the other game are adequate I think for his project, I just think it would be nice if the score effect could be transferred to just the basket and not have to be made through the dollar bill.
If I understand your world.MouseX and world.MouseY question … If you only depend on the mouse position, it is going to quickly augment the score (as it is doing in this version) over and over again …
You will need to figure out how to add only 1 point and then send the ball/money immediately back to its spot so the collision stops… it may help to add an ifTouching block … if ball isTouching hoop, immediately move ball back to bottom of the screen and then add the point.
I haven’t looked closely at how you would do that with your current code, but guessing it could be done.
In this version I also had to crop your hoop and backboard as they had a lot of empty space around them that was touching the ball even though it doesn’t look like it…
Not sure it’s perfect, but see if it gets you closer…
Thank you, it is interesting that one sprite would work with the same properties, but another would not? JavaScript functions like spriteIsTouching and relocating a sprite to a new spot on the page via x,y properties should work on either the ball sprite or the hoop sprite. It is nice that you found a way around the issue though…thanks!
I added a World.frameRate change to the different functions to allow the score screen (2nd Page) to return to the game. It is not perfect since if the user does not hover away back down to the bottom of the screen within 6 seconds, the old text starts bleeding through. But it does basically give the score tracker back.
I added a console log into each function to help with organizing what is going on this program to enhance debugging.
There still seems to be a stream of images from the ball that track across the page as the user drags the ball using World.mouseX and World.mouseY. **I find this puzzling since the student has properly placed a background behind the sprites. ** The background should be drawing behind each new animation frame and preventing the smearing image phenomenon. I tried to increase the World.frameRate in the moneyClicked function to improve fluidity of the movement of the ball. However, it does not fix the effect. I am ready to accept the game as is with its slight imperfections for the boy I will see him next week and he has plenty of new concepts to work on.
It would just be nice to know for the future to learn in case this issue comes up again. Thanks again for your feedback on this project.
Thank you, it is interesting that one sprite would work with the same properties, but another would not? JavaScript functions like spriteIsTouching and relocating a sprite to a new spot on the page via x,y properties should work on either the ball sprite or the hoop sprite. It is nice that you found a way around the issue though…thanks!
They do work on both sprites, but in this case, the ball is continually brought to the mouse location by the other code, so I can move it, but it is sent back to the mouse pointer almost immediately, so it’s easier to move the hoop.
I saw the ball issues as well. I see it as lagging for some reason. I don’t have an immediate answer for that. But, I do think it is a good idea to let him see some of the changes and perhaps he will discover a workaround.
