Building a page with jQuery and ajax

I´m building a game where I only use jQuery and AJAX to navigate (load content) and stuff like that. The page never refreshes.

The problem is that I need to create functions for exactly everything. For example:

<p onclick="a_function(开发者_StackOverflow'a_value')">Click me!</p>

This will result in a lot of functions at the end. I'm wondering if there is a better way to go? Or do I have to write functions for every little thing that happens in the game, every single click the player makes?

Indeed ! you have to do this. even if you would write you app in asp php java python etc you have to program those things! if your using a framework like spring, grails, Yii etc. those could handle the crud tasks and pagecreation ... but logic for handling navigation and the way the app works must be programmed by yourself !

cu

Ultimately, you will probably end up writing a bunch of code and many different functions to control your game. However, you may be able to reuse some functions depending on what you're trying to accomplish, which would be better coding practice and result in more maintainable code. For example, this code:

<p onclick="moveup()">Up</p>
<p onclick="movedown()">Down</p>
<p onclick="moveleft()">Left</p>
<p onclick="moveright()">Right</p>

Could become:

<p onclick="move('up')">Move Up</p>
<p onclick="move('down')">Move Down</p>
<p onclick="move('left')">Move Left</p>
<p onclick="move('right')">Move Right</p>

Again, it all really depends on what you're trying to do.

well thats the idea.. you can try to make your functions as generic as possible. You might wanna start off by reading about Javascript design patterns.. here is a free ebook.

Also you would want to keep your javascript in a separate file and not include it in your markup. since yo are using jquery you can bind events to the dom using jquery events. check the api here: http://api.jquery.com/category/events/

Eg.

$("p").click(function(){alert("you clicked on p");});  //binds an event on all <p> tags in the page

I've used something along these lines before which I include at the bottom of every page and it allows me to control the page using the href and target attributes of <a> tags:

(function(){
    var as = document.getElementsByTagName('a');
    for(var i = 0; i < as.length; i++){
        if(as[i].getAttribute('target') == '_None')
            as[i].onclick = targetNone;
        if(as[i].getAttribute('target').substring(0, 5) == '_Load')
            as[i].onclick = loadIntoTarget;
     }

    function targetNone(){
        alert('Make Ajax call to "'+this.href+'"');
        return false;
    }

    function loadIntoTarget(){
        alert('Make Ajax call to "'+this.href+'", and put it in "'+this.getAttribute('target').substring(6)+'"');
        document.getElementById(this.getAttribute('target').substring(6)).innerHTML = 'Ajax Result';
        return false;
    }
})();

So you can write simple HTML like:

<a href="process/purchase-weapon.php" target="_None">Buy!</a><br />
<a href="process/sell-weapon.php" target="_None">Sell!</a><br />
<a href="page/weapon.php?id=10" target="_Load-thediv">Info</a><br />
<div id="thediv">Weapon info will be loaded here.</div>

See an example here: http://jsfiddle.net/Paulpro/AD9Gj/

Since you're using jQuery, you may want to consider encapsulating behavior using jQuery widgets. Having a bunch of standalone functions can be hard to maintain, but widgets will allow you to more cleanly use things like inheritance and clean interfaces. For example:

(function($) {

    var DEAD_SPRITE_IDX = 0;
    var HEALTHY_SPRITE_IDX = 1;
    var WOUNDED_SPRITE_IDX = 2;

    $.widget('creature', {

        options: {
            hitPoints: 100,
            images: undefined
        },

        _create: function() {
            var me = this;

            this.element.css(
                'background-image', this.options.images[HEALTHY_SPRITE_IDX]);

            this.element.click(function() {
                me.damage(25);
            });
        },

        damage: function(points) {
            this.hitPoints -= points;
            if (this.hitPoints <= 0) {
                this._die();
            }
        },

        _die: function() {
            this.element.css('background-image', this.options.images[DEAD_SPRITE_IDX]);
        }

    });
})(jQuery);

You'd use it like this:

var monster = $('.the-creature').creature({
    hitPoints: 500, 
    images: ['images/dead.png', 'images/healthy.png', 'images/wounded.png']});
monster.creature('damage', 15);