Question

我正在构建一个游戏，我只使用jQuery和AJAX来导航（加载内容）和类似的东西。页面永远不会刷新。

问题在于我需要为所有内容创建函数。例如：

<p onclick="a_function('a_value')">Click me!</p>

这将导致最后的许多功能。我想知道是否有更好的方法去？或者我必须为游戏中发生的每件小事写一些函数，玩家每次点击一下吗？

Answer 1

确实！你必须这样做。即使你在asp php java python等中写你的应用程序，你必须编程这些东西！如果你使用像spring，grails，Yii等框架那些可以处理crud任务和pagecreation ......但处理导航的逻辑和应用程序的工作方式必须由你自己编程！

铜

Answer 2

最终，您可能最终会编写一堆代码和许多不同的函数来控制您的游戏。但是，您可以根据您要完成的任务重用某些函数，这将是更好的编码实践并导致更易于维护的代码。例如，此代码：

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

可能成为：

<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>

同样，这一切都取决于你想要做什么。

Answer 3

这就是想法..你可以尝试让你的功能尽可能通用。您可能想通过阅读Javascript设计模式开始。here是一本免费的电子书。

此外，您还希望将javascript保存在单独的文件中，而不是将其包含在标记中。因为你正在使用jquery，你可以使用jquery事件将事件绑定到dom。检查api：http://api.jquery.com/category/events/

例如

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

Answer 4

我在这些行中使用了一些内容，然后我将其包含在每个页面的底部，它允许我使用<a>标记的href和target属性来控制页面：

(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;
    }
})();

所以你可以编写简单的HTML，如：

<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>

请在此处查看示例：http://jsfiddle.net/Paulpro/AD9Gj/

Answer 5

由于您使用的是jQuery，因此您可能需要考虑使用jQuery widgets封装行为。拥有一堆独立的函数可能很难维护，但是小部件可以让你更干净地使用继承和清理接口之类的东西。例如：

(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);

你会这样使用它：

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

使用jQuery和ajax构建页面

5 个答案: