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