Редактирование: JavaScript-mechanics
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 12: | Строка 12: | ||
<htmlet nocache="yes">mechanics_TM</htmlet> | <htmlet nocache="yes">mechanics_TM</htmlet> | ||
− | Текст программы на языке JavaScript ( | + | Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> |
Файл '''"mechanics.js"''' | Файл '''"mechanics.js"''' | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
function MainMech(canvas) { | function MainMech(canvas) { | ||
− | |||
− | |||
− | |||
var context = canvas.getContext("2d"); | var context = canvas.getContext("2d"); | ||
+ | var w = canvas.width; | ||
+ | var h = canvas.height; | ||
− | const | + | const g0 = 1; // масштаб ускорения |
− | + | const r0 = h; // масштаб длины - высота окна | |
− | + | const t0 = Math.sqrt(2*r0/g0); // масштаб времени - за сколько времени шар пролетит весь экран по вертикали | |
− | const | + | const v0 = g0*t0; // масштаб скорости - скорость в нижней точке экрана |
− | const | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | const | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | const r = r0 / 40; // радиус шара | |
+ | const g = g0; // 9.8 px, а не метров | ||
+ | const dt = t0* 0.08; // шаг интегрирования | ||
− | var count = true; | + | var count = true; // проводить ли расчет системы |
// создаем объект, связанный с элементом canvas на html странице | // создаем объект, связанный с элементом canvas на html странице | ||
var ocanvas = oCanvas.create({ | var ocanvas = oCanvas.create({ | ||
− | canvas: "#canvasMech", | + | canvas: "#canvasMech", // canvasMech - id объекта canvas на html странице |
− | fps: | + | fps: 60 // сколько кадров в секунду |
}); | }); | ||
// создаем шар | // создаем шар | ||
var arc = ocanvas.display.arc({ | var arc = ocanvas.display.arc({ | ||
− | x: | + | x: 4*r, |
− | y: | + | y: r0/2, |
− | radius: r | + | radius: r, |
end: 360, // круг 360 градусов | end: 360, // круг 360 градусов | ||
fill: "rgba(0, 0, 255, 1)" // цвет | fill: "rgba(0, 0, 255, 1)" // цвет | ||
Строка 75: | Строка 47: | ||
// захват шара мышью | // захват шара мышью | ||
− | var mx | + | var m0x = 0; var m0y = 0; // предыдущая позиция мыши |
+ | var mx = 0; var my = 0; // актуальная позиция мыши | ||
arc.dragAndDrop({ | arc.dragAndDrop({ | ||
− | changeZindex: true, | + | changeZindex: true, // если много шариков - захваченный будет нарисован спереди |
start: function () { | start: function () { | ||
− | count = false; | + | count = false; // на время захвата - отключить расчет |
− | this.fill = "rgba(0, 0, 255, 0.5)"; | + | this.fill = "rgba(0, 0, 255, 0.5)"; // пока держим шарик - он полупрозрачен |
− | + | m0x = 0; m0y = 0; | |
+ | mx = 0; my = 0; | ||
}, | }, | ||
move: function () { | move: function () { | ||
− | + | m0x = mx; m0y = my; | |
− | + | mx = ocanvas.mouse.x; | |
− | + | my = ocanvas.mouse.y; | |
}, | }, | ||
end: function () { | end: function () { | ||
count = true; | count = true; | ||
this.fill = "rgba(0, 0, 255, 1)"; // отпускаем шарик - полупрозрачность убирается | this.fill = "rgba(0, 0, 255, 1)"; // отпускаем шарик - полупрозрачность убирается | ||
− | + | // толкаем шарик по направлению движения мыши | |
+ | vx = (mx-m0x)*2/dt; | ||
+ | vy = (my-m0y)*2/dt; | ||
+ | } | ||
}); | }); | ||
− | |||
ocanvas.bind("mousedown", function () {count = false;}); // заморозить фигуру при клике на поле | ocanvas.bind("mousedown", function () {count = false;}); // заморозить фигуру при клике на поле | ||
− | var | + | var wx = 0; var wy = g; // ускорение |
− | var vx = 0; | + | var vx = 0; var vy = 0; // скорость |
+ | function physics(){ // то, что происходит каждый шаг времени | ||
+ | if (!count) return; | ||
− | + | vx += wx*dt; vy += wy*dt; | |
+ | var dx = vx*dt; var dy = vy*dt; | ||
+ | arc.x += dx; arc.y += dy; | ||
− | + | // проверка граничных условий | |
− | + | if (arc.y + r > r0) { // нижняя граница (ось "y" направлена вниз) | |
+ | arc.y = r0-r; | ||
+ | vy = -vy; | ||
+ | } | ||
+ | if (arc.y - r < 0) { // верхняя граница | ||
+ | arc.y = r; | ||
+ | vy = -vy; | ||
+ | } | ||
− | + | if (arc.x + r > w) { // правая граница | |
− | + | arc.x = w-r; | |
− | + | vx = -vx; | |
− | + | } | |
− | + | if (arc.x - r + dx < 0) { // левая граница | |
− | + | arc.x = r; | |
− | + | vx = -vx; | |
− | + | } | |
− | |||
− | |||
− | |||
} | } | ||
− | |||
ocanvas.setLoop(physics).start(); // функция, выполняющаяся на каждом шаге | ocanvas.setLoop(physics).start(); // функция, выполняющаяся на каждом шаге | ||
} | } |