Hints and tips on creating a browser base game

[SerbanSpire]

Hello there!

I am really into creating my own browser based game, but i am in a real need of some directions here. I followed hallsofvallhala's youtube tutorials like my own bible until my brother came one day to see what i got. Well, he was actually pretty impressed but he told me to check some design architectures. That's how i found out about REST and (obviously) AJAX. It blew me off completely. These design architectures facilitates the communication between server and client and between two clients. I confess, i haven't watched all of hallsofvallhala's videos, i still have 6-7 more, but i don't think he uses http protocol to make the communication happen. I can't accuse halls of anything, he did an amazing job recording those videos, but something is missing. He used a lot of PL queries and while i am a pretty experienced in using PL PL/SQL it's what i want to continue with. But the problem is i couldn't find on the web tutorials on how to make RESTful websites using PHP and/or JavaScript (i am ready to learn JavaScript too)and PL queries. I actually found what i was looking for on http://www.w3schools.com on the AJAX tutorial. There was a HTML page that used JavaScript there too and another PHP script which had PL queries, but the tutorial there is rather limited, for me at least. So there it is, where can i find such directions on writing RESTful websites? Books, videos, blogs anything. Are there another ways of programming? Thanks in advance!

[Jackolantern]

Halls' Browser Based RPG tutorial is for complete beginners to programming, and focuses strictly on PHP, basic SQL and HTML. He has other videos that introduce Javascript and that get into AJAX, and other videos still that go far beyond AJAX and use WebSockets and node.js. And honestly there is very little usage of REST in PBBGs (browser-based games) as far as I have seen. REST is mostly useful, and mostly used, in "web services". There are a few web service-based games out there, but they are the minority. Honestly, the best thing you could do to create a well-structured PBBG would be to adopt an MVC framework and start using unit-testing to ensure correct function

Also, I highly suggest to stay away from w3schools. Their tutorials are extremely short, miss main points of a technology, are designed simply to make you buy their worthless certificates, and are also grossly wrong. They also have no connection to the W3C, and will not change their name no matter how many times the W3C have asked them politely.

[hallsofvallhalla]

Agree with Jack completely. Stay away from w3schools and there is a difference in real time PBBG games and the refresh style I am building in the tutorials. Refresh style is far more secure and far easier for beginners.

Trust me I get people email me and say, Hey you did this wrong, or you should have did it this way. I always reply, i could have been then it would have been harder to follow and would be useless. Learn the basics, build a game with the basics then move on to the more advanced techniques.

Also do not worry about queries and the best architecture on your first game which will most likely not get thousands of players. There is a old sayin gin the development community that your first 10 games will be failures. So go ahead and build 10 games and learn what you can then go on and build the WOW killer

[Jackolantern]

Very true. If you pile all of these coding practices on new programmers (who, honestly, are mostly just doing this as a hobby, not a profession), they are going to get frustrated and quit. However, if you make it as simple as possible, and try to relate making a game to any simple programming classes they may have had a few years back, they are more likely to get it. The same also goes for visual results. If they can see something from their efforts (and just a single PHP page is a lot of effort for a new developer), they are also more likely to continue.

I have been around here long enough now that I have seen people come in with almost no programming experience who went through the tutorials, and they now are making complex web applications using the MVC pattern, continuous integration servers, full test suites and distributed components. All these things come with time

[pbd2008]

I may be on the wrong page to post my code but below is the login.php code that I am currently working on but there are other pages also if i need to copy and paste the code I will. I also know the page is in html and JavaScript but that is what the class required however I thought I could use much of the code into a new <?php page named login.php. if I am thinking correctly or else please let me know..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT TYPE="text/javascript">
<!--
//Disable right click script

var message="Sorry, right-click has been disabled";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</SCRIPT>
<meta name="description" content="The best Christian online Gaming site with a new twist.
FREE, no Facebook, no Zynga, no pop ups asking for cash; players having fun in new Blyte World community!
Come join us!" />

<meta name="keywords" content="free, game, multi player, role playing, blyte world, online game" />
<title> Blyte World Password Validation</title>
<link rel="stylesheet" href="content/login.css" type="text/css" media="screen" />



