按键/更新未正确调用

Keypresses/Updates not being called properly?

本文关键字：调用 更新 按键      更新时间：2023-09-26

我正在尝试用Javascript制作一个游戏，但目前我已经停滞不前。我正在尝试检测按键并检查它们是否不断关闭以移动字符。这是我正在使用的代码：

var THREE;
var keys;
var update;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var player_fov = 45;
var player_aspect = window.innerWidth / window.innerHeight;
var player_near = 0.1;
var player_far = 10000;
var player_camera = new THREE.PerspectiveCamera(player_fov, player_aspect, player_near, player_far);
var player_material = new THREE.MeshNormalMaterial({color: 0xd0bd4b});
var player_geometry = new THREE.BoxGeometry(1,1,1,1);
var player = new THREE.Mesh(player_geometry, player_material);

function INIT()
{
    scene.add(player);
    player_camera.position.z = 5;
    window.addEventListener('keydown', function (e) {
        keys.keys = (keys.keys || []);
        keys.keys[e.keyCode] = true;
    });
    window.addEventListener('keyup', function (e){
        keys.keys[e.keyCode] = false;
    });
    requestAnimationFrame(INIT);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, player_camera);
    if(keys.keys && keys.keys[87]) //w
    {
        player.position.y += 1;
    }
    if(keys.keys && keys.keys[65]) //a
    {
        player.position.x -= 1;
    }
    if(keys.keys && keys.keys[83]) //s
    {
        player.position.y -= 1;
    }
    if(keys.keys && keys.keys[68]) //d
    {
        player.position.x += 1;
    }
}

当我按任何键时，这不起作用。对于更好的程序员来说，应该是一个相当容易发现的错误。是对 eventListeners 或 requestAnimationFrame 的理解不好吗？如果是，请告诉我如何解决它。谢谢。

我看到您的代码中有一些需要改进的地方：

  1. 您永远不会调用 INIT（） 函数，因此代码永远不会运行。
  2. 您不应在 INIT 函数中使用requestAnimationFrame。那里有很多代码不必每帧都运行。
  3. 创建一个在 INIT 结束时或调用 INIT 后直接调用的function render(){...}。渲染函数应具有requestAnimationFrame(render)
  4. 使用 javascript 对象而不是数组作为键。

这些事情是我认为最紧迫的事情。下面是一个工作示例。

var keys = {};
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var player_fov = 45;
var player_aspect = window.innerWidth / window.innerHeight;
var player_near = 0.1;
var player_far = 10000;
var player_camera = new THREE.PerspectiveCamera(player_fov, player_aspect, player_near, player_far);
var player_material = new THREE.MeshNormalMaterial({color: 0xd0bd4b});
var player_geometry = new THREE.BoxGeometry(1,1,1,1);
var player = new THREE.Mesh(player_geometry, player_material);
INIT();
function INIT()
{
  document.addEventListener('keydown', function (e) {
    keys = (keys || {});
    keys[e.keyCode] = true;
  });
  document.addEventListener('keyup', function (e){
    keys[e.keyCode] = false;
  });
  
    scene.add(player);
    player_camera.position.z = 5;
  
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
   render();
}
function render(){
    requestAnimationFrame(render);
    if(keys && keys[87]) //w
    {
      player.position.y += 0.2;
    }
    if(keys && keys[65]) //a
    {
      player.position.x -= 0.2;
    }
    if(keys && keys[83]) //s
    {
      player.position.y -= 0.2;
    }
    if(keys && keys[68]) //d
    {
      player.position.x += 0.2;
    }
    renderer.render(scene, player_camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>

相关文章：