HTML5 和 Javascript 中的随机移动答案

【问题标题】：Random movement in HTML5 and JavascriptHTML5 和 Javascript 中的随机移动
【发布时间】：2014-02-21 20:29:04
【问题描述】：

我正在为游戏学习 html5。我需要随机移动一个球。现在球从左向右移动，球员知道球会在哪里。我需要球随机移动。

我附上了我正在使用的代码。随机速度和角度有点想念，我不知道怎么写。我正在使用 simplegame.js

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "simpleGame_1_0.js"></script>

<script type="text/javascript">
  var scene;
  var sprite1;
    function init(){
        scene = new Scene();
        sprite1 = new Sprite(scene, "brand1.png", 90, 90);
        sprite1.setMoveAngle(45);
        sprite1.setSpeed(10);
        scene.start();
      } // end init
   function update(){
        scene.clear();
        //handle events here
        //update all the sprites
        sprite1.update();
        }

    </script>
    </head>
<body onload = "init()">
</body>
</html

【问题讨论】：

标签： javascript html game-physics

【解决方案1】：

这样可以得到一定范围内的随机数

var min = -10;
var max = 10;
// and the formula is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;

只需将静态值 (45, 10) 替换为这样的随机变量

function init(){
    scene = new Scene();
    sprite1 = new Sprite(scene, "brand1.png", 90, 90);
    sprite1.setMoveAngle(Math.floor(Math.random() * (359 - 0 + 1)) + 0); //Random angle from 0 and 359
    sprite1.setSpeed(Math.floor(Math.random() * (20 - 1 + 1)) + 0); //Random speed between 0 and 20
    scene.start();
  } // end init

诅咒你可以设置不同的范围。

【讨论】：

【解决方案2】：

请阅读library documentation。

有一种方法可以解决这个问题：使用 changeImgAngleBy() 进行动画旋转。

作者也有fiddle到test任何你需要的东西。

祝你好运！

【讨论】：

谢谢。我去图书馆看看。

【解决方案3】：

我还没有看到simplegame.js 代码，但是如果在您提供的页面上定义了变量，则可以使用包含随机数的变量。

Math.random(); 返回一个从 0 到但不包括 1 的随机数。然后您可以将此数字乘以您的最大值。

看起来您首先在 init() 方法中初始化代码（例如，设置比赛场地），然后您可以使用 update() 函数更新序列。

试试这样的：

 <script type="text/javascript">
 var scene;
 var sprite1;

 function init(){
    scene = new Scene();
    sprite1 = new Sprite(scene, "brand1.png", 90, 90);
    sprite1.setMoveAngle(45);
    sprite1.setSpeed(10);
    scene.start();
  } // end init

  function update(){
    scene.clear();
    //handle events here
    //update all the sprites

    // Here comes the extra code:
    var randomAngle = parseInt(Math.random() * 90); // Random from 0 to 90 degrees
    var randomSpeed = parseInt(Math.random() * 100); // random from 0 to 100 speed
                                                      // Not sure if needed but,
                                                      // the parseInt makes an integer
                                                      // (a value of 0,1,2,3,...n)

    // Now pass the variables into the functions of the sprite (the functions are of  
    // the sprite object and will change its behaviour)
    sprite1.setMoveAngle(randomAngle);
    sprite1.setSpeed(randomSpeed);
    // End of extra code
    sprite1.update();
  }

</script>

有效吗？

PS 为 FireFox 安装 Firebug 非常有帮助，这样您就可以看到显示错误消息的窗口。

【讨论】：

谢谢！极好的！太好了。