admin管理员组

文章数量:1394759

I'm getting into game developing online. I am trying to make an online FPS game, and I've only gotten to the point where I need to update my character. I am trying to keep my code simple, using only a draw and update function. When the html loads, I execute both: (Is this necessary?)

<body onload='DRAW(); UPDATE();'>

The draw function draws the player to the screen, and the update is supposed to check for a keypress to move the character. I am trying to make the script update using this:

function UPDATE()
{
    update = setInterval(UPDATE, 60);
}

and to my knowledge, it is working fine because when I try and edit code in my online IDE (c9.io) which I use to test the site, it freezes when the site is running. I am also calling eventListeners in the draw function. (Is this proper if I want to test for a key down every frame?)

function DRAW()
{
    window.addEventListener('keydown', function (e) {
        keys.keys = (keys.keys || []);
        keys.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e){
        keys.keys[e.keyCode] = false;
    });
}

My questions are:

  • Is there an easier way to make a script update every frame?

  • Is there a JavaScript addon (like Three.js) I can use to make developing this easier on myself?

Any knowledge is greatly appreciated.

I'm getting into game developing online. I am trying to make an online FPS game, and I've only gotten to the point where I need to update my character. I am trying to keep my code simple, using only a draw and update function. When the html loads, I execute both: (Is this necessary?)

<body onload='DRAW(); UPDATE();'>

The draw function draws the player to the screen, and the update is supposed to check for a keypress to move the character. I am trying to make the script update using this:

function UPDATE()
{
    update = setInterval(UPDATE, 60);
}

and to my knowledge, it is working fine because when I try and edit code in my online IDE (c9.io) which I use to test the site, it freezes when the site is running. I am also calling eventListeners in the draw function. (Is this proper if I want to test for a key down every frame?)

function DRAW()
{
    window.addEventListener('keydown', function (e) {
        keys.keys = (keys.keys || []);
        keys.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e){
        keys.keys[e.keyCode] = false;
    });
}

My questions are:

  • Is there an easier way to make a script update every frame?

  • Is there a JavaScript addon (like Three.js) I can use to make developing this easier on myself?

Any knowledge is greatly appreciated.

  • javascript
  • html
Share Improve this question asked Mar 20, 2016 at 0:18 Taylor BrownTaylor Brown 891 gold badge1 silver badge10 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 2

This makes everything crash:

function UPDATE()
{
    update = setInterval(UPDATE, 60);
}

You are recursively creating a new interval every 60ms; the first time you call UPDATE, you create an interval that creates a new interval every 60ms. All newly create intervals do the same. Don't really know what you actually want to do here.

I am also calling eventListeners in the draw function. (Is this proper if I want to test for a key down every frame?)

It's fine to create eventlisteners in the draw function, provided you only call this function once. Which I guess you don't. Each time you call DRAW() a new set of eventlisteners will be added, and you really don't want that.

What you need is a form of game loop. Explaining how to create an FPS game is a bit more than I can do, but you can start by looking at this article Anatomy of a video game

本文标签： htmlJavascript update functionsStack Overflow

版权声明：本文标题：html - Javascript update functions - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744103094a2590952.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。