Guide a frog across busy roads and rivers. Mark Vanstone<\/strong> shows you how to code a simple remake of Konami\u2019s arcade game, Frogger.<\/em><\/p>\n Konami\u2019s original Frogger: so iconic, it even featured in a 1998 episode of Seinfeld.<\/p>\n<\/div>\n Why did the frog cross the road? Because Frogger would be a pretty boring game if it didn\u2019t. Released in 1981 by Konami, the game appeared in assorted bars, sports halls, and arcades across the world, and became an instant hit. The concept was simple: players used the joystick to move a succession of frogs from the bottom of the screen to the top, avoiding a variety of hazards \u2013 cars, lorries, and later, the occasional crocodile. Each frog had to be safely manoeuvred to one of five alcoves within a time limit, while extra points were awarded for eating flies along the way.<\/p>\n Before Frogger, Konami mainly focused on churning out clones of other hit arcade games like Space Invaders and Breakout; Frogger was one of its earliest original ideas, and the simplicity of its concept saw it ported to just about every home system available at the time. (Ironically, Konami\u2019s game would fall victim to repeated cloning by other developers.) Decades later, developers still take inspiration from it; Hipster Whale\u2019s Crossy Road turned Frogger into an endless running game; earlier this year, Konami returned to the creative well with Frogger in Toy Town, released on Apple Arcade.<\/p>\n We can recreate much of Frogger\u2019s gameplay in just a few lines of Pygame Zero code. The key elements are the frog\u2019s movement, which use the arrow keys, vehicles that move across the screen, and floating objects \u2013 logs and turtles \u2013 moving in opposite directions. Our background graphic will provide the road, river, and grass for our frog to move over. The frog\u2019s movement will be triggered from an In our Frogger homage, we move the frog with the arrow keys to avoid the traffic, and jump onto the floating logs and turtles.<\/p>\n<\/div>\n For all the other moving elements, we can also use Pygame Zero Actors; we just need to make an array for our cars with different graphics for the various rows, and an array for our floating objects in the same way. Handling the logic of the frog moving across the road is quite easy; we just check for collision with each of the cars, and if the frog hits a car, then we have a squashed frog. The river crossing is a little more complicated. Each time the frog moves on the river, we need to make sure that it\u2019s on a floating Actor. We therefore check to make sure that the frog is in collision with one of the floating elements, otherwise it\u2019s game over.<\/p>\n There are lots of other elements you could add to the example shown here: the original arcade game provided several frogs to guide to their alcoves on the other side of the river, while crocodiles also popped up from time to time to add a bit more danger. Pygame Zero has all the tools you need to make a fully functional version of Konami\u2019s hit.<\/p>\n Here\u2019s Mark\u2019s code, which gets a Frogger homage running in Python. To get it working on your system, you\u2019ll first need to install Pygame Zero<\/a>. And to download the full code, go here.<\/a><\/p>\n<\/div>\n You can read more features like this one in Wireframe issue 27<\/a>, available now at Tesco, WHSmith, all good independent UK newsagents, and the Raspberry Pi Store, Cambridge.<\/p>\n Or you can buy Wireframe directly from Raspberry Pi Press \u2014 delivery is available worldwide. And if you\u2019d like a handy digital version of the magazine, you can also download issue 27 for free<\/a> in PDF format.<\/p>\n Make sure to follow Wireframe on\u00a0Twitter<\/a>\u00a0and\u00a0Facebook<\/a>\u00a0for updates and exclusive offers and giveaways. Subscribe on the Wireframe website<\/a> to save up to 49% compared to newsstand pricing!<\/p>\n<\/div>\n![\"\"](\"https:\/\/www.raspberrypi.org\/app\/uploads\/2019\/11\/frogger-screenshot.png\")
<\/p>\nFrogger<\/h2>\n
Code your own Konami Frogger<\/h2>\n
on_key_down()<\/code> function, and as the frog moves, we switch to a second frame with legs outstretched, reverting back to a sitting position after a short delay. We can use the inbuilt Actor properties to change the image and set the angle of rotation.<\/p>\n![\"\"](\"https:\/\/www.raspberrypi.org\/app\/uploads\/2019\/11\/Screen1.png\")
<\/p>\n
In our update()<\/code> function, we need to move each Actor according to which row it\u2019s in, and when an Actor disappears off the screen, set the x coordinate so that it reappears on the opposite side.<\/p>\n![\"\"](\"https:\/\/www.raspberrypi.org\/app\/uploads\/2019\/11\/wf27-code.jpg\")
<\/p>\nGet your copy of Wireframe issue 27<\/h2>\n
![\"\"](\"https:\/\/www.raspberrypi.org\/app\/uploads\/2019\/11\/01_WF27-FLAT.png\")
<\/p>\n