Pizza Presser | Facebook | Twitter | Reddit | Tumblr | Pin | Blog

Help with server costs :)

How to make an Incremental Pizza Game - Part 1

How to make a Clicking Incremental Pizza Game - Part 1 Intro

Incremental Games are rising in popularity right now and the genre is expanding rapidly. More and more incremental games are being released every day and you can release one too. I'm going to show you how to make your very own pizza clicking incremental game. Obviously you don't have to follow the pizza theme, but I'm going to be using pizza related graphics and naming my IDs and functions about pizza. If you have your own idea for a theme feel free to swap out the necessary bits, such as graphics and programming names.

I'm going to take you from the complete basics, to having your very own incremental pizza game that you can play in your browser. We're going to be coding everything with HTML, CSS, and Javascript. You don't need any knowledge on these 3 languages to make your own game, just make sure you follow these blog posts closely and you'll have a working pizza game that you can improve on in no time.

What you'll need

First things first, lets get you all setup so you can actually make an incremental pizza game. What you'll need:

  • A browser
  • A text editor
  • Optional: A web server

A browser is what you're using right now. The 4 main browsers are: Chrome, Firefox, Internet Explorer and Safari. For this pizza game tutorial I am going to be doing everything with Google Chrome. I recommend you do the same. Firefox is just as good, you'll just have to figure out where some stuff is. If possible, avoid Internet Explorer and Safari. The developer tools are no where near as good as Chrome or Firefox.

A text editor is a program that allows you to edit text files. Notepad and Microsoft Word are the ones you should probably have heard of before. You can code an incremental pizza game with these text editors no problem. It is however going to be much easier if you download a more advanced text editor. I personally recommend Sublime Text 2 as it has a well designed user interface, loads of features, and provides a much easier to read layout.

If you want other people to be able to play your incremental pizza game online you'll need to buy a server to host your files on. You can do this by buying a hosting package from a web hosting company and setting it all up. Don't worry if you don't know how to do that, most good web hosting companies provide excellent support and tutorials. If you only care about playing your incremental pizza game on your computer you can ignore this part about web servers.

Coding Languages

I mentioned earlier the 3 languages you're going to be using: HTML, CSS, and Javascript. Your incremental pizza game is going to require 3 files. A .html file, a .css file and a .js file. That's all there is to it. Your whole pizza game is going to be built using 3 files and an image folder. Before we jump head first into setting everything up I'm going to quickly explain what each language does.

HTML stands for HyperText Markup Language. This is the base of your incremental pizza game. You'll use HTML to create all the elements on your pizza game. The buttons, the sections, the text, the pictures, etc. Picture HTML as your own skeleton, without it you'd just be a floppy mess on the floor.

CSS stands for Cascading Style Sheets. You'll use CSS to style all the elements you've created using HTML. CSS controls the font size, the colours, the size of everything, the responsiveness, the positions, etc. This is how you'll style your incremental pizza game. Using our body as an example, CSS is the hair on your body, the colour of your eyes, the size of your hoo hah. Without CSS your pizza game will look incredibly boring.

JS stands for Javascript and this is where all the meaty coding happens. You'll use Javascript to make all your numbers move on your incremental pizza game. Javascript allows you to make stuff happen when you click buttons, it lets you save your game and allows you to make your pizza game interactive. If you didn't have Javascript you'd have a good looking game, but if you clicked something nothing would happen. Going back to your body as an example, picture Javascript as your interal organs, your heart, your lungs, your brain, etc. Without these you just wouldn't work.

Setting everything up

Now you're going to create the 3 files you'll need to make your incremental pizza game. First off, make a new folder called "Pizza Game" either on your desktop or in your files. Just make sure you know the file path. Inside this folder you're going to store your 3 files and your image folder.

Make an image folder called "img" inside your "Pizza Game" folder. You won't have any images just yet, this is just for future preparation.

Open up Sublime Text 2 or the the text editor of your choice and create 3 new files. Save all of them in your "Pizza Game" folder with the names "index.html", "style.css" and "main.js". Inside your "Pizza Game" folder you should now have 4 items. An "img" folder and 3 files "index.html", "style.css" and "main.js".

Linking your 3 files together

Now that all your folders are setup and your files have been created, it's time for you to link them all together so they can all interact with each other. If you don't connect them all up you'll have 3 separate parts of an incremental pizza game and it simply won't work.

Open up your "index.html" in Sublime Text 2 or your preferred text editor. You're now going to create the skeleton of your incremental pizza game. You need to create an opening HTML tag followed by a closing HTML tag. In between these HTML tags you need to create an opening head tag followed by a closing head tag. After the closing head tag you need to create an opening body tag followed by a closing body tag. It should look like this:

<html>

<head>


</head>


<body>


</body>

</html>

This is the super simple base skeleton of your pizza game done, we still need to add a few more things.

Now what you need to do is connect your "style.css" file and your "main.js" file in the head section. This will link all your pages together so you can have a working and functioning incremental pizza game that also looks pretty.

To add the style.css file into your incremental pizza game you need to add this in between your head tags:

<link rel="stylesheet" type="text/css" href="style.css">

To add the main.js file into your incremental pizza game you need to add this in between your body tags and keep it at the bottom.

<script type="text/javascript" src="main.js">>

Your code for your incremental pizza game should now look like this:

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>


<body>

<script type="text/javascript" src="main.js">>

</body>

</html>

And there you go! You've completed part 1 of your very own incremental pizza game! Now all we need to do is add code to all your files so we can get a working game, but for now all the setting up is done. You can open your brand new pizza game in your browser if you wish. All you have to do is open up your browser and open index.html from your "Pizza Game" folder. Ctrl + O is the shortcut I use. You won't find anything when you do open your pizza game as we haven't coded anything, but everything is ready to go.

To carry on building your incremental pizza game, move onto the next blog post:

How to make an Incremental Pizza Game - Part 2

Back Next
Popular Posts!
Make an Incremental Pizza Game - Part 1

Make an Incremental Pizza Game - Part 2