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)
            {
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0