if (Math.floor(Math.random()*100) > (acc-1)) dmg = 0;

This is if acc is a number from 0 to 100, 100 being sure to hit and 0 being sure not to.

Which now makes my entire damage calculation formula:

function dmgcalc(who, magic, stat, acc, element) //for who, 0 means you are attacking, 1 means monster is attacking; magic is 0 if its a weapon and 1 if its magic
{
	if (who == 0)
	{
		lvl = y_lvl;
		base = stat;
		if (magic == 0)
		{
			atk = y_atk_base;
			def = o_def_base;
		}
		else
		{
			atk = y_satk_base;
			def = o_sdef_base;
		}
	}
	else
	{
		lvl = o_lvl;
		base = stat;
		if (magic == 0)
		{
			atk = o_atk_base;
			def = y_def_base;
		}
		else
		{
			atk = o_satk_base;
			def = y_sdef_base;
		}
	}
	ch = 1;
	if (Math.floor(Math.random()*100) <= 5) ch = 2; //6% chance of critical hit, make it critical hit if this happens
	randnum = Math.floor(Math.random()*39) + 217;
	type = 1;
	dmg = Math.floor(((Math.floor(Math.floor(((Math.floor((lvl * 2) / 5) + 2) * base * atk) / 50) / def)) + 2) * ch * Math.floor((randnum * 100) / 255) / 100) * type;
	if (Math.floor(Math.random()*100) > (acc-1)) dmg = 0;
	return dmg;
}

The Chuck Norris and Spaghetti (speghetti?) Monster are just place holders of course until I get the database of monsters and users working.

So far what works is:

• all the variables needed for the monster and your person’s stats are declared in javascript
• stats are calculated from base stats (which right now I just threw stuff in there as opposed to pulling from the database)
• the monster ranges randomly from level 2 to 4, but that will be changed based on what are the player is battling in
• the monster’s IV (random individual stats) is random, so the monster may be tough or crummy depending on what randomly pops up
• when clicking on “Fight,” a screen pops up with what weapons you can use to attack, as well as a back button
• when clicking on one of weapons (which each has its stats next to its name and pic) it attacks
• the attack is calculated based on that weapons power, the monsters stats, your stats, and whether its a critical hit or not

What needs to be done:

• make the left info pane tell you when theres a critical hit
• incorporate elements (fire, wind, water, earth)
• magic, and an mp bar
• the items menu
• running away
• pulling monsters from db
• pulling your guy’s info from db
• I’m sure other stuff that I forgot

What I just did

• Make the weapons show up after clicking “Fight” and make the damage actually calculate

The project continues tomorrow.  Sleep time.

Why use FBML?

• Easier to access the FBML code (when using iFrames you have to use XFBML instead of FBML, and XFBML is slightly more complicated)
• Page probably loads faster than iFrame
• Much easier to make something quickly

Why use iFrame?

• Can use Javascript, which makes it much easier to just port stuff over
• AJAX is faster because it doesn’t go through a proxy

The most important thing to realize that is if you use the iFrame format, you have to use XFBML instead of FBML which really isn’t much harder to use, I just did not realize this was the case and I was banging my head against the wall trying to figure out why FBML wasn’t working.  XFBML is basically a version of FBML used for Facebook Connect (external websites that utilize Facebook) and the iFrame approach to creating an application.

I reaaaaally suggest using the iFrame approach solely because in order to use Javascript with just FBML (no iFrame), you have to use FBJS which quite frankly is just flat out retarded and impossible to use.  Because of this mess, this blog post is teaching you how to make an app with the iFrame approach.

So lets just dive right in.

Part 1:  Setting up your application on Facebook

Head to http://www.facebook.com/developers/ and click on Set Up New Application at the top-right corner.  Name your application, select agree, and click Create Application.

Now click on the Canvas tab on the left.  Make the Canvas Page URL whatever you would like it to be (this is what the url will be for people to get to the app).  Make the Canvas Callback URL the page that your app resides on (your own personal space where you are putting creating the HTML, PHP, or whatever page[s]).  This will be the page that Facebook loads into its iFrame when people go to the Canvas Page URL.  Finally, make sure the Render Method under Canvas Settings is set to IFrame.

****EDIT: I meant to type “http://seanmadi.com/flareisland” for the Canvas Callback URL, not “”http://seanmadi.com/flairisland”.

