Making a JavaScript Game From Scratch | Tutorial

Yükleniyor


In this tutorial (or “tutorial series”? huh.), I’m gonna teach you how to make a javascript game step by step.

Prerequisites

So, first of all you need to understand a bit of JavaScript, jQuery and CSS syntax. What is a class, object or variable? If you don’t know what these are, I highly recommend you to signup Codecademy and learn some JavaScript, jQuery and CSS.

What will our game look like?

Our game will be a “Choose Your Own Adventure” alike game. Player will choose what to do and his/her attributes (health, wage etc.) will change depends on his/her choices.
And the game screen will look like:

click to enlarge this image

HTML Structure

Our HTML is so simple.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Our JavaScript Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* some stylings come here */
</style>
<script type="text/javascript">
// Our game script will come here.
</script>
</head>
<body>
<div id="wrapper">
<div class="right">
<div id="attributes">
<p id="name"></p>
<p id="health"></p>
<p id="money"></p>
<p id="int"></p>
</div>
</div>
<div class="left">
<a class="clear" href="#" onClick="clearTimeLine()">Clear</a>
<div id="choices"></div>
<div id="timeline"></div>
</div>
</div>
</body>
</html>

Did you catch it? All divs, paragraphs are almost blank. We use jQuery’s DOM changing skills to show player’s attributes, timeline, choices and so on.

Creating the Character Class

And then, we create a class Character and store character informations in it. Creating a class is easy. Just create a function and set some property on it.

Character = function(name) {
	/* beginning values */
	this.alive = true;
	this.hasJob = false;
	this.inLove = false;
	this.health = 100;
	this.name = name;
	this.money = 100;
	this.luck = 0;
	this.charm = 1;
	this.int = 0;
	this.wage = 0;
	this.expenses = 10;
}

What is this? Confused? this always refers to owner function. In this case, the owner function is our Character class. When we create a object that instance of Character, we can simply use object.wage to use the object’s wage property.

Let’s our object comes!

We’ll create a Player object that instance of our Character class. Whole game will flows on this object; choices will effect on Player‘s attributes, not on Character.

var playerName = prompt("What's your name?");
var Player = new Character(playerName);

Now, we have a Player object that its name attribute will be defined by the player.

Welcome to your new life

Our game’s structure is ready. Let’s create a function and write a welcome message on timeline when the game begins.

addTimeLine = function(txt, clazz) {
	clazz = typeof clazz !== 'undefined' ? clazz : 'msg';
	$('#timeline').append('<p class="'+clazz+'">'+txt+'</p>');
}

in line 2, we set a default parameter on our addTimeLine function. If you don’t understand, read this article. It will helps you a lot.
And then, let’s call our new function just after the game begins.

var playerName = prompt("What's your name?");
var Player = new Character(playerName);

addTimeLine("Welcome to your new life, "+Player.name);

“Wait, wait… What the heck is Player.name?”. Good question. Player is object that instance of our Character class. As I explained above, we can simple call objectName.propertyName to use a object’s property. In this case, Player.name equals to player’s name that he/she wrote on prompt box.

The hard part is over

We created a Character class, a Player object and append a welcome message to our game timeline. Nice work isn’t it?

What we’ll do in second part

  • We’ll define some functions for creating choices.
  • We’ll create a setInterval to display player’s attributes dynamically on right side.
  • A main menu function to show in beginning and after each choices.
  • And adding some other features.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir