Pt3 Learn CSS to enhance your website

Category : How to make web game Tags : css html script tutorial

CSS or Cascading Style Sheet is a kind of Markup Language which is used to format the HTML code. It plays a very important role in formatting the HTML tags properties such as colors, size, margin space and so on. Almost every website you found in the internet uses CSS.

So, let?? begin with a plain HTML file.

Code:

<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
This is the web content
</body>
</html>

Result:

Next, let?? add in the CSS code into the HTML to change the tag properties.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
</style>
</head>
<body>
This is the web content
</body>
</html>

Result:

As you can see, the CSS has changed the formatting of the content.

Referring to the code above, you could notice we have added the <style> in the header zone of the code. Within the <style> zone, we have a set of CSS code to format the properties for the body tag of the HTML file. There are several attributes which you could set on the properties as explained below;

margin:0px;

This attribute set the empty space margin which frames your browser content.

background-color:black;

This attribute set the background color of your browser content.

font-family:arial,verdana,tahoma;

This attribute set the type of font to be used within the body content. Three types of font are mentioned here. Depends on the font availability on the clients computer, the first font (arial) will be the default font type followed by the next one.

font-size:12px;

This attribute set the size of the font.

color:white

This attribute set the font color.

So, let?? add another item into the CSS list.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
b{
color:pink;
text-decoration:underline;
}
</style>
</head>
<body>
This is the web content<br/>
With some <b>bold</b> text
</body>
</html>

Result
Here, we have added a CSS code to format the <b> tag. In this case, we have set the color of the font to be pink in color and decorated it with an underline.

Using CSS Class attributes.
You can create a list of CSS class setting to place certain formatting into certain individual tags whenever you need it. Let say I want to format a <b> tag into blue color and then another <b> tag into green in color.

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
margin:0px;
background-color:black;
font-family:arial,verdana,tahoma;
font-size:12px;
color:white
}
b{
color:pink;
text-decoration:underline;
}
.blue{
color:blue
}
.green{
color:green
}
</style>
</head>
<body>
This is the web content<br/>
With some <b>bold</b> text in <b class=??lue??Blue</b> and <b class=??reen??Green</b> in color.
</body>
</html>

Result:

Creating a CSS Website Template
CSS template is very common in today?? web design because it is very feasible and you only need to change the CSS settings to change the entire look of the web page. The main element in creating a CSS template is using the <div> tag. A <div> tag is used to create a rectangular region where you could place contents into it.

So, let say I want to make a template with three main rectangular box or region as below;

Code:

<html>
<head>
<title>Sample Web Page</title>
<style>
body{
background-color:black
}
div{
color:white
}
.yellow{
float:left;
border:2px solid yellow;
width:400px;
}
.red{
float:left;
width:100%;
height:50px;
margin:2px;
background-color:red
}
.blue{
float:left;
width:100px;
height:80px;
margin:2px;
background-color:blue
}
.green{
float:right;
width:280;
height:80px;
margin:2px;
background-color:green
}
</style>
</head>
<body>

<div class="yellow">
<div class="red">Text
</div>
<div class="blue">Text
</div>
<div class="green">Text
</div>
</div>
</body>
</html>

Result:

Here you have a simple web template with three rectangular regions.

The inline CSS
Instead of placing your CSS code in the header of your HTML file, you can also place them right inside the tag.

Code:

Result:
Bold font in red

Linking external CSS file.
Instead of placing your entire CSS library into the header of your HTML file, you can also link them from an external CSS file. Simply write all your CSS content into a file with a file name style.css.
Then place the code below into your HTML header to link the CSS file.

Pt2 Learn HTML to make a website

Category : How to make web game Tags : tutorial html script

You got to learn to walk before you run and don't even think about leaping. Learning how to create a web page is the very first thing you need to know before proceeding to the complicated stuff like programming an application, like games.
HTML and CSS is the basic thing you must learn in order to design your web interface. Although there is a lot of great software out there which allows you to design a cutting edge website with just some mouse click, still you got to understand what happen behind the scene, the source code.
You should begin with learning HTML or Hyper Text Markup Language and create a web template for your website.
You do not necessary need any special software to code HTML. I just use Notepad which comes with any Windows OS to code my website.

Creating a html file
Open the Notepad.exe program and then type the code as below;

