javascript game question

Page 1 of 1

4 Replies - 554 Views - Last Post: 16 November 2012 - 09:36 AM

#1 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

javascript game question

Posted 15 November 2012 - 03:44 PM

i became interested in writing a simple game in javascript. this will probably eventually turn into something much larger but since this is one of my first attempts at writing my own scripts i want to take it slow. i dont have any problems so far but i wanted to know if i am going about this the right way and what possible problems i could run into using this method. the game is basically going to be a simplified version of the android game "plague". im planning on using javascript to hide/show divs that have certain information. so far i have the following:

html
<!doctype html>
<head>
<title>My First Game</title>

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

<script src="game.js"></script>

</head>


<body>

<div id="wrapper">

<div id="mainpage">
<img src="main.jpg" id="mimg">
<br>
<font id="title" color="red" size="6">
<center>
THE PLAGUE
</center>
</font>
<center>
<img src="start.jpg" id="startbutton" type="button" onclick="virusName()"> 
</center>
<center>
<font color="red" size="6">
<img src="instructions.jpg" onclick="gameInst()">
</font>
</center>
</div>

<div id="instructions">
<font color="red" size="5">
You have gone mad with rage and have decided that you are the one true ruler of the 

world. Your job is to unleash a deadly virus upon the world to show your strength and 

fearlessness. Show everyone your absolute power by destroying all those that oppose 

you!
</font>
<div id="bottom">
<img src="back.jpg" type="button" onclick="returnMain()"> 
</div>
</div>

</div>

</body>
</html>


css
*
{
margin:0px;
padding:0px;
}

#wrapper
{
position:relative;
width:500px;
height:500px;
top:50px;
margin-left:auto;
margin-right:auto;
background:black;
}

#mainpage
{
position:relative;
background:black;
width:100%;
height:400px;
}

#instructions
{
position:relative;
text-align:justify;
padding:1.5%;
background:black;
width:97%;
height:500px;
display:none;
}

#bottom
{
position:absolute;
bottom:0px;
left:0px;
}

#mimg
{
position:relative; 
display:block; 
margin-left:auto; 
margin-right:auto;
}

#startbutton
{
width:100px;
height:100px;
}


javascript
function virusName()
{
document.getElementById('mainpage').style.display = 'none';
}

function gameInst()
{
document.getElementById('instructions').style.display = 'block';
document.getElementById('mainpage').style.display = 'none';
}

function returnMain()
{
document.getElementById('mainpage').style.display = 'block';
document.getElementById('instructions').style.display = 'none';
}


so far all this code does is show the main screen with 2 buttons a instructions button and a start button. clicking on the instructions button will hide the main page div and show the instructions div which has a back button in it. the back button of course using javascript to hide the instructions page and show the main page div. the start button does not doing anything right now other than hide the main page div. i have already thought out the functions of the game and how i want it to work. i suppose all i want to know is, from those more experienced in javascript, if i am going about creating this game the right way. this method is just something that i came up with and not something that i learned from a tutorial so i wanna make sure im not wasting my time. thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: javascript game question

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,412
  • Joined: 18-April 07

Re: javascript game question

Posted 15 November 2012 - 11:13 PM

Well there is nothing absolutely wrong with what you have, but just know that it may not scale well in the future. Let's say for a moment that you have 20 divs you need to either show or hide. Try applying that to your code you have so far. Would be a lot of work to write all that code just to show and hide divs right?

Perhaps you should think of a function where you can pass it a div and a boolean to tell it if it should show or hide. Then you could pass each div by name to the function and let the function do all the work for you. Whether you have 1 or 1000 divs, one function can be used with them all. If later you need to update how the show/hide functionality works, you edit that one function, not 1000 places where you work with all the divs.

Look up the program design idea of "refactoring" and the design pattern called "extracting" to get a better idea of how you might take a bunch of code and simplify it and extract that functionality into its own function.

:)
Was This Post Helpful? 1
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: javascript game question

Posted 16 November 2012 - 02:02 AM

notes on the HTML: <font> and <center> are deprecated. you can get the same effects better with CSS.
Was This Post Helpful? 1
  • +
  • -

#4 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: javascript game question

Posted 16 November 2012 - 08:33 AM

thanks for the input guys
Was This Post Helpful? 0
  • +
  • -

#5 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 4889
  • View blog
  • Posts: 11,286
  • Joined: 16-October 07

Re: javascript game question

Posted 16 November 2012 - 09:36 AM

Don't Repeat Yourself (DRY). In Javascript, you'll end up doing a whole lot of document.getElementById. You might as well make some helper functions early on.

e.g. 
function setDisplay(objId, displayType) {
	document.getElementById(objId).style.display = displayType;
}

function virusName() { setDisplay('mainpage', 'none'); }

function gameInst() {
	setDisplay('mainpage', 'none');
	setDisplay('instructions', 'block');
}

function returnMain() {
	setDisplay('mainpage', 'block');
	setDisplay('instructions', 'none');
}


You might want to investigate jQuery as well.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1