Редактирование: JavaScript-mechanics
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | |||
− | |||
Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''" | Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''" | ||
− | + | Левая клавиша мыши по шарику - захватить его | |
− | Левая клавиша мыши по шарику - | + | Левая клавиша мыши по полю - заморозить шарик |
− | + | <addscript src=ocanvas-251/> | |
− | Левая клавиша мыши по полю - заморозить шарик | + | <addscript src=Vector2D/> |
− | + | <addscript src=mechanics/> | |
− | |||
− | |||
<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"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
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 | + | const t0 = Math.sqrt(2*r0/g0); // масштаб времени - за сколько времени шар пролетит весь экран по вертикали |
− | const | + | const v0 = g0*t0; // масштаб скорости - скорость в нижней точке экрана |
− | const | ||
− | |||
− | |||
− | const | + | const r = r0 / 40; // радиус шара |
− | const | + | const g = g0*20000; // 9.8 px, а не метров |
− | const | + | const dt = 1/(t0*2); // шаг интегрирования |
− | + | 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: t0*2 // сколько кадров в секунду |
}); | }); | ||
− | // создаем | + | // создаем круг |
var arc = ocanvas.display.arc({ | var arc = ocanvas.display.arc({ | ||
− | x: | + | x: 4*r, |
− | y: | + | y: r0/2, |
− | radius: r | + | radius: r, |
− | end: 360, | + | start: 0, |
+ | end: 360, | ||
fill: "rgba(0, 0, 255, 1)" // цвет | fill: "rgba(0, 0, 255, 1)" // цвет | ||
}).add(); | }).add(); | ||
− | // захват | + | // захват объекта мышью |
− | 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)*100; | ||
+ | vy = (my-m0y)*100; | ||
+ | } | ||
}); | }); | ||
− | + | ocanvas.bind("mousedown", function () {count = false;}); // заморозить объект при клике на поле | |
− | ocanvas.bind("mousedown", function () {count = false;}); // заморозить | ||
− | var | + | var vvx = 0; var vvy = g; // ускорение |
− | var vx = 0; | + | var vx = 0; var vy = 0; // скорость |
+ | function physics(){ // то, что происходит каждый шаг времени | ||
+ | if (!count) return; | ||
− | + | vx += vvx*dt; vy += vvy*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(); // функция, выполняющаяся на каждом шаге | ||
} | } | ||
− | </ | + | </source> |
</toggledisplay> | </toggledisplay> | ||
== См. также == | == См. также == | ||
− | |||
*[[JavaScript-mechanics-box2D]] | *[[JavaScript-mechanics-box2D]] | ||
*[[JavaScript-приложения]] | *[[JavaScript-приложения]] | ||
− | |||
[[Category: Программирование]] | [[Category: Программирование]] | ||
[[Category: JavaScript]] | [[Category: JavaScript]] |