js模拟宇宙中质量不同的天体对小行星的引力吸引效果代码-html代码-BFW代码库

js模拟宇宙中质量不同的天体对小行星的引力吸引效果代码

代码语言：html

所属分类：其他

代码描述：js模拟宇宙中质量不同的天体对小行星的引力吸引效果代码，在不同的位置点击鼠标左键，你会发现质量越大的天体对小行星的吸引力越大。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          -o-user-select: none;
          user-select: none;  
        }
        
        body {
          background-color : #000;
          padding: 0;
          margin:  0;
          overflow: hidden;
          width:
        }
        #help {
          position: absolute;
          top:0;
          right:0;
          background-color: black;
          color: white;
          cursor: default;
        }
        #game {
          cursor: crosshair;
        }
    </style>



</head>

<body>
    <canvas id="game"></canvas>
    <div id="help">
        Click to create asteroids or drag and drop<br/>
    </div>


    <script>
        window.requestAnimFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
        
        var Utils = {
          dist: function (pl, dps) {
            return Math.sqrt(Math.pow(pl.x - dps.x, 2) + Math.pow(pl.y - dps.y, 2));
          } };
        
        
        var World = function ()
        {
          this.entities = [];
          this.debug = false;
          this.pause = false;
          this.fpsMax = 60;
          this.g = 1;
          this.canvas = "";
          this.context = "";
          this.mousedown = false;
        };
        
        var n_tmp;
        
        World.prototype.init = function () {
        
          var _this;
        
          _this = this;
          n_tmp = undefined;
        
          this.canvas = document.getElementById("game");
          this.canvas.width = document.body.clientWidth;
          this.canvas.height = 500;
          this.context = this.canvas.getContext("2d");
        
          // Events handlers
        
          // disable touchmove default behavior for scrolling
          document.body.addEventListener('touchmove', function (event) {
            event.preventDefault();
          }, false);
        
          var mouseUp = function (e) {
            var tmp = new Asteroid(
            n_tmp.x,
            n_tmp.y,
            15,
            "#0f0");
        
            var tmp_x = n_tmp.x - n_tmp.xp || 0;
            var tmp_y = n_tmp.y - n_tmp.yp || 0;
            var dist = Math.min(Math.sqrt(tmp_x * tmp_x + tmp_y * tmp_y), 50) || 1;
            if (dist != 0)
            {
              tmp.vx = tmp_x / dist * (dist / 10);
              tmp.vy = tmp_y / dist * (dist / 10);
            }
            _this.entities.push(tmp);
            _this.mousedown = false;
            n_tmp = undefined;
          };
          var mouseDown = function (e) {
            _this.mousedown = true;
            n_tmp = {
              x: e.clientX || 0,
              y: e.clientY || 0,
              xp: undefined,
              yp: undefined };
        
          };
          var mouseMove = function (e) {
            if (_this.mousedown && n_tmp)
            {
              n_tmp.xp = e.clientX;
              n_tmp.yp = e.clientY;
            }
          };
          var touchMove = function (e) {
            if (_this.mousedown && n_tmp)
            {
              n_tmp.xp = e.touches[0].pageX;
              n_tmp.yp = e.touches[0].pageY;
            }
          };
        
          // Generating planets
          for (var i = 0; i < 3; i++)
          {
            var tmp = new Planet(
            Math.floor(Math.random() * this.canvas.width) % (this.canvas.width - 200) + 100,
            Math.floor(Math.random() * this.canvas.height) % (this.canvas.height - 200) + 100,
            Math.floor(Math.random() * 100) + 20,
            "#f00");
        
            this.entities.push(tmp);
          }
        
          for (var i = 0; i < 3; i++)
          {
            var tmp = new Planet(
            Math.floor(Math.random() * this.canvas.width) % (this.canvas.width - 200) + 100,
            Math.floor(Math.random() * this.canvas.height) % (this.canvas.height - 200) + 100,
            Math.floor(Math.random() * -100) - 20,
            "#f0f");
        
            this.entities.push(tmp);
          }
        
          // Generating asteroids
          for (var i = 0; i < 50; i++)
          {
            var tmp = new Asteroid(
            Math.floor(Math.random() * this.canvas.width) % (this.canvas.width - 200) + 100,
            Math.floor(Math.random() * this.canvas.height) % (this.canvas.height - 200) + 100,
            15,
            "#ff0");
        
            this.entities.push(tmp);
          }
        
          this.canvas.addEventListener("mousedown", mouseDown);
          this.canvas.addEvent.........完整代码请登录后点击上方下载按钮下载查看