Welcome back! Today, I present an application and its full source code of course that’s global! Yes, world-wide! Before we delve into it a little backstory about the idea of this “game”…
Backstory:
I had this idea about 10 years ago, where players would connect over the internet world-wide to my page and send “missiles” to each other by clicking on a target location. The map would be true and would include all major countries in a high-def canvas. The scores would be kept for anyone to see, anytime. The logistics of the server, authentication, score counts, synchronization and collaboration are not trivial and not even considering the security, monetary aspects of it. So, I eventually got busy paying mandatory bills, and never had the time to explore it, and I doubt I ever will. (If anyone’s interested in taking it forward, I’m willing to do a brain-dump about the game play and details.)
So, as I’m dusting off some old Scratch code, I figured how about I write a quick game based off that, a much lighter version (Scratch doesn’t support that level of complexity anyway) mainly for education? So this was born. However, I ran into a couple of problems even on this much lighter version…
Problems/Limitations:
First (technical), because the Scratch game canvas size is limited, it’s impossible to detail countries of the world and have users actually click/interact-with them. So, I had to only pick continents, not individual countries.
Secondly (non-technical), because of the audience and community…no war games 🙂 i.e. NO MISSILES 🙂 So, I opted for a shark (to send Bites) and a heart (to send Love) to target continents.
Thirdly (technical), even with just the continents (that’s 7!), my game wanted to track metrics on # of Love sent during the game. That means 2 variables for 7, a total of 14 parameters that I wanted to keep on the cloud…so that, anyone, anytime can see the latest and real-time metrics! However, Scratch allows up to 10 variables in the cloud (they have to pay for their servers and storage! And Scratch is free, so)…so, I opted to store only 2 total parameters: World-wide Loves set to-date, World-wide Bites set to-date. Yes, they’re on the cloud and whatever you see on the game page is the latest.
On To The Game:
Here’s a screenshot.
How To Play And Get Full Source Code: https://scratch.mit.edu/projects/280200104/
CAVEAT! Because this game uses Cloud storage (graciously paid for by Scratch team of MIT), you’ll have to sign into your Scratch account. If you don’t want to create one (it’s FREE, no ads/spams), you cannot run the program. Once you create an account, you don’t have to do anything other than logging into games that use Cloud storage (many of the application contributors like me, do).
Game Instructions: After clicking the green flag…
Drag the heart and drop it on any continent to give “Love”.
Drag the shark and drop it on any continent to give “Bite” (not hate, but not love ;))
Press and hold the SPACEBAR to see names of continents (in case, you forgot ;))
To stop “biting” or “loving”, drop the shark and/or the heart on open oceans (white area) or to the holding area (the gray box on lower left).
Press ‘s’ key on keyboard to turn sound ON/OFF. By default, it’s OFF.
Pressing the green flag will reset the game but the total Bites and Loves will NOT reset as they’re world-wide and in the cloud so everyone can see.
(There’s a key to reset that too but only shown in the code)
Game Play Video:
Here’s a short clip of the game in action. Works in any browser, any device (touch-screen/mouse, etc.).
Technical Features & Explanation:
See full source code at https://scratch.mit.edu/projects/280200104/ but here are some key points:
The backdrop is animated sliding back and forth. This is done by treating the background as a sprite…so using different images/costumes in a timer. It has 8 costumes in total.
The Cloud variables are at the top…their values remain even after you reset your game session, others will continue with the latest values stored in the Cloud. See code’s Variables section and their names are shown on screen.
There are 2 main sprites: Heart and Shark. Each has 2 costumes of its own. They come “alive” as soon as you click on them or drag them.
There are hints that they speak and for notification (of Love/Bite and target location), and there’s some basic tips at the bottom of the screen.
Sound can be turned ON/OFF via a toggle switch implementation using my custom variable name SoundON. Look for it in the code how it’s set to 1, and set to 0 so it works like a “flip”. If it’s 1, then set to 0 (by pressing ‘s’ key. This won’t work without a keyboard, softkeyboard will work though); if it’s 0, set to 1. Then I play sound effects ONLY if SoundON=1. (I get annoyed with continuous game-play sound, so by default I set to OFF).
The key thing that makes the target locations work is color-detection. Scratch has a really easy solution for this called <touching color?> which returns a boolean value…TRUE if it’s touching a color we specified in code, otherwise FALSE. So, by coloring each continent a unique color, I can easily test if a sprite is on that continent 🙂
The whole thing is in a big loop (one for each sprite) that does these among other things: check its color-touch status, do sprite animation, update scores (Bites or Loves counts), listen for key interrupts (e.g. ‘s’ for sound, SPACEBAR for labels, etc.). There are couple of empty code blocks I left out on purpose: 1) When the shark/heart is touching ocean (white areas), and when it’s in the holding area (dark gray box). It’s up to you what you want to do in those conditions, just plug in your functions there because I already created the placeholders in code.
Each sprite has a simple sound clip associated so they can be played when SoundON=1. Here’s a snippet of the Heart sprite code…it’s hard to read here because it’ll be long of a blog to scroll, so it’s just to give you a “feel”…I encourage you to look at the actual code and tinker with them in detail.
Conclusion:
Hope you enjoy the code and demo. You saw here how to use a cloud variable that’s always up-to-date along with some neat interactive tricks such as drag-n-drop, color detection. If you use any of this code, feel free to give proper attribution to me 🙂 Also, check out my other projects and more fun stuff (including explanations of various apps) on this blog site. Click on TagCloud terms on right to narrow your search by categories or just use the Search feature on my blog.
Happy coding!
