SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript RPG game

    Hi i found this script here its really cool and i want to make a simple rpg game with it. i dont know that much about javascript though.

    what i want to do is this:

    1. make certain tiles of the map links that open up in message boxes or somthing.

    2. make a npc that will say random things.

    3. i just want to know what they javascript code means so i can edit it myself.

    4. and with the above i want to make it so the character can be controlled by the arrow keys instead of the numeric keypad.

    any ideas?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gordon17 View Post
    i dont know that much about javascript though.
    Creating a game is not an easy task. Creating a game without not even knowing the language you will program it in makes it even more harder.


  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creating a game is not an easy task. Creating a game without not even knowing the language you will program it in makes it even more harder.
    I know creating a game is not an easy task, that is why I am going to make this very very simple. I guess I could say it would be basically an interactive map.

    Can i not learn javascript whilst programming the 10k of script that the game consists of?

    --------------------------------------------------------------------------------------------------------------------------------------------

    OK. It was late last night when i posted that so I don't think I was being clear on exactly what I want to do.

    I'll try to explain more.

    I am going to make a simple javascript web browser RPG game. The script I am going to use is already made, I just need some help on editing it.

    I do know HTML, CSS, and some PHP programming. so i am familiar with learning how to program.

    what I want is somebody that will look at the script and maybe tell me how I can go about changing the things I want to change.

    Script is here:

    http://www.planet-source-code.com/vb...=2152&lngWId=2

    The modifications I want to make are few:

    1.When the player walks over certain tiles a message box will appear over him.

    2.make certain tiles click able as links, eg. a sign, so text will appear with a message.

    The character already has the ability to walk around over the map, the only thing I want to change on that is switch the controls from the keypad to the arrow keys.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is not exactly a 15 minutes task. You should maybe hire a JavaScript developer for this?

  5. #5
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, here is what i got so far. I figured out the keys myself, so now instead of running off the numpad it is wasd.

    http://me2.110mb.com/javascriptRPG/map.htm


    now I want to make it so i can make signs. kinda like the warp portal (the hollow tree) but when you touch them an alert message shows up, or...preferably so when the character touches it it opens the desired text up in a form area.

    =P
    Last edited by gordon17; Apr 9, 2008 at 12:54.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Hmm... without looking at the code I'd do something like this:

    Code javascript:
    var messagebox = document.getElementById('messagebox');
    messagebox.text = [
        'Message 1'
        , 'Message 2'
        , 'Message 3'
    ];
    // ...
    if (dest.type == 'sign') {
        displayMessage(dest.messageId);
    }
    function displayMessage(index) {
        var messagebox = document.getElementById('messagebox');
        messagebox.value = messagebox.text[index];
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Hmm... without looking at the code I'd do something like this:

    Code javascript:
    var messagebox = document.getElementById('messagebox');
    messagebox.text = [
        'Message 1'
        , 'Message 2'
        , 'Message 3'
    ];
    // ...
    if (dest.type == 'sign') {
        displayMessage(dest.messageId);
    }
    function displayMessage(index) {
        var messagebox = document.getElementById('messagebox');
        messagebox.value = messagebox.text[index];
    }
    Hmmm...I'm still pretty new to javascript. still not sure how to integrate it.

    the updated game is here:

    http://me2.110mb.com/thestein.php

    I want to make it so when a message is displayed it will show up in a text box on the right.

    Yes...setting a certain ID with coresponding messages for certain tiles is exactly what i want to do.

    Last edited by gordon17; Apr 9, 2008 at 14:14.

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you think that this would be a great opportunity to actually learn JavaScript? There will always be people giving you scripts like above, but seriously, learn JavaScript! You will have good fun.


  9. #9
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is exactly what i mean to do

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gordon17 View Post
    the updated game is here:

    http://me2.110mb.com/thestein.php
    The site address doesn't work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yesh it does! =O

    no...sorry about that, my bad...i had the page in html then i switched it to php (im more of a php person). i just changed the link so it should work.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    I've just had a look at the code and large parts of it are a mess, so I'll explain what I'm tidying up as I go through and get the message part working.

    The map uses a two-part system to store the map information, first the image and then the cell type. Currently 0 means passable, 1 means impassable and 2 means jump (to another map). When it's 2, there is additionational information provided, such as 2-2-2-6 which means jump-map-x-y. We can use a similar system for cells with a message, and use 0-2 to indicate type-message which for a sign, ends up being sign;1-1;

    The messages might as well get initialised in the same approximate place as the map, so they can be done just after the map, as the very first piece of code on the page.

    Code javascript:
    // init the sign messages
    message = [
    	'Message 1'
        , 'Message 2'
        , 'Message 3'
    ];
     
    //isNS is true if the browser is Netscape, false if it is Internet Explorer
    ...

    be aware that 1-0 is the first message, 1-1 the second, 1-2 the third, and so on.

    I do not like the browser detection that is being used, but I'll leave that for now to focus instead on eval (which is evil). Eval isn't needed because document['r' + i + 'c' + j].src can be used instead to achieve what it was being used for.

    Along with that, scrn[map].split("\n")[i].split(";")[j*2] is something not to be put up with either. While the iconType array is being created, we can at the same time also create an iconImage array, which will become useful in later development.

    Code javascript:
    //initalize empty array to store the type of each map cell
    iconImage = new Array(rows);
    iconType = new Array(rows);
    for (i=0; i<rows; i++) {
     iconImage[i] = new Array(rows);
     iconType[i] = new Array(rows);
    }
    ...
    function showmap() {
    	//the function 'split()' creates an array from a string, separating on the given character
    	for(i=0; i <= rows-1; i++) {  //for each line in scrn
    	    lineArray = scrn[map].split("\n")[i].split(";");
    		for(j=0; j <= rows-1; j++) { //for each graphic in the scrn line
    			//store the cell type - road, wall, or jump
    			iconImage[i][j] = lineArray[(j*2)];
    			iconType[i][j] = lineArray[(j*2)+1];
    			//change the image in the table row and column to use the specified graphic
    			if (iconImage[i][j]) { //if there is a graphic specified
    				document['r' + i + 'c' + j].src = iconImage[i][j] + '.gif';
    			} else { //if missing, clear with empty graphic
    				document['r' + i + 'c' + j].src='no.gif';
    			}
    		}
    	}
    }

    Now for the animate() function, which is where the meat of the logic is performed.

    Currently it is split up into two nearly identical blocks of code, one for handling the x movement and one for handling the y movement. This is quite wasteful as we will need to duplicate every addition to the logic, so I'll bring them both together and make some optimisations.

    For example, values are multipled by one to force them to be a number, but all of the values involved are already numbers. I presume that the author wasn't too sure about things, and just forced them to be numbers as a "just in case" measure. There are much better ways to achieve that anyway, such as Number('string') which makes it more clear what you're wanting to achieve.

    Here's the updated animate() function

    Code javascript:
    function animate() {
    	//if they moved left or right
    	if (p1x != 0 || p1y != 0) {
    		if (p1x > 0) p1icon.src = "guy_right.gif";
    		if (p1x < 0) p1icon.src = "guy_left.gif";
    		if (p1y > 0) p1icon.src = "guy_front.gif";
    		if (p1y < 0) p1icon.src = "guy_back.gif";
    		//if they won't move off the map
    		if ((p1CurX + p1x >= 0) && (p1CurX + p1x < rows) &&
    			(p1CurY + p1y >= 0) && (p1CurY + p1y < rows)) {
    			//if the cell type is road (not a wall)
    			if (iconType[p1CurY + p1y][p1CurX + p1x] == 0) {
    				//change player1's position
    				p1CurX += p1x;
    				p1.left = p1CurX * iconsize;
    				p1CurY += p1y;
    				p1.top = p1CurY * iconsize;
    			}
    			//if the cell contains a message
    			if (iconType[p1CurY + p1y][p1CurX + p1x].length > 1) {
    				alert(message[iconType[p1CurY + p1y][p1CurX + p1x].substring(2)]);
    			}
    			//p1x and p1y are now the new coordinate positions
    			//if the cell type is a jump
    			if (iconType[p1CurY][p1CurX].indexOf("2") == 0) {
    				//jump to new screen
    				doJump(iconType[p1CurY][p1CurX]);
    			}
    		}
    		//clear the movement so they don't keep moving again and again
    		p1x = 0;
    		p1y = 0;
    	}
    }

    I've tested this locally and it works fine. Don't hesitiate to get in tough if you have any issues with this.
    Last edited by paul_wilkins; Apr 9, 2008 at 21:59.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am doing something wrong. I'm getting the error: "message is not defined". it might be because i didn't set up the message index right.

    is this:

    Code:
    // init the sign messages
    signMessage = [
        'Message 1'
        , 'Message 2'
        , 'Message 3'
    ];
     
    //isNS is true if the browser is Netscape, false if it is Internet Explorer
    ...
    all of the message part of the code or am i getting confused here? is there a var and Message Function that goes with that or is that it?

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    That was a casualty of editing. It should be

    Code javascript:
    message = [
    ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok yeah that was the problem *grins stupidly* the message alerts work now.

    but now the Jumps don't work and are coming up as "undefined" alerts. *sigh*

    do you know of any online JavaScript manuals?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    We should check for the jump before showing a message

    Code javascript:
    //if the cell type is a jump
    if (iconType[p1CurY][p1CurX].indexOf("2") == 0) {
        //jump to new screen
        doJump(iconType[p1CurY][p1CurX]);
    }
    //if the cell contains a message
    if (iconType[p1CurY + p1y][p1CurX + p1x].length > 1) {
        alert(message[iconType[p1CurY + p1y][p1CurX + p1x].substring(2)]);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gordon17 View Post
    do you know of any online JavaScript manuals?
    I recommend you the JavaScript Bible. It is a great book to learn JavaScript from, and can also be used as a reference book.

    There are tons of tutorials online if you don't want to buy a book.

  18. #18
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @pepe
    thanks...I found JavaScriptKit.com, its great. This summer when I have access to a library I'm going to check out some coding books and steep my brain in them.

    @pm
    Well...I couldn't get your code to work. The portals weren't working even if i removed the "message attribute" so i assumed it was somthing in the way you redid the code and went back to the old animation function.

    this is what I ended up using for the message feature
    Code:
    if (iconType[(p1CurY * 1) + (p1y * 1)][p1CurX].indexOf("1") == 0) {
        alert(message[iconType[(p1CurY * 1) + (p1y * 1)][p1CurX].substring(2)]);
       }
    worked like a charm, portals worked and ****, but all the trees were showing up as alerts (undefined) so i just made a number 3 for the sign messages and the new code looks like this:
    Code:
    if (iconType[(p1CurY * 1) + (p1y * 1)][p1CurX].indexOf("3") == 0) {
        alert(message[iconType[(p1CurY * 1) + (p1y * 1)][p1CurX].substring(2)]);
       }
    now the trees don't speak. the portals all work, and I can put signs where i want to.

    W00T!

    thanks guys for the help.

  19. #19
    SitePoint Zealot
    Join Date
    Apr 2008
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad to know that it worked for u!
    Last edited by web67; Apr 15, 2008 at 20:18.
    Keep Up to date about everthing Website Flipping
    Find out how to same thousands on your Mortgage Broker fees.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •