JavaScript实现伪随机正态分布与游戏奖励算法

作者:半夏时间:2026-10-23 12:56:21浏览:619

本文介绍在JavaScript中实现伪随机正态分布的方法,重点讲解其在游戏开发随机奖励系统中的应用。通过生成数组并依权重选取的方式,结合Canvas可视化展示分布效果,提供完整的HTML与JS代码示例,帮助开发者优化随机事件逻辑。

JavaScript正态分布算法概述

本文详细展示了如何在JavaScript中实现基于伪随机数的正态分布算法,并通过具体代码示例进行说明。该方案为相关技术学习及实际工作提供了具有参考价值的实现思路,适合需要处理随机分布场景的开发者参考。

游戏开发中的随机奖励机制

在游戏开发领域,随机奖励机制是常见需求。通常的做法是预先构建好奖励数据数组,然后按照特定规则逐个提取元素,以此实现随机发放奖励的逻辑。

正态分布测试代码实现

以下提供了用于测试正态分布效果的JavaScript代码实现:

可视化与完整代码结构


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<canvas id="myCanvas" width="800" height="400" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas2" width="800" height="400" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>
<textarea id="text" cols="200" rows="5000"></textarea>
<script type="text/javascript">

  var timesArr = [];
  var timesArrObj = {};
  window.onload = function () {
//    for (var meter = 0; meter < 800; meter++) {
//      var times = getNumberInNormalDistribution(20, 7);
//      addPoint(times, meter);
//      timesArr.push(Math.floor(times));
//    }
//    drawGreenTab(timesArr,1);
    // drawLine(0, 380, 800, 380);
    drawResult(1);
    drawResult(2);
    drawResult(0);
    drawGreenTab(timesArrObj[1], 1);
    drawGreenTab(timesArrObj[2], 2);
    drawGreenTab(timesArrObj[0], 0);

  }
  //制作绿色柱状图表
  function drawGreenTab(timesArr, color) {
    var timesTypes = {};
    for (var i in timesArr) {
      var times = timesArr[i];
      if (timesTypes[times] == null) {
        timesTypes[times] = 0;
      } else {
        timesTypes[times] = timesTypes[times] + 1;
      }
    }
    for (var i in timesTypes) {
      drawRect(i, timesTypes[i], 4, color);
    }
  }
  //画圆点
  function addPoint(y, x, color) {
    y = 400 - y;
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    if (color == null) {
      cxt.fillStyle = "#FF0000";
    } else {
      cxt.fillStyle = color;
    }
    cxt.beginPath();
    cxt.arc(x, y, 2, 0, Math.PI * 2, true);
    cxt.closePath();
    cxt.fill();
  }
  var meter = 0;
  //划线
  function drawLine(beginx, beginy, endx, endy) {
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(beginx, beginy);
    cxt.lineTo(endx, endy);
    cxt.stroke();
  }
  //模拟正态分布取值
  function getNumberInNormalDistribution(mean, std_dev) {
    return mean + (uniform2NormalDistribution() * std_dev);
  }
  //模拟正态分布偏差
  function uniform2NormalDistribution() {
    var sum = 0.0;
    for (var i = 0; i < 12; i++) {
      sum = sum + Math.random();
    }
    return sum - 6;
  }
  //画一个长方形
  function drawRect(x, y, width, index) {
    var color = "#FF0000";
    if (index == 1) {
      color = "#00FF00";
    } else if (index == 2) {
      color = "#0000FF";
    }
    var c = document.getElementById("myCanvas2");
    var cxt = c.getContext("2d");
    cxt.fillStyle = color;
    cxt.fillRect(x * width + index * 200, 400 - y, width - 2, y);
  }
  //画出生成的图像
  function drawResult(index) {
    var color = "#FF0000";
    if (index % 3 == 1) {
      color = "#00FF00";
    } else if (index % 3 == 2) {
      color = "#0000FF";
    }
    var result = generateList();
    var resultStr = "";
//    for (var i in result) {
//      resultStr = resultStr + result[i] + "\n";
//    }
    //document.getElementById("text").value = resultStr;
    var resulttimes = {};
    for (var i in result) {
      if (resulttimes[result[i]] == null) {
        resulttimes[result[i]] = 1;
      } else {
        resulttimes[result[i]] = resulttimes[result[i]] + 1;
      }
    }
    for (var i in resulttimes) {
      resultStr = resultStr + resulttimes[i] + "\n";
    }
    document.getElementById("text").value = resultStr;
    var timeslist = [];
    var times = 1;
    for (var i in result) {
      if (result[i] == index) {
        addPoint(times, i / 5, color);
        if (timesArrObj[index] == null) {
          timesArrObj[index] = [];
        }
        timesArrObj[index].push(times);
        times = 0;
      } else {
        times++;
      }
    }
  }
  //权重数组
  var wt = [105, 216, 316, 488, 1000, 2000, 3680, 5890];//,14770,71535
  //生成结果数组函数,结果为权重数组的索引,从0开始
  function generateList() {
    //生成的结果数组长度
    var n = 50000;
    var wtp = [];
    var sum = 0;
    for (var i in wt) {
      sum = sum + wt[i];
    }
    for (var i in wt) {
      wtp.push(wt[i] / sum);
    }
    var result = [];
    var p = [];
    for (var i in wtp) {
      var inp = getNumberInNormalDistribution(1 / wtp[i], 1 / wtp[i] / 3);
      p.push(inp);
    }
    for (var i = 0; i < n; i++) {
      var minp = 99999999;
      var minj = -1;
      for (var j in p) {
        if (p[j] < minp) {
          minp = p[j];
          minj = j;
        }
      }
      result.push(minj);
      for (var j in p) {
        p[j] = p[j] - minp;
      }
      p[minj] = getNumberInNormalDistribution(1 / wtp[minj], 1 / wtp[minj] / 3);
    }
    return result;
  }
</script>
</body>
</html>

总结

以上内容为本文的全部分享,旨在为读者的技术学习提供辅助。欢迎持续关注本站以获取更多技术资源与支持。

作者最新文章