Code

<html>
<head>
<title>
This is my first webpage
</title>
</head>
<body>
Welcome to my first web page.
</body>
</html>

Next, save the file with the filename 'index.html'. You could then open the file again using a web browser and see your first web page.

HTML code uses mark called tag which looks like <html> or <title> and so on. Each tag has its own function and most tag has an open tag and a close tag. An open tag looks like this, <title> and the close tag looks like this, </title>. Note that the close tag has a slash (/) mark right before the text in the tag.

For the code above, you may notice this code;

<title>
This is my first webpage
</title>

That indicate the web page title where the text in between <title> and </title> will be displayed on the top of your browser windows.

Your web page content will be the text in between <body> and </body> and in this case, you will see the "Welcome to my first web page." text displayed on your browser.

So, this is the basic structure of a web page. It consists on the header zone and the body where your web content is placed. Now, lets continue to learn more about creating your web content with several more tags.

There are a whole lots of HTML tags out there but here I will only specify only a few commonly used tags. So let?? get started with some simple ones.

<br> tag is a very common used tag. It is use to break lines between the text. Although you could press Enter button to write your text in a new line, but that doesn't appear the same way in the browser. You must put a <br> tag in order to break the lines.

Code:

This is the first line
Then second line here

Display;
This is the first lineThen second line here

Code:

This is the first line<br>
Then second line here

Display:
This is the first line
Then second line here

*Note that there is no close tag for <br>. The new standard will write <br> tag into <br/> to indicate it is a self close tag. Whether <br> or <br/>, they both still works the same.

<b> tag is used to format your text into bold syle.
Code:

This is a <b>bold</b> text.

Display:
This is a bold text.

<i> tag is used to format your text into italic style.
Code:

This is an <i>italic</i> text.

Display:
This is an italic text.

<u> tag is used to format your text into underline style.
Code:

This is an <u>underline</u> text.

Display:
This is an underline text.

You could combine several text formatting tags by opening the few tags and then close it one after another in the reverse sequence as it was open.
Code:

<b><i><u>Combine Formatting</u></i></b>

Display:
Combine Formatting
*Note on the closing tag. The <u> is the last open tag in the sequence and it must be close first.

<img> tag in used to insert image into your content. The src='' attribute is where you input the image file location. You could also put a full url of the image location. The alt='' attribute is the alternate text to display in case if the image file is not found.
Code:

Display:

<font> tag it used to format text style. Although CSS is the mostly used method to format text nowadays, guess you should know about this too.
Code:

Display:
Text in red

<center> tag is used to display the content to be aligned in center.
Code:

<center>
This text is aligned in center.
</center>

Display:
This text is aligned in center.

<a> tag is used to create a hyperlink to link one page to another.
Code:

This is a <a href='http://somewebsite.com'>Link</a>

Display:
This is a Link

<table> tag is used to create rectangular table with several rows or columns. This tag might be a bit difficult at first since it has three different tags altogether and it must be open and close in the correct sequence in order to make it work accordingly.
Below is a simple rectangular table.
Code:

Display:

This is some text

The set of code must be written in this sequence. <table> tag to open the table mark followed by <tr> to open the row and finally <td> to open the cell. And each of the tag must be close in the reverse order in which the last tag opened has to be close first. Your content has to be placed after the <td> tag as that is where the cell area for content was.

Now, lets create a table with several cells within one same row.
Code:

Display:

Cell 1

Cell 2

Cell 3

This time, We will create a table with severals rows and 1 single cell on each row.
Code:

Display:

Row 1

Row 2

Row 3

Row 4

And then we have table with several rows and multiple cells on each row.
Code:

<table border='1' width='300'>
<tr>
<td>Links </td>
<td> Content </td>
</tr>
<tr>
<td> Link 1<br/>Link2<br/>Link 3</td>
<td> Some content here </td>
</tr>
</table>

Display :

Links	Content
Link 1 Link2 Link 3	Some content here

So, now you have learn some basic knowledge on how to create a web page and it is time to put more time into practical excercise. Only with more excercise will let you to become a master. So, start to think of a simple web page design and try to code it out.

There are also a whole lots of resources out there in the internet which provide full tutorial and discussion about web programming. Just browse around and you would gain more and more knowledge and skill into building a better website.

