Welcome to Repl Talk

Posts
Pinned
Rules for Posting - Read me!
Some rules and guidelines to keep in mind as you share your great work on our boards: 1 - Be kind and courteous to others 2 - Make sure that any feedback you provide is constructive. 3 - Outside links are allowed, but you must provide the source. Ideally, things that you post will have been created on Repl.it. 4 - Avoid posting overly promotional material - the focus is, and always will be, a programming, learning, and collaborative community. :) 5 - Don't spam! Keep things SFW (Safe For Work). We may revoke your access to these boards if you are found to be in violation of any of these rules. Feel free to ask clarifying questions. Last updated 7/10/18 12:09 PST
63
posted to Share by timmy_i_chen (870) 11 months ago
Pinned
✨✨Introduce Yourself! 👋 ✨✨
Hi everyone! Use this space to share anything you want to share with our community - your name, where you're from, what you program in, what brought you here... whatever you're comfortable with! Can't wait to get to know y'all. 💖 Katya
79
posted to Announcements by katyadee (443) 6 days ago
▲
734
Brute Force Password Cracker
https://repl.it/@CyanCoding/Brute-Force-Password-Cracker I built the Brute Force Password Cracker as a fun program to test out passwords, and to test my knowledge of Python 3 and its libraries.
320
posted to Share by CyanCoding (1365) 1 year ago
▲
653
[New levels] 🔴 WebGL Rolling Sky
### Make sure to check out my another game! https://repl.it/talk/challenge/3D-Online-Multiplayer-Shooter/5323 ### And also my new programming language! https://repl.it/talk/share/NOOBLANG-v2/5486 --- One of my older projects Used the **Three.js** library *100%* made by me! **Play** 👉 https://rolling-sky--jser.repl.co/ ### 🎮 How to play: * Click or touch the screen to start * 🖱 **Control the ball** with your mouse or your finger 👆 * Don't let the ball to fall 'till the end! ### 💡 Tips: * At first you'll feel hard to control the ball, but **try more** and it'll be more comfortable to play * 📱 If you're on a **mobile** device, it's best to rotate the screen to **portrait** Inspired by the original **Rolling Sky** avaliable on App Store or Google Play More **levels** and **features** will be added in the future 👇 Report **bugs** or give **suggestions** in the comments below 👇 👍 Don't forget to give me an **upvote**! **Bonus**: Level designer (Beta) https://rolling-sky.jser.repl.co/level-creator/
171
posted to Share by JSer (1071) 1 year ago
▲
521
Shakespearean Insult Generator
https://repl.it/@JJCTPMS/Shakespearean-Insult-Generator
119
posted to Share by JJCTPMS (605) 1 year ago
▲
439
Working Chatroom
It's a chatroom! https://repl.it/@pyelias/Chatroom If there's any bugs, say so in the chat \(or comment here\). And don't spam or you get muted. (this project has been discontinued, if you wanna talk to people join the discord https://discord.gg/5gcPC6B)
277
posted to Share by pyelias (651) 1 year ago
▲
338
Tic-Tac-Toe
https://repl.it/@CyanCoding/Tic-Tac-Toe As a fun side project, I built this awesome Tic-Tac-Toe game \(with three AI levels\) in May 2017.
123
posted to Share by CyanCoding (1365) 1 year ago
▲
304
Gold Hunt
Hunt the golden ball and avoid the dangerous obstacles that can damage your score! https://Gold-Hunt--dosmaster4life.repl.co
61
posted to Share by dosmaster4life (303) 1 year ago
▲
273
90s WEBSITE (Pizza Fenzy)
https://hariz_hazril.repl.co/Pizza-Fenzy-Competitive-90s-Website I have no idea what im doing
115
posted to Share by Hariz_Hazril (308) 1 year ago
▲
249
👋✨Introduce yourself 🎉😀
Hello everyone! Let's use this thread to get to know each other. Just say hi and a few words about who you are, maybe what are you building or learning with Repl.it. If you're not comfortable sharing anything then share something fun 😉
699
posted to Announcements by amasad (1177) 11 months ago
▲
235
Kars
A survival driving game. Use arrow keys to move, avoid the trees, and collect fuel! https://repl.it/@ALVINWAN1/Kars
55
posted to Share by ALVINWAN1 (236) 1 year ago
▲
231
Encrypter and Decrypter !
Encrypter link : https://repl.it/@John\_123/Encrypter Decrypter link : https://repl.it/@John\_123/Decrypter Here is my Encrypter and Decrypter of a Message written ! , I have written it myself, So Please do give it a \(+1\) if you like it !
87
posted to Share by John_123 (243) 1 year ago
▲
225
The Fishing Game
# The Fishing Game *Explore your way through the different regions by catching the rarest fish you can. Catch em all to fill up your fishedex!* Hi!! This my fishing game. Here's a bit of an explanation that you also get ingame: Welcome to my fishing game! The aim of the game is to reach level 100 as quickly as possible. Catch the rarest fish you can and level up! You can sell your fish in the shop. Rarer fish bring in more gold. You can use this gold to purchase bait, which is needed to catch fish, and rods, which make catching rarer fish easier. Careful, bait gets more expensive as you level up. New types of fish are unlocked as you level up, and at higher levels, it's easier to catch fish. You can also see information about all the fish you've come across in the 'fishedex' in the shop. Catch them all! You might also find some treasure when you're fishing! The game saves your progress at the end of each day, so you can just log in again and pick up where you left off. Good luck! Press enter to continue. Not gonna lie, it's pretty fun. *** ## Backstory I made this game last July. The reason I choose fishing was mainly because it makes plurals easier - the plural of most types of fish is the same as the singular ;) (This doesn't work for anchovies though... or mythical creatures. Oh well). To make it I did have to learn a little about using classes and objects - I find them really useful now though. My coding's definitely developed a bit since I made this (it's a mess), but I can't really be bothered to make the code any neater (I did a tiny bit). I have edited it a bit since I originally made it to make it ready for the game jam. Here are some of the additions (spoiler for past level 100!!) : * There are new "mythicals" which are extremely rare fantasy creatures, like mermaids. They can only be encountered after level 100. You can't sell them, though the game remembers which ones and how many you've seen. You need the special new moonstone rod. * The game's harder now, in that the XP needed to level up increases exponentially as you go up the levels. I really should have had that from the beginning, because levelling up was way too quick. * Some new types of fish! * Highscore board for how many days it takes to reach level 100. I'm not sure if this was in the original fishing game that I posted in July, but I don't think it was. It's empty currently because the new XP-level scale has made all the previous highscores made by me and my family during testing unfair. Let's see who get's the lowest! * Rarest fish stat. Within the rarity boundaries like common, uncommon, rare ect, there are varying rarities based on a number. If you catch a fish with the same rarity number as your rarest fish stat, it counts as rarer if it's unlocked at a higher level. Basically, higher level is used to decide rarity in a couple of cases. The point is, I wanted to add something that made the game more orientated to getting the rarest fish - kinda like pokemon. Anyone got the blue whale? * Changed the rod names from "default, alright, decent, good, great" ect. to "wooden, bamboo, copper, iron, steel" ect, just for added character. The only one that stayed the same was the awesome golden rod ;) *** ## In the Future... I've got a few ideas for what I want to add to the fishing game... * A little addition of telling you the current highscore when you sign up, or when you log in, or at the top each day in game. I just don't really know which one would be best. Let me know what you want! * More fish of course! I just don't want to bombard you with them. Maybe if some of you guys really like the game I'll put a personalised fish in for you ;) * More ideas post level 100. Maybe some cool non-mythical fish. * Having the option to change rods using ones you've already bought, because at the moment if you want to change your rod you have to repurchase any you've already bought and that's just dumb. * New rods with cool properties, like extra attempts per day, or unlocking specific types of fish, unlocked at certain levels. * Maybe, but probably not, lengths of fish - they'd be a mean length for each type, and the fish you caught would be around this. The price could depend on length. There could be a new stat with longest fish caught? I feel like this is just too complicated for my simple little fishing game though. * Music! I feel like it would really benefit from some tunes but I don't know how to implement that. I'd have to look in to it. * Your suggestion here. Seriously, I would really love it if you guys could tell me what you want to see, if you like the game of course. PLANS FOR THE FINAL DAY * *Quests/achievements?* * *Rainforest and/or ~~fire biome?~~* DONE fire, I think rainforest would be cool but too much * ~~*Settings page with options to reset account, see highscores, see game info/help, see current number of accounts on the game?*~~ DONE * ~~*Work on fish rarity colours and fishedex/treasuredex colouring.*~~ DONE * ~~*End biome highscores page?*~~ DONE and in settings * ~~*Mythicals for the other biomes !!!*~~ DONE * ~~*Better names than "normal biome" "ice biome" "desert biome"*~~ DONE but they were stolen from game of thrones... oops * ~~*Weathers with different fish for different weathers*~~ DONE *** Well that's it. I really hope you guys like it. If there's any bugs let me know, and if you want any improvements, let me know too! Thanks so much for trying it out! (also sorry that it doesn't fit the cash theme. I edited it to make it more appropriate to the cash theme, but it kinda sucked. I prefer the cutesy fishing element) On a final note, let me know if you encounter all the mythicals! That would be seriously cool! Edit: don't really care if you don't like that it's in all lower case. I think it looks nicer. *** ## Change Log since posting * Input validation for a, b, c at the start of the day, to avoid the "press enter and run up your days" error * Input validation for logging in or signing up * More input validation for selling some fish, plus added capability for selling multiple fish at a time (not all fish) and fixing a bug that would've prevented fish with spaces in their name - eg electric eel - to be sold. * Fixed the printing of high scores so that it's in actually in the correct order, plus accounting for ties. * Disallowed "-" characters in the username, which would've messed up the accounts file, had it been working anyway. * Lowered the power of the rods and raised the prices for a more difficult game ... sorry if the highscores are now unfair but I can't let it be the same game forever :( * More input validation in the shop... it never ends * Weirdly, more input validation in the shop, I thought I caught it all, but nope. thanks for catching that, TechGamer * Added the "fishedex"!! It's amazing! It's literally just a pokedex. Go to the shop to see it. If you do manage to catch em all then tell me if my code works and you get a congratulations. Hope you all like the fishedex, thanks to Hamloid for the idea! * Accounts and highscores saving error fixed! * You don't get as much info about a fish each time you catch one now, only the first time you do. I think it looks a lot nicer. * The code now has the grammar knowledge of a 6 year old and can appropriately use "a" or "an" now. * If you put in "log in" but you should've put in "sign up", you no longer need to refresh, the code will sort it out for you. * Fixed password security thanks to ebest! * Added treasures and treasuredex! * Fish are now coloured based on rarity, inspired by Runescape! * Different biomes with different fish, different treasures, harder xp gradients, and dangers [dangers are so cool]! Level resets to 1 in these biomes. You can travel between biomes by ships (your old levels stay the same, don't worry). Biomes are only unlocked past level 100. I only have the ice biome now, but more are coming (unlocked at ice level 100, ect.) * Biome specific rods! [only 1 per biome, but they're both great at getting rare fish, and allow mythicals (at the moment mythicals can only be caught in normal, but I'm going to add ice and desert mythicals) * Desert biome added!! I know, the names suck. I'm working on it. * Bait price increases as you level up. It's also more expensive as you go through the biomes. * Dangers added for normal. * "One use" items! These are pretty cool and last for 1-2 weeks, increasing your chance at either: catching a fish, catching a treasure or catching rarer fish, or keeping you safer. There's 2 "levels" of item for each, with the better being rarer. They can't be bought in the shop and are instead found when fishing. * Added weathers, which are specific to biomes. Most fish can only be caught in certain type(s) of weather. * Added settings page with options to reset account, see highscores, see total number of accounts signed up, see game info and see game help. Going to settings doesn't use up your day, unlike the shop. * Improved fish rarity colours suggested by Mavrick and each line in the fishedex is coloured according the what biome the fish is found in. * Fire biome, which is the last one! Highscores page for when you complete it. * Mythicals for different biomes. * Biomes are no longer called biomes and are now named after locations in game of thrones. * Massive bug exodus just before deadlines oops * Inputs except user and password are now not case sensitive * Slight edits to reaching level 100 & ship functions * cats_ur_cool77's awesome fishing game tribute can be found in settings! * credits when you reach endgame! *** ### New: Competition! Anyone who can reach level 100 in under 300 days can have a personalised mythical! Screenshot the highscore board once you reach 300 and tell about what you want your mythical to be. Maybe they'll have even more XP than normal mythicals. Good luck!! *** **Account bug FIXED! Finally! Thanks so much to leon332157 for their json store module - https://repl.it/talk/share/jsonstoreio/10956. Your account information and highscores should always be saved now! (let me know if you find a bug though)** **Issue with account security is definitely improved now. Don't try too hard to hack it though aha Edit: account security is much better now!! thanks to ebest! ** **Don't forget to upvote if you enjoyed the game! Thanks so much to everyone who has done so, or commented, already!** *** ### Notes to judges * *Sorry that there are no screenshots of game play. I was planning to take some today but I have definitely ran out of time :(* * *Please don't mark me down because it's all in lowercase. It's inspired by a dark room, and it's super easy to change at the end of the day.* * *PLEASE play until you reach at least ~~the ice biome~~ Beyond the Wall because I worked so hard on the biomes!! And don't you want to log a highscore?* * *Sometimes, I worked on the file by forking it and editing the fork. I then copied and pasted it back into the original. I deleted some forks to make more room in my repl. I swear I used repl.it!* * *I used this file a lot to change the data that is held for the accounts. It was necessary when the new developments in the game required more data to be stored. https://repl.it/@AmeliaBlackwell/Fishing-Game-Account-Handler* * *Of course I really hope you enjoy my game :)* * *I had to restore the latest backup because the storage got full and had to delete itself. I'm really sorry anyone lost their data. I should've written an exception for this but I didn't think about that before the deadline. Everything should be working now though. *I recommend playing in a new tab*
591
posted to Challenge by AmeliaBlackwell (582) 2 months ago
▲
203
Dice Roller
https://repl.it/@QuadeG1/Dice-Roller I built this last semester it can be used in place of dice for any board game!
139
posted to Share by LightninMcQuade (240) 1 year ago
▲
167
Adventure Game
https://repl.it/@AidanMott/Adventure-Game It was for one of my school projects, but i still thought it was good
58
posted to Share by AidanMott (167) 1 year ago
▲
160
🔴 FORTNITE CHAT BOT🔴
Weapons, landing spots, insults and so so much more is capable by this program... https://repl.it/@thomasf04/Fortnite-Chat-Bot Ask this program anything Fortnite based! The program uses keywords to try and work out what your asking it, so you don't have to worry about phrasing your question a certain way... You can try and find this programs quirks and mysteries yourself or you can ask some of the questions below! There's only one way to find out the answer though... Trivia! >'What is Fortnite?' >'Who made Fortnite?' >'When was Fortnite made?' +more Controversial? >'Who's better, Ninja or Myth?' >'Pubg or Fortnite' >'What's your favourite weapon/skin?' +more In game: >'Do you have any Mini Shields?' >'Where we dropping?' >'Are you glad the Meteor didn't hit Tilted Towers?' >'Do you like Season 4?' +more Goofy: >'You're a noob!' >'I hate you!' Also... when the bot asks you for your favourite skin avoid saying You-Know-Who! \(John Wick\) and don't tell the bot the R\* word when it asks for your favourite weapon your favourite weapon... \*revolver If there is any element of conversation you would like added please don't hesitate to comment down below with additions/improvements. Thank you.
27
posted to Share by thomasf04 (249) 1 year ago
▲
151
Three Ways
Hello ! This is my three ways game. You can move the ball with k, l, and m or arrows. Press enter to play and retry. It's better to play in a new tab. I hope you will enjoy it. I'm still working on it, so it's not finished. I will add a system to change the size of the game on the screen, change the menu screen, and add a config to move with the arrows. You can tell me if you find bugs or things to improve. __If the screen is oversized, you can go to this link :__ https://three-ways--equation.repl.co/ You enjoyed the game ? Don't forget to upvote ! Now available : gold rush ! Go on the paddle to earn gold ! Have fun ! (Sorry for my bad English, this game comes from France ;)
99
posted to Challenge by Equation (165) 2 months ago
▲
147
Krossy Road
https://KrossyRoad--derekwan.repl.co This game was developed for educational purposes for Bit By Bit \(http://littlebitbybit.org/\). Worldwide high scores aren't available yet, but based on my personal experience of watching other people play, the current record is 429. Have fun!
73
posted to Share by derekwan (146) 1 year ago
▲
144
Huntin, fishin, ...
Fun start to a truck jumping game. https://truck-sprite--ericeisaman.repl.co/ https://repl.it/@EricEisaman/truck-sprite
50
posted to Share by EricEisaman (147) 1 year ago
▲
142
Dragon Eye RPG
This is an RPG made for the AI competition. The game is intelligent by generating a story and determining enemy moves. # About Dragon Eye is a terminal based RPG. It may not be a AAA game, but it does have one special thing about it. Since there is no story, the game is generated by an AI based on decisions you have made. ![image](https://storage.googleapis.com/replit/images/1548283686558_b0b3eca4ea6bbdf9a1dbf530af512550.pn) # Enemies You can fight a variety of enemy's in the game. Before combat the game generates your enemy to be close to your level and damage, that way every fight is fair, and a decent challenge. ``` class Enemy{ public int Level; public int Health; public string Race; public int Damage; public int Defense; } ``` # Items Items are essential to playing Dragon Eye, without them you would most likely be on a death loop. ``` class Item{ public string ItemType; public string ItemName; public int ItemLevel; public int Damage; public int Value; } ``` # Strategy The gameplay is based on strategically making decisions. You always have 3 options in combat, attack, defend, and use item. Using an item will heal you with an item, defend will use your defense to counter the enemies next attack, and attacking will use your attack and subtract that from the enemies health. ``` class Player{ public string Name; public int Level; public int Health; public string Race; public int Damage; public int GP; public int Defense; public int xp; public List<Item> Inventory = new List<Item>(); } ```
79
posted to Share by PixelBitez (161) 4 months ago
▲
142
3D Online Multiplayer Shooter 🔫🔫
📰 Featured in the **Repl.it Newsletter** Made with pure JS (Node.js for server-side) Used the **Three.js** and **Socket.io** libraries Play 👉 https://3D--jser.repl.co ### 🎮 How to Play: * ⌨ `W` `A` `S` `D` keys to move * ⌨ `Space` to jump * 🖱 Move your mouse to look around * 🔫 Click to shoot (You can only shoot once every 0.5 seconds) * 🏆 Every time you kill a player, you get 1 score * 💀 Once you fall down or die, you'll get respawned ### 💡 Tips: * 📶 If you have poor internet connection, it'll be laggy and sometimes you can't even move * Be careful with the controls (There's a delay between the server and clients) * Mobile support isn't fully implemented yet, so it's better to play on a computer! * It's more fun to play with multiple players, so call your friend to play together! 👍 Don't for get to give me an upvote! Leave bugs and suggestions below, or join the Repl.it Discord Server: https://repl.it/discord ### Changelog * Aug 8 - Thx @tanglx4310: Fixed bug where you can glide down * Aug 6 - Added score system! * Jul 29 - Initial release!
37
posted to Share by JSer (1071) 10 months ago
▲
139
Jumping Game
Code: https://repl.it/@That_one_guy/Jumping-Game Website: http://that_one_guy.repl.co/Jumping-Game/
54
posted to Share by That_one_guy (140) 1 year ago
▲
130
Cattle Trade
https://repl.it/@general\_poxter/Cattle-Trade
54
posted to Share by general_poxter (169) 1 year ago
▲
129
Maze Generation Bot
Generates mazes in realtime! https://maze-generation-bot--alephzero.repl.co/ Source code: https://repl.it/@AlephZero/Maze-Generation-Bot
82
posted to Share by AlephZero (227) 1 year ago
▲
121
🤖Ultimate A.I.🤖
This is Ultimate A.I. He learns how to answer questions and chat the more you speak to him.This was made using a basic "neural network" my class invented. This was made mostly by alexis garcia, who wanted to learn coding in my mechatronics class. ![Capture](https://storage.googleapis.com/replit/images/1548652030249_88014b9d71797ae7acff96f4cbe9ea8a.pn)
44
posted to Share by PCL (229) 4 months ago
▲
120
🔴[NEW]🔴 **🎮Play 2048 2️⃣🅾4️⃣8️⃣ In The Terminal💻** (in C➕➕) With *SIXEL* Graphics
# 2048 **YOU HAVE TO PLAY 2048 AT 🎮 https://2048.mat1.repl.run/rob/ 🎮 OTHERWISE IT WILL NOT WORK** ![Capture](https://storage.googleapis.com/replit/images/1546640695063_66be51019064221ab07b1c906cdeb253.pn) > 😁 Fun fact: > ⇪ Upvoting this post will multiply your skill by the current upvote number! > ![Capture](https://storage.googleapis.com/replit/images/1546640800574_bfdbf4ede59fe520bafe9ba4ea8e1275.pn) # Controls > Use WASD to move the tiles in the direction you so choose. > * W = up ↑ > * A = left ← > * S = down ↓ > * D = right → # Gameplay If you combine two tiles of the same type, they will combine! Crazy, right? 🙃 > Try to get to the ✨ mystical 2048 tile ✨ ![Capture](https://storage.googleapis.com/replit/images/1546641399984_1b5760f8caad460a681c970205fa6dd2.pn) (Above is a screenshot of the 2048 tile) > You lose the game when the board is completely filled up and there are no more similar adjacent tiles. ![Capture](https://storage.googleapis.com/replit/images/1546641850018_30c99f6abf4337c9bf232080efd2bedc.pn) # inspirational story or whatever This game was my first ever real C++ project I've ever worked on so please comment with feedback and suggestions. I made it using my Sixel and xTerm libraries but neither of them are perfect so they're not fully released yet. Sixel is the thing that can actually render the pixels in better quality than usual, to make it look more polished. xterm is the terminal thing Repl.it and Repl.run uses, but I just named my library after it because i've only ever tested it on xterm ¯\\\_(ツ)\_/¯ > Please ⬆ upvote ⬆ this post if you think 2048 is cool! > or if you don't > i don't really care as long as you upvote it -mat
38
posted to Share by mat1 (2035) 5 months ago
▲
120
Battleship
Test your skills against this battleship AI! Suggestions welcomed https://repl.it/@micfil3/Battleship
11
posted to Share by micfil3 (121) 1 year ago
▲
116
ROCK -- > PAPER -- > SCISSORS AGAIN :D
https://repl.it/@davidpython3/ROCK-greater-PAPER-greater-SCISSORS-AGAIN-D I'm still beginner :D
92
posted to Share by davidpython3 (125) 1 year ago
▲
114
Making a Phaser Game with HTML5 and JavaScript
# Making a Phaser Game with HTML5 and JavaScript Hi guys! Everybody likes to make games, right? And everybody has their own way of doing it. In this tutorial I wanted to share a very simple, yet effective way to make games in your browser! It should be easy enough for most people with javascript knowledge to follow along and, if you want to investigate further, there are endless possibilities out there! ![image](https://storage.googleapis.com/replit/images/1539468462288_75406edb94f04ca097cc5b4705ccbc85.pn) ### Phaser As Phaser describes itself it is a fast, free and fun open source framework for Canvas and WebGL powered browser games. And it really is! It is super simple to use and is quite easy to set up. No super extensive javascript knowledge is necessary and the process of making games is fun and rewarding. It also comes with tons of extra features that you may need in some more complicated games so while it caters to starters as well, it also does not lack depth if you want to look further. Anything from image editing to complex game mechanic mathematics is possible. ##### Sites to use The official Phaser website is [here](https://phaser.io). Additionally, because we are going to use Phaser 3, the latest release, the examples on the site will most probably not work for v3. If you want some examples of v3 features the link is [here](https://labs.phaser.io/). You should not need the examples during this tutorial but if you want to learn further that is where you start. Google works as well but be careful about which version is being discussed. Version 3 is relatively new and v2 has loads more documentation and examples and tutorials on it. However, I would recommend learning v3 because it is generally better in many ways and the knowledge will last you longer and it will be more current. #### Prerequisites (what you need before doing this tutorial) The pre-requisites are: * A basic understanding of HTML, CSS and Javascript. * Knowledge in Javascript about the `this` keyword. * Some time and patience. * 3 rolls of duct tape. * Lots of cardboard * Creativity ### Let's Get Started! The repl.it project that I will be using for this tutorial is [here](https://repl.it/@kaldisberzins/Phaser-Tutorial) and the website for it if you just wanna play the game is [here](https://phaser-tutorial.kaldisberzins.repl.co/). If you ever get stumped on a step that I take in this tutorial just check the repl and see how the code looks in it. If all else fails a bit of copy-paste will solve your issues. Make a new HTML/CSS/JS repl and follow along... So, first of all we need to include the Phaser script into our website. The only piece of HTML in this tutorial will be the following:`<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>`Just paste this into your project's HTML file right above your script tag that links to `script.js`. The order is important and if you get it wrong nothing will work. If your project is not working you should definitely have a look at the order of your scripts. The Phaser script should be first. With that out of the way, let's get into making our game! The first bit of code is a standard template that is in most simple Phaser games (more advanced ones may use a slightly different structure but the idea is the same). The code looks like this: ```javascript let config = { type: Phaser.AUTO, width: 800, height: 500, physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); function preload(){ } function create(){ } function update(){ } ``` While this may look alien to you, don't stress. To follow along this tutorial you don't need to understand what everything does exactly. The main things you should pay attention to are: * The three functions at the bottom `preload`, `create` and `update`. These we will fill in with the game's code. * The `width` and `height` properties. You can set these to anything you like, I did not make it `window.innerWidth` and `window.innerHeight` because scaling can quickly become messy. It is easier to make it a fixed width for everybody. So now if you run your repl you should see a black square in your browser window. Success! If you do not, make sure you have the Phaser script in the right place and that you have the code in your `script.js` exactly like above. You should also get a message in the console, something like: ```%c %c %c %c %c Phaser v3.14.0 (WebGL | Web Audio) %c https://phaser.io background: #ff0000 background: #ffff00 background: #00ff00 background: #00ffff color: #ffffff; background: #000000 background: #fff``` This may look awful in the repl.it console but if you open it in a new tab and check the console it should be a colorful banner. ### Loading Assets The `preload` function that we are going to use for this section is where you load your assets. If you want some images or audio (Phaser does that as well) in your game you first have to load it here. This way you are loading all the required assets immediately and you can use them throughout the game. I have made some assets for this tutorial so that you do not need to find or make some yourself. Go [here](https://drive.google.com/drive/folders/1TzRicUBL8V0T_9fPMaNCL6M0UEV51irQ?usp=sharing) and click download like so to get the files: ![image](https://storage.googleapis.com/replit/images/1539468612344_eeb16f0a94e74fa401749d11f7b89333.pn) If you get the files in a `.zip` folder just unzip them and drop them into your repl. Once you have them in your repl we have to load them into our game. The following code in the `preload` function will do the trick: ```javascript this.load.atlas("player", "spritesheet.png", "sprites.json"); this.load.image("platform", "platform.png"); this.load.image("spike", "spike.png"); this.load.image("coin", "coin.png"); ``` The first parameter in all of the functions is the "key" for the image. This key you would use when you need to add the image into the game. You can put it as whatever you want but make sure it is descriptive of the image in some way. I suggest you keep them the same as mine so that later code in my tutorial works for you. The second parameter is the path to the image. Because I put the assets in the same folder as the html and js files the path is just the name of the image. If you put your assets in another folder the file path string would look like `"folder_name/file_name.png"`. You may also have noticed that the first command is a bit different. It loads an __atlas__ and not an image. An atlas is a collection of images put together to make a larger image accompanied by a file that states where all the smaller images are. If you open the file `sprites.json` in the assets I gave you you should see that it contains a bunch of named objects that have x, y, width and height properties among others. Each object is an image inside the larger image. In this tutorial we will use the atlas for the player animations. All of the frames for the player (in our case only three) are in the `spritesheet.png` file. The third parameter for the atlas is the path to the `.json` file which we looked at already. If you now run the current code the screen should remain black and no errors should be in the console. If you see a web audio warning that is fine, it does not mean anything important. It's just chrome messing with you. ### Adding Objects to Our Game The `create` function is where the building of our game happens. It is run right after `preload` and is run only once. If you want to add an object to the game, this is where you do it. If you want to repeatedly create some object. Make a function (read below) that creates the object and run that as may times as you like. So we now have loaded some images but we need to have something happen on the screen. Let's add a function in the `create` function that will spawn our player in. Add this code to the `create`function: ```javascript this.spawnPlayer = ()=>{ this.player = this.physics.add.sprite(400, 250, "player", "sprite_0"); } this.spawnPlayer(); ``` I put this in a seperate function so that we can spawn the player multiple times. We are saving the player to __`this`__ which is the Phaser game object so that we can access it from anywhere. The function itself creates a sprite (image/object) that is in the Phaser physics system. The parameters are: 1. X position 2. Y position 3. Image key 4. (optional) If the image is an atlas, which frame in the atlas. There may be a few more parameters but those are not important for this tutorial. The way we find out which frame is which in the atlas is by looking at the `sprites.json` file. Find an object and look at its x and y properties. For example `sprite_2` has the following object: ```javascript "sprite_2":{"frame":{"x":0,"y":0,"w":48,"h":64}... ``` We can see that the x and y coordinates of the frame are `0, 0`. This means that it will be in the top left corner. If you look at the top left corner of the `spritesheet.png` image you will see which frame is `sprite_2`. Try changing the last parameter in the add function to be `sprite_2`. You will see that it has changed. ##### Adding a Background If the only background color we could have would be black Phaser would look really bad. Luckily enough, Phaser has an easy way to add a background to our game. Just add this code to the top of your `create` function above the `spawnPlayer` function: ```javascript this.cameras.main.setBackgroundColor('#ffffff'); ``` This sets the background color for our main camera to white. If you have not used hex color codes before don't worry about it, just know that `#ffffff` is white. The only problem with that is that now we can't see where our canvas window starts and ends. We can fix this with a little CSS: ```css canvas{ border: 1px solid black; } ``` Now if you run your code it should look something like this: ![image](https://storage.googleapis.com/replit/images/1539468654218_bf2de4d9dc55069fde105a14f6c9818a.pn) You can see we have our little character in the middle of the screen. The background is now white. You may have noticed that the character is not offset to a side even though we put in the coordinates for the center of the screen. This is because Phaser draws images from their center. This makes it easier to center images. Another simple thing we can add to the game is a camera that follows the player. This is quite easy to do in Phaser: ```javascript this.spawnPlayer = ()=>{ this.player = this.physics.add.sprite(400, 250, "player", "sprite_0"); this.cameras.main.startFollow(this.player); }; this.spawnPlayer(); ``` The function should be quite self-explanatory and if you run it you should see no change for now. As long as you do not get any errors you are fine. ### Adding Platforms Before we start I wanted to show you the most basic way to add an image to the game. The method used above has a very specific use case (only for sprites). Here is a more general use way of doing it: ```javascript // This goes beneath the spawnPlayer function call this.platform = this.add.image(404, 302, "platform"); ``` This is good for some simple use cases like for example a logo image in your title screen. However it has its shortcomings. Imagine you want to create a map of these platforms. You would have to add `platform1` `platform2` and so on... It would be a nightmare. Let's not get started on collisions. So by now you can see why we are not going to use this to add our platforms. Instead we will have a group. Defining a new group is easy. Remove the above code and add this instead. ```javascript this.platforms = this.physics.add.staticGroup(); ``` Currently we are just defining a new static (non-moving) group and assigning it to the variable `this.platforms`. If you run this now the platform image will disappear. That is because we need to add some platforms to the group. This can be done simply like this: ```javascript //Below the spawnPlayer function this.platforms = this.physics.add.staticGroup(); this.platforms.create(404, 302, "platform"); ``` There we go! Now we have our platform back! But what is the benefit? In a moment when we deal with collisions you will see why. For now we will leave the platforms and get back to them later. ### Keyboard Inputs As you have probably gathered by now, Phaser has made its own version of everything you may need when developing games. Keyboard inputs are no exception. Phaser even supports many ways to do keyboard inputs. We are going to do the shortest and simplest. We are going to have a bunch of variables, one for each key. And we will check each frame if any of the keys are pressed and set velocities accordingly. The code for the keyboard variables in the `create` function looks like this: ```javascript this.key_W = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.key_A = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.key_D = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); ``` You do not need to understand this, just get the idea of what is happening. When a player presses a key the variable associated with that key will have `isDown` set to `true`. This makes adding keybinds really easy. Now for the rest of this section we are using the `update` function. `update` is your game loop. This function is run very fast repeatedly all throughout your game. This is where you would handle things like movement and other stuff you would want to check every frame. If you would be coding your own physics this would be where you do it. In the `update` function now let's check if the W key is pressed: ```javascript if(this.key_W.isDown){ this.player.setVelocityY(-50); }else{ this.player.setVelocityY(0); } ``` Instead of incrementing or decrementing the Y property of the player we set its velocity. We do this because it sets a velocity within Phaser which has some benefits. First of all Phaser object velocities take into account the frame rate. If every frame you increase the position X of a player, the higher the frame rate the faster the player moves. However, Phaser counteracts this. We do not need to know how, just that no matter the frame rate the player will always move at the same speed. The value we put into `setVelocityY` is the amount of pixels we want it to move in one second. If you run this now you will see that is you press the W key your character will move up. Success! Now let's add keybinds for A and D. This is only a few more lines of code: ```javascript if(this.key_A.isDown){ this.player.setVelocityX(-50); }else if(this.key_D.isDown){ this.player.setVelocityX(50); }else{ this.player.setVelocityX(0); } ``` We have this in an if/else if statement because we don't want to head left and right at the same time. We can only go in one direction or the other. And that's it! We now have linked up our keyboard keys to our Phaser game! Now it's time to deal with physics. ### Game Physics Phaser also has its own physics engine. In fact it has three but we will only use the most basic one for this tutorial. Just simple square and square collisions. Before we can do collisions, how about we add some gravity. We only need it on the player so it would look like this: ```javascript this.spawnPlayer = ()=>{ this.player = this.physics.add.sprite(400, 250, "player", "sprite_0"); this.player.body.setGravityY(800); this.cameras.main.startFollow(this.player); }; ``` Now if you run your game you will see that the player drops. But he is dropping very slowly. Why so? This is because each frame we are setting his velocity to 0 if the W key is not pressed. Previously that was needed so that he would not just fly away but now we need to remove that bit: ```javascript //In the update function if(this.key_W.isDown){ this.player.setVelocityY(-50); }/*else{ this.player.setVelocityY(0); } NO LONGER NEEDED*/ ``` Now if you run it the player falls a bit faster. You can still fly with W but we will change that in a second. #### Collisions Now that we have gotten gravity mostly out of the way let's make the player collide with the platform that we have. We can do this with one simple line of code. Add this to your `spawnPlayer` function: ```javascript this.physics.add.collider(this.player, this.platforms); ``` That's it. Just one line of code does everything. But if you run this now it will not work. The player will fall right through. And this is actually for a really stupid reason. We are running this code before we add the platforms. All you have to do is move the `spawnPlayer` function __call__ (not the function itself) below where we add the platforms. And Viola! We have the player not falling through the platform. There are some small problems that we should address before moving on. First of all, When we press W we can fly endlessly. That defeats the point of the game. To prevent this all we need to do is to only let us jump when we are on the ground. This is easy to do: ```javascript if(this.key_W.isDown && this.player.body.touching.down)... ``` When the key W is down and the player's body is touching a platform with its bottom it will jump. If you run this now you will see that the player now makes many little jumps if you press W. To make the jumps larger we have to increase the `setVelocitY`: ```javascript if(this.key_W.isDown && this.player.body.touching.down){ this.player.setVelocityY(-550); } ``` And also while we are at it we can make the left/right movement a bit faster: ```javascript if(this.key_A.isDown){ this.player.setVelocityX(-150); }else if(this.key_D.isDown){ this.player.setVelocityX(150); }else{ this.player.setVelocityX(0); } ``` So there we have it! A running and jumping player! Now let's give him a map to run around in. #### Map Building Phaser supports multiple ways to build a map (of course). However, I have decided that it would be better to cook up our own map builder that would work off of a string. Spaces would indicate that at that position there is no platform, 1 would mean that there is, 2 that this is a spawn point for the player and a dot(.) would mean that this is the end of a row. The map I designed looks something like this: ```javascript //At the top of your js file const map = '11111111111111111111111111.'+ '1 1.'+ '1 1.'+ '1 2 1 1 1 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 1.'+ '1 1 1 1 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 1.'+ '1 1 1 1 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 1.'+ '11111111111111111111111111'; ``` You can see that it is a box that is riddled with platforms. How do we turn this into a map? The parser for this that I made is only a few lines of code: ```javascript //Goes instead of the previous platform adding code this.platforms = this.physics.add.staticGroup(); let mapArr = map.split('.'); let drawX = 0; let drawY = 0; mapArr.forEach(row=>{ drawX = 0; for(let i = 0; i<row.length; i++){ if(row.charAt(i)==='1'){ this.platforms.create(drawX, drawY, "platform"); }else if(row.charAt(i)==='2'){ if(row.charAt(i+1)==='1'){ this.spawnPlayer(drawX-4, drawY-12); }else if(row.charAt(i-1)==='1'){ this.spawnPlayer(drawX+4, drawY-12); }else{ this.spawnPlayer(drawX, drawY-12); } } drawX+=40; } drawY+=40; }); ``` First we split the string that we have into an array of rows using the . that says that a row ends at that point. Then we loop through each row and at each row we loop through each character in the row. If the character is a 1, we add a platform at that place. If the character is 2 we spawn the player. I have a bit more code there that checks if there is a platform to the left or right and that nudges the character to a side just so that the player does not spawn in a platform. Also, you may have noticed that we are calling `spawnPlayer` here with some parameters. These are just x and y coordinates of where to spawn. To make that work we just have to edit the `spawnPlayer` function like so: ```javascript this.spawnPlayer = (x, y)=>{ this.player = this.physics.add.sprite(x, y, "player", "sprite_0"); this.player.body.setGravityY(800); this.cameras.main.startFollow(this.player); }; ``` Now if you run this you should get a map inside of which the player can run around. You can mess around with the map string if you want and design your own map. I would love to see what you come up with in the comments! ### Player Animations A while ago, I mentioned that we would use the atlas for player animations. Now is the time! We have three frames in our atlas and we have only used one. It's time to use the other two. Phaser has its own animation manager (by now you get the idea - Phaser === everything) that makes it super simple to do animations. First we have to set up our animations: ```javascript // At the bottom of the create function this.anims.create({ key:"walk", frames:[{key:"player", frame:"sprite_2"}, {key:"player", frame:"sprite_1"}], frameRate:10, repeat:-1 }); this.anims.create({ key:"stand", frames:[{key:"player", frame:"sprite_0"}], frameRate:1 }); ``` This creates an animation for our player that we can play when we want. The array `frames` is what Phaser will loop though and play. `frameRate` is quite self explanatory - the amount of frames that are played each second. `repeat` with the value -1 will make the animation loop again and again. Not specifying `repeat` will just make it run once. The key is the string that we can use to reference to the animation later. Just the same way as with images. Now let's run the animations when we walk right or left: ```javascript //In the update function if(this.key_A.isDown){ this.player.setVelocityX(-200); this.player.anims.play("walk", true); }else if(this.key_D.isDown){ this.player.setVelocityX(200); this.player.anims.play("walk", true); }else{ this.player.anims.play("stand", true); this.player.setVelocityX(0); } ``` The `true` parameter is just whether if there is already an animation running, should Phaser continue it? If you set this to false you will see that it will just freeze on a frame. That is because every frame it is checking if a key is pressed and then playing the animation. It will start again every frame making it look like it is frozen. Now if you run this you will see that we have a running animation with the legs moving and the hat bobbing up and down. There is only one more problem with the sprite. The player does not flip when he runs to the left. This is an easy fix: ```javascript //In the update function if(this.key_A.isDown){ this.player.setVelocityX(-200); this.player.anims.play("walk", true); this.player.flipX = true; }else if(this.key_D.isDown){ this.player.setVelocityX(200); this.player.anims.play("walk", true); this.player.flipX = false; }else{ this.player.anims.play("stand", true); this.player.setVelocityX(0); } ``` There we go! Now we have a map, player animations, keybinds, physics and most of all - a weird blob of a character who has a hat that flaps in the breeze! ### The Final Step - Spikes and Coins Now let's add some spikes that the player has to dodge and some coins that the player can collect. First, let's add a score counter in the top of the screen that displays our score: ```javascript this.spawnPlayer = (x, y)=>{ this.player = this.physics.add.sprite(x, y, "player", "sprite_0"); this.player.body.setGravityY(800); this.physics.add.collider(this.player, this.platforms); this.cameras.main.startFollow(this.player); //====================================== this.player.score = 0; this.scoreText = this.add.text(0, 0, "Score: "+this.player.score, { fill:"#000000", fontSize:"20px", fontFamily:"Arial Black" }).setScrollFactor(0).setDepth(200); }; ``` `setScrollFactor(0)` will make sure that when our camera moves, the text does not. This way it will always be in the same position in the top-left of the screen. Text is drawn from its top-left (don't ask me why it is one way for one thing and another for another) so drawing it at `0, 0` will put in the top-left corner. `setDepth(200)` will make sure the text always appears on top. We also make a variable for the score of the player that can be increased when we collect a coin. #### Coins Time to make an incentive to run and jump around. Coins will be a `c` in our map string. So, the map would now look like this: ```javascript const map = '11111111111111111111111111.'+ '1 c 1.'+ '1 c c c 1.'+ '1 2 1 1 c 1 c 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c c 1.'+ '1 c 1 1 c 1 c 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c c c 1.'+ '1 1 c 1 c 1 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c c c c 1.'+ '11111111111111111111111111'; ``` Now to make this work we have to add an option of what to do if the current character is a `c` in our map parser. I added something like this: ```javascript this.platforms = this.physics.add.staticGroup(); //================================== this.coins = this.physics.add.group(); //================================= let mapArr = map.split('.'); let drawX = 0; let drawY = 0; mapArr.forEach(row=>{ drawX = 0; for(let i = 0; i<row.length; i++){ if(row.charAt(i)==='1'){ this.platforms.create(drawX, drawY, "platform"); }else if(row.charAt(i)==='2'){ if(row.charAt(i+1)==='1'){ this.spawnPlayer(drawX-4, drawY-12); }else if(row.charAt(i-1)==='1'){ this.spawnPlayer(drawX+4, drawY-12); }else{ this.spawnPlayer(drawX, drawY-12); } //================================= }else if(row.charAt(i)==='c'){ this.coins.create(drawX, drawY+10, "coin"); } //================================= drawX+=40; } drawY+=40; }); ``` If you run this you will see that a bunch of little coins appear. But we can't collect them! This is fairly easy to add: ```javascript // Add this after the map parsing code this.physics.add.overlap(this.player, this.coins, this.collectCoin, null, this); ``` This function will check if there is an overlap between two objects. The two objects are the first two parameters. If there is an overlap, it will run the function that is passed in with the third parameter. `null` is just there for reasons and `this` is just passing on the `this` value to the function. We now need to make a function `collectCoin` that will run if there is an overlap: ```javascript this.collectCoin = (player, coin)=>{ player.score+=10; this.scoreText.setText("Score: "+ this.player.score); coin.destroy(); }; ``` If you run this you will see that you can now collect coins and increase your score. Success! There is only one more step before we are done. #### Spikes Time to add some difficulty to the game. We are going to have spikes that if you step on they will clear your score and respawn you. Let's first add them to our map as an `s`: ```javascript const map = '11111111111111111111111111.'+ '1 c 1.'+ '1 c c s c 1.'+ '1 2 1 s 1 c 1 c 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c c s s 1.'+ '1 c 1 s 1 c 1 c 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c s c c 1.'+ '1 s 1 c 1 c 1 s 1 1.'+ '1 1 1 1 1 1.'+ '1 1.'+ '1 c c c c 1.'+ '11111111111111111111111111'; ``` And now we can render them into our game: ```javascript this.platforms = this.physics.add.staticGroup(); this.coins = this.physics.add.group(); //================================== this.spikes = this.physics.add.group(); //================================== let mapArr = map.split('.'); let drawX = 0; let drawY = 0; mapArr.forEach(row=>{ drawX = 0; for(let i = 0; i<row.length; i++){ if(row.charAt(i)==='1'){ this.platforms.create(drawX, drawY, "platform"); }else if(row.charAt(i)==='2'){ if(row.charAt(i+1)==='1'){ this.spawnPlayer(drawX-4, drawY-12); }else if(row.charAt(i-1)==='1'){ this.spawnPlayer(drawX+4, drawY-12); }else{ this.spawnPlayer(drawX, drawY-12); } }else if(row.charAt(i)==='c'){ this.coins.create(drawX, drawY+10, "coin"); //================================== }else if(row.charAt(i)==='s'){ this.spikes.create(drawX, drawY+10, "spike"); } //================================== drawX+=40; } drawY+=40; }); ``` Let's do what we did last time - add an overlap detector between the player and the spikes. The code is pretty much the same: ```javascript //Next to the other overlap checker for the coins this.physics.add.overlap(this.player, this.spikes, this.die, null, this); ``` And now we have to make a function `die` that will be run when the player hits the spike. All we will do is stop the game and display text saying **YOU DIED**: ```javascript this.die = ()=>{ this.physics.pause(); let deathText = this.add.text(0, 0, "YOU DIED", { color:"#d53636", fontFamily:"Arial Black", fontSize:"50px" }).setScrollFactor(0); Phaser.Display.Align.In.Center(deathText, this.add.zone(400, 250, 800, 500)); } ``` `this.physics.pause` is what stops the game. The text adding should be pretty self explanatory. The bit that may be confusing is the line after that. This is the code I used to center the text. It accepts two arguments - the object to center and the zone in which to center it in. `this.add.zone` in turn accepts four arguments - the x, y, width and height of the zone. The x and y are in the center of the screen and the width is the width of the screen and the same for the height. When you run this code and jump on a spike you will see that it shows some big red text saying __YOU DIED__. And there we have it! Our completed game! Make sure to celebrate by wrapping __lots__ of duct tape around some cardboard. That was what the duct tape and cardboard were for. Nothing, really :). ## Final Word Thank you for sticking to the end of this monster of a tutorial. I hope you are proud of what you have made. If you liked this tutorial, please show support by voting for it. If you have any questions, suggestions or if you found a typo don't hesitate to post it in the comments! Also, if you put a spin on the game or make a cool map that be sure to share it! I would love to see what you guys can make out of this :). If you are too lazy to scroll up, the link to the repl that I made is [here](https://phaser-tutorial.kaldisberzins.repl.co/). Also, if you would like me to make some follow up tutorials outside of the competition about some more advanced features like scenes and (multiplayer?) then be sure to leave a comment. If enough people want it I will be sure to make some more tutorials. ## __EDIT__ I made an additional demo that delves into some more complicated concepts but it looks a lot better (I stole some sprites off the internet). It is just some uncommented code that you can play around with and try and see if you can make anything out of it. If you want to check it out you can find it [here](https://repl.it/@kaldisberzins/Phaser-Demo). Just wanna play it? Go [here](https://phaser-demo--kaldisberzins.repl.co/). Also, thank you guys for all the support in the comments! So heartwarming to see that many people like it. [email protected]_
20
posted to Learn by kaldisberzins (231) 7 months ago
▲
112
90s Website
http://Luke25.repl.co/90smeme This is slightly a joke, but tbh I think it is like a 90s website
33
posted to Share by Luke25 (115) 1 year ago