<link rel="shortcut icon" type="image/x-icon" href="/blyteworld-game.ico.html" />
<link rel="canonical" href="http://www.blyteworld.com" />
<meta property="og:image" content="http://www.blyteworld.com/content/inter ... game02.jpg" />
<script type="text/javascript">
// This is a javascript function for validating the password
function validatePassword() {
try {
var strPassword;
var regexp;

// setup an error to throw if we have a password error
var err = new Error();
err.name = "pwd_error";

// get the password from the form element
strPassword = document.getElementById("txtPassword").value;
if(strPassword == "") {
alert("Password cannot be blank");
} if(strPassword == "") {
alert("Password cannot be blank");
}else {
err.message = "";
// check the length of the character
if(strPassword.length < 8 || strPassword.length > 15) {
err.message = "Password length must be between 8 to 15 characters\n";
}
// Check for Upper case letter
regexp = /[A-Z]/; // Regular expression for upper case letter
if(!regexp.test(strPassword)) {
err.message += "Password must contain at least one upper case letter (A-Z)\n";
}
// Check for lower case letter
regexp = /[a-z]/; // Regular expression for lower case letter
if(!regexp.test(strPassword)) {
err.message += "Password must contain at least one lower case letter (a-z)\n";
}
// Check for number - Password must contain at least one number
regexp = /[0-9]/; // Regular expression for number
if(!regexp.test(strPassword)) {
err.message += "Password must contain at least one number (0-9)";
}
// If valid password, show success message; otherwise throw an error
if(err.message != "") {
throw err;
} else {
alert("Password validated successfully.");
}


// if we had a password error
if (ex.name == "pwd_error") {

alert("Password validation failed.\n" + err.message);
// Clear the value in the password textbox
document.getElementById("txtPassword").value = "";
document.getElementById("txtPassword").focus();

// otherwise, its some other javascript error
} else {alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message");}
// ex.name is the type/name of error like RangeError, TypeError, etc.
// ex.message is the description of the error.
}
}
}

</script>
</head>
<body>
<div class="login_page_maincontainer">

<!-- Start of Page Header -->
<div class="login_page_header">
<div class="login_page_title">
<img src="content/interface/world1.png" alt="Blyte World" />
</div>
<div class="login_page_free">
<img src="content/interface/header_welcome.gif" alt="Free Strategy and Dating Game" />
</div>
<div class="clearthis"></div>
</div>
<!-- End of Page Header -->

<!-- Start of Page Menu -->
<div class="login_page_menu">
<div class="login_page_button">
<a href="login.php" title="Home"><img src="content/interface/home.gif" alt="Home" /></a>
</div>
<div class="login_page_button">
<a href="register.php" title="Sign Up"><img src="content/interface/login_signup.gif" alt="Sign Up" /></a>
</div>
<div class="login_page_button">
<a href="http://www.blyteworld./faq" title="Community" target="_blank"><img src="content/interface/login_faq.gif" alt="FAQ" /></a>
</div>
<div class="login_page_button">
<a href="about.php" title="About"><img src="content/interface/login_About B.W.gif" alt="About Blyte World" /></a>
</div>
<div class="clearthis"> </div>
</div>
<!-- End of Page Menu -->

<div class="login_page_forms">

<!-- Start of User Login -->
<div class="login_page_userlogin_form">
<div class="login_page_userlogin_form_header">
<br />
<img src="content/interface/userlogin_header.gif" alt="User Login" /><br />
<br />
</div>
<br />
<br />
<form action=authenticate.php method=post name="login">
<div class="login_page_userlogin_form_field">
<img src="content/interface/userlogin_login.gif" alt="Login:" class="login_page_forms_img" />
<input type="text" name="username" class="login_page_forms_input" />
</div>

<div class="login_page_userlogin_form_field">
<img src="content/interface/userlogin_password.gif" alt="Password:" class="login_page_forms_img" />
<input type="password" name="password" class="login_page_forms_input" />
</div>

<div class="login_page_userlogin_form_button">
<input type="image" src="content/interface/userlogin_enter.gif" alt="Enter" class="button" />
</div>
</form>
<br />

<div id="userlogin_links">
<a href="register.php" id="register"><strong><span>Register >>></span></strong></a>
<br />
<a href="forgottenpassword.php" id="notregister"><strong><span>Forgot your Blyte World game login?</span></strong></a>
</div>

</div>
<!-- End of User Login -->

<div id="sitesearch_header"></div>
<br />
<img src='content/interface/mrated.gif' align="center"width="192" height="64" alt="Rated M" />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="login_page_body">
<img src='content/interface/blyteworldgif.gif' width="576" height="430" alt="body image" class="login_page_body_image" />

</div>
<div id="clearthis_contentbody"></div>
</div>
<!-- Start of Page Footer -->
<br />
<br />
<div id="page_footer">
Copyright © 2012 <strong>Blyte Records Inc.</strong> | <a href="tos.php">Terms of use</a><br />
</div>
<!-- End of Page Footer -->
</body>
</html>

[BobMann]

<br />
<br />
<br />
<br />
<br />

Learn more CSS.

Code: Select all

<Tag style="padding-bottom: 25%;"></Tag>

[pbd2008]

<br />
<br />
<br />
<br />
<br />

Learn more CSS.

Code: Select all

<Tag style="padding-bottom: 25%;"></Tag>

So using external CSS pages is not enough to design the style of a page? I know I did not use a style tag for the footer was that the problem?

[BobMann]

Don't put line after line of <br/>, use padding/margins.

[pbd2008]

Don't put line after line of <br/>, use padding/margins.

Wow, my instructor never corrected my code in that area so as I understand you that is not the best practice using a break in CSS. Well that is upsetting news because I already have taken CSS and two classes of JavaScript from the University of Phoenix. Taking into account best practices for both classes may not be up to date then my degree will not be worth a dime when I graduate in April. What can I do now? I wanted to use what I have learned to be the base of knowledge to begin building a browser text based game. Can anyone help me get on the right track? Without going back for a bachelor degree in game design.

[hallsofvallhalla]

I am not sure what your original post is asking. As far as CSS and breaks it is all just style. It is cleaner to use to Divs but everyone here knows my personal stance on coding practices. If it works and is easiest for you then use it.

it is your game, websote, program, ect.. you code it however it works best for you. You are never wrong as long as the end result is what you expect.