Control Panel for your PBBG

Category : From the Author Tags : pbbg php script tutorial

Not many PBBG is built with a fully functional control panel. Since most of the PBBG owner has root access to their PBBG source script and database, they could simply change anything right from the source. Afterall, constructing a decent control panel will takes a whole lots of effort and time.At many cases, it is not worth the effort to build a control panel for everything in the PBBG management. I never bother to build a Control Panel for my web game project before.At most, there would only be a simple control to do most of the frequent repetitive task.

As I have no project on hand last year after I abandoned my PBBG site, I started to work on a project which consist of constructing a basic web games site with a fully functional control panel. This system will not have any game function in it as it would be the base system for any PBBG project which I would be making. The basic system consisting of features such as;

-Signup / Login-logout and retrieve password
-Public Chat
-Private Message
-Forum Discussion board
-Account setting such as change password and email address.
-Admin Control Panel

The most important thing in this system is the Control Panel. I'm loading tons of function into the Control Panel so that everything related to site management could be done through the Control Panel. Here is a list of the function of the Control Panel after I have integrated it with my latest PBBG project, Dungeon Master.

game control panel

Manage Account
-View and update user's account information.
-View individual account PM logs.
-View individual account login/logout history.
-View individual account item list.
-Delete account from database.
-Force Restart account.

Authority
-Set individual account authority for feature such as;
-Post Chat
-Post Forums
-Comment on News
-Suspend account
-Assign as Moderator
-Set individual Moderator authority to perform task as below, each function can be activated individually;
-Ban user from Post Chat
-Ban user from Post Forums
-Ban user from comment on News
-Edit / Delete postings in Forums and News comment.
-Suspend account

Sig
nup / validation Choose account signup validation option;
Option 1: Require validation code via email to activate account.
Option 2: Instant access. No email validation required.
-Manually activate account.
-Obtain validation code.

Username Reserve
-Reserve certain username from being registered.

Logfiles
-view logfiles;
-Public Chat logs
-Accounts Login/Logout logs
-Private Message logs

Moderator
-View list of Moderators and assign their authority.

Censored
-List down words to be censored from Public Chat, Forums postings and News comments.

Config
-Configure Game options;
-Game Title
-Game Subtitle
-Turn Speed (seconds)
-Maximum Turn Limit
-Start Game Money
-Max Money Limit
-Protection Period (hour)
-Currency
-Onboard Item Limit
-Max Item
-PM Aging Limit (day)
-PM Limit
-Forum Max Replies
-Forum Thread Per Page
-Min Holiday
-Max Holiday
-ChatBox Limit
-Logoff player after inactive for (minutes)
-Turn Required to Attack
-Element 1 name
-Element 2 name
-Element 3 name
-Element 4 name

Document
-Edit main page information.
-Create / Edit / Delete documents such as About Us, Disclaimer, Rules and Regulations.

Forums
-Manage Forums Category (Create / Edit / Move / Delete)

Manual
-Create categories for manuals.
-Create Game Manuals.

Notes
-Jot down notes.
-Activate Sticky Notes. Sticky Notes will appear in the Admin Control Panel main page

News
-Write news and publish it on the main page of your website.
-Built-in RSS Feed for people to subscribe and read your news from Feed Reader.

Comment
-Manage comments(News) post from users.

Notice
-Post public notice. Public notice will appear on the top of the website until it is deactivated.

Reboot (Game data)
-Remove old data in the database.
-Set protection period to all accounts.
-Reset all accounts location to Start Point of map.

Help
-Help files related to the Admin Panel.

Stats
-View site page hits and visitors statistics

Characters (Game)
-Customize Characters which is used by player to play the game.
-Set Level up points.

NPC (Game)
-Customize NPC which will fight against the player.

Items (Game)
-Customize items such as;
-Weapon
-Armor
-Useable
-Cure
-Accessory
-Gems

Dungeon (Game)
-Create map background image Style. You can use different style on each dungeon map.
-Customize Dungeon properties: Dungeon name, NPC density, NPC Level
-Customize Dungeon Map;
-Create path.
-Place Item on fixed location.
-Place NPC on fixed location.
-Link to another dungeon map.
-Place Shop on fixed location.
-Place Gate on fixed location.
-Import / Export dungeon map code.