Now here is the tricky part that all of the tutorials I looked at failed to mention.  Click on the Connect tab and make the Connect URL that same as what you put for the Canvas Callback URL.

Finally, after you save those settings, be sure to copy down your API Key and Application Secret.  And thats it for the Facebook side of things!

Part 2 – Downloading Facebook’s necessary PHP files

Just download the PHP Client Library files and upload them to your server somewhere in the same directory as you put as the Canvas Callback URL earlier.

Part 3 – Settings up your html/php page on your server

I will assume you already know how to FTP to your webspace and create and php file.  So do that and put make this make this your index.php file in the directory you entered into the set up above. The following code will display your profile picture, name, and status and your first 4 friends’ profile picture, name, and status.

<?php
// FACEBOOK STUFF
//Note that where my facebook.php file is may be different from yours
>require_once 'php_include/facebook/php/facebook.php';
//Authentication Keys
$appapikey = '6c7b5d1e5d6bef88cf120c42453b57c3';
$appsecret = '75005c4cebc164fc42484d6d1cd3ac62';
//Construct the class


$facebook = new Facebook($appapikey, $appsecret);
//Require login
$user_id = $facebook->require_login();
echo '
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
</head>
<body>
<h3>Your profile</h3>
<table><tr>
<td valign=top><fb:profile-pic uid="'.$user_id.'" linked="true" size="square" /></fb:profile-pic></td>
<td width=350 valign=top><fb:name uid="'.$user_id.'" useyou="false" /></fb:name><br />
<span style="font-size:12px;"><Fb:user-status uid="'.$user_id.'" linked="true" /></Fb:user-status></span></td></tr></table>
<h3>Friends</h3>';
$friends = $facebook->api_client->friends_get();
$friends = array_slice($friends, 0, 5);

foreach ($friends as $friend)
{
	echo "<table><tr>";
	echo "<td valign=top><fb:profile-pic uid=\"$friend\" linked=\"&gt;true\" size=\"square\" imgstyle=\"border-width:1px; border-color: black;\" /></fb:profile-pic></td>";
	echo "<td width=350 valign=top><fb:name uid=\"$friend\" useyou=\"&gt;false\" /></fb:name><br />";
	echo "<span style='font-size:12px;'><Fb:user-status uid=\"$friend\" linked=\"&gt;true\" /></Fb:user-status></span></td></tr></table>";
}
echo '
		<script type="text/javascript">
			FB.init("6c7b5d1e5d6bef88cf120c42453b57c3", "xd_receiver.htm");
		</script>
	</body>
</html>';
?>

****EDIT: There should not be a ‘>’ before the require_once() statement at the top of the code. For some reason its showing up there when I post even though I didn’t type it. So if you are copying and pasting, leave that ‘>’ out.

And that’s it! With any luck you should get something that looks like this:

Of course if you want to display other things, which I imagine you do, you can change the body of the page to whatever you want. Check out Facebook’s Developer Wiki for information on how to use different XFBML tags.

One important distinction to recognize between FBML and XFBML is that FBML tags do not need to be closed while XFBML tags do. So instead of where in FBML you would do <fb:photo pid=”54321″ uid=”6789″>, you you would instead write <fb:photo pid=”54321″ uid=”6789″></fb:photo> for XFBML.

I hope this post was informative and not frustrating. If you have any trouble, let me know in the comments and I’ll to help as best as I can. Have fun!

So back to my idea…  I want a Pokemon MMO, but a social Pokemon that people can quickly get into (a la browser based).  This doesn’t exist as far as my searching has found, at least not a decent one.  So I aim to make a social Pokemon game with time limiting factors (such as Mafia Wars’ timed energy mechanism) on the Facebook platform, as this seems to be the best approach.

Making the game in Facebook will enable the user to not have to create a new account with my site, not having to put their email address in yet another place on the internet (and lets be honest–EVERYONE has Facebook.  Everyone).  Facebook games are also much more accessible to casual gamers as they can just go to a link right off of a website they are already on 15 times a day, and the game can get basically free advertising by implementing a mechanism that posts that they are playing the game in their feed so others see the game (not automatically though, as that is soooo annoying).

This is not going to be a crappy Mafia Wars rip-off with Pokemon characters just thrown in though.  This is going to be a full fledged Pokemon game that any Pokemon lover, past or present, will immediately want to play and hopefully get hooked.  Details will be in the next post.  Stay tuned!