Giveout (Game)
-Give Turn to individual or all players.
-Give Money to individual or all players.
-Give Item to individual (or all players.)

Mass PM
-Send PM to all user.
-Create PM Group list.
-Send PM to Group list.

Dungeon Master Demo version
Our Dungeon Master Game Engine has already been released. You could take a look at it's Game Control Panel which is used to customize the entire game.

Dungeon Master Game Engine Preview screen shot

Category : From the Author Tags : pbbg mmog

The Dungeon Master game engine is undergoing some final tuning for it's beta release. The script itself is almost complete and I am now trying to do some dungeon and mission configuration as well as some graphic work on it.
Now, lets go on with some brief description of the upcoming Dungeon Master MMORPG.
Dungeon Master is a Massive Multi Player Online Role Playing Game (MMORPG) where player get to explore various dungeons map, collect items, fight with enemies and so on. Player could also launch attack against other player and grab some items from them.

Anyway, picture tell a thousand words. Below is a few screen shot on the upcoming Crazy Dungeon MMORPG from the Dungeon Master game engine.

This is the characters setup page where player setup his characters with weapons, armors, accessory as well as onboard items where is can be used during battle. The game would consist of several different characters for each player to choose from each with different stats and abilities.

exploring dungeon
This is the dungeon exploration page where player explore the dungeon in a 9x9 box map. Each dungeon actual map is in 15x15 grid while only a 9x9 grid is visible during exploration. Player may find Shop, Treasure Box, Monster, Gate, Links to other Dungeon as well as stumbling upon some random monster.

fighting interface
The NPC fighting screen. This is where the player control the fighting action aginst the enemy. The player could choose which weapons to attack the enemy or user certain onboard items such as cure health or useable weapons. Or, just in case the player couldn't seems to defeat the monster, he could just run away!

game control panel
The game engine is built with a fully functional Control Panel for game admin to manage the game. While I might not have the time to manage my own game in the future, this game engine will be open for anyone who are interested to create and manage their own game here. Interested person just need to fullfill some requirement and preparation and they will be given a subdomain under phpgame.net with a Dungeon Master game engine installed. Do stay with us for the release updates.

customizing dungeon
This is the Dungeon customization page for game admin. Game Admin could create their own route map and place various items into the map.

PHP Game Scripts for Download

Category : Script Library Tags : download script pbbg php mmog

Merchant Empire

Merchant Empires is a multiplayer, web-based game of space exploration and economic competition. It is a game of strategy, role-playing, combat, and diplomacy. Merchant Empires is loosely based on both Trade Wars and Space Merchant.
Click here to download Merchant Empire

BlackNova Traders

BlackNova Traders is a web-based, multi-player space exploration game inspired by the popular BBS game of TradeWars. It is coded using PHP, SQL, and Javascript.
Click here to download BlackNova Traders

Kill Monster

Killmonster is the simplest browser based game possible. It simply lets users fight monsters in a 1-click battle. Monsters are created by the administrator and battles are weight by the user's skill points and the monster's skill points.
Click here to download Kill Monster

Dragon Knight

The Dragon Knight game engine is an online game system created by Jamin Seven. It is an RPG-style game in which characters explore the map, fight monsters, gain experience and buy items, among other things. It is written in PHP4, with a MySQL database backend.
Click here to download Dragon Knight

Kitto Virtual Pet

KittoKittoKitto is an open-source (GPL v3) virtual pet site template app, providing all of the basic functionality you need to start a petgame. It is targeted towards those who are proficient with PHP or are trying to learn PHP. Kitto is purely object-oriented and adheres to the MVC pattern, making it an excellent package to begin learning PHP with.
Click here to download Virtual Pet

Legend of the Green Dragon

Click here to download LoGD

Voided Alliance

A futuristic MMORPG. You can view the demo here
Click here to download Va

Solar Empire

Solar Empire is a GPL/public domain browser-based strategy game (BBS) written in PHP. Users control fleets, planets and equipment to conquer the galaxy. Almost limitless variation given by advanced customisation options.
Click here to download SE

World of Phaos

World of Phaos is a browser based RPG written in PHP.
Click here to download WoP

ezRPG

An online RPG game script from BBGameZone where you could customize according to your needs
Click here to download ezRPG

Next Page >