| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| − | [[Виртуальная лаборатория]] > [[JavaScript-приложения]] <HR>
| |
| − |
| |
| | == Случайное блуждание == | | == Случайное блуждание == |
| | | | |
| − | '''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript | + | '''''Это приложение - аналог [[Флэш-приложения:_механика|Flash-приложения]], написанный на JavaScript |
| − | | |
| − | | |
| − | | |
| − | {| class="simple" border="1"
| |
| − | |<htmlet nocache="yes">Random_walk_TM</htmlet>
| |
| − | |}
| |
| − | | |
| − | | |
| − | {| class="simple" border="1"
| |
| − | |<htmlet nocache="yes">Random_walk_TM_400x300_1</htmlet>
| |
| − | |<htmlet nocache="yes">Random_walk_TM_400x300_2</htmlet>
| |
| − | |<htmlet nocache="yes">Random_walk_TM_400x300_3</htmlet>
| |
| − | |}
| |
| − | | |
| − | | |
| − | | |
| − | Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
| |
| − | Файл '''"random_walk.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
| |
| − | function MainRW(canvas) {
| |
| − | var context = canvas.getContext("2d");
| |
| − | | |
| − | var start = 0;
| |
| − | var d, x, y;
| |
| − | var w = canvas.width;
| |
| − | var h = canvas.height;
| |
| − | | |
| − | setInterval(tick, 30);
| |
| − | | |
| − | | |
| − | function Rand() {
| |
| − | return Math.floor(3 * Math.random()) - 1;
| |
| − | }
| |
| − | | |
| − | function tick() {
| |
| − | if (start == 0) {
| |
| − | start = 1;
| |
| − | d = 10;
| |
| − | x = w / 2;
| |
| − | y = h / 2;
| |
| − | }
| |
| − | else {
| |
| − | x = x + d * Rand();
| |
| − | y = y + d * Rand();
| |
| − | if (x < 0) x = x + w;
| |
| − | if (x > w-10) x = x - w;
| |
| − | if (y < 0) y = y + h;
| |
| − | if (y > h-10) y = y - h;
| |
| − | }
| |
| − | | |
| − | context.fillStyle = "rgb("+
| |
| − | Math.floor(Math.random()*256)+","+
| |
| − | Math.floor(Math.random()*256)+","+
| |
| − | Math.floor(Math.random()*256)+")";
| |
| − | context.beginPath();
| |
| − | context.rect(x, y, d-1, d-1);
| |
| − | context.closePath();
| |
| − | context.fill();
| |
| − | }
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | Файл '''"random_walk.html"'''
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | <html>
| |
| − | <head>
| |
| − | <script src="random_walk.js" type="text/javascript"></script>
| |
| − | </head>
| |
| − | <body onload="MainRW(document.getElementById('canvasRW'));">
| |
| − | <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | </toggledisplay>
| |
| − | | |
| − | == Использование мыши ==
| |
| − | | |
| − | '''''Это приложение - аналог [[Флэш-приложения: техника программирования|вот этого flash-приложения]], написанный на JavaScript
| |
| − | | |
| − | | |
| − | | |
| − | <htmlet nocache="yes">mouse_use_TM</htmlet>
| |
| − | | |
| − | | |
| − | Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
| |
| − | Файл '''"mouse_use.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | function MainMU() {
| |
| − | var canvas = document.getElementById('canvasMU');
| |
| − | var context = canvas.getContext("2d");
| |
| − | | |
| − | var w = canvas.width;
| |
| − | var h = canvas.height;
| |
| − | | |
| − | var y0 = h / 2;
| |
| − | var r = w / 7;
| |
| − | | |
| − | var canvas = oCanvas.create({
| |
| − | canvas: "#canvasMU",
| |
| − | fps: 60
| |
| − | });
| |
| − | | |
| − | var rectangle = canvas.display.rectangle({
| |
| − | x: r,
| |
| − | y: y0-r,
| |
| − | width: 2*r,
| |
| − | height: 2*r,
| |
| − | fill: "rgba(255, 0, 0, 1)"
| |
| − | });
| |
| − | | |
| − | var arc = canvas.display.arc({
| |
| − | x: 5*r,
| |
| − | y: y0,
| |
| − | radius: r,
| |
| − | start: 0,
| |
| − | end: 360,
| |
| − | fill: "rgba(0, 0, 255, 1)"
| |
| − | });
| |
| − | | |
| − | canvas.addChild(rectangle);
| |
| − | canvas.addChild(arc);
| |
| − | | |
| − | rectangle.dragAndDrop({
| |
| − | changeZindex: true,,
| |
| − | move: function () {this.fill = "rgba(255, 0, 0, 0.5)";},
| |
| − | end: function () {this.fill = "rgba(255, 0, 0, 1)";}
| |
| − | });
| |
| − | arc.dragAndDrop({
| |
| − | changeZindex: true,
| |
| − | move: function () {this.fill = "rgba(0, 0, 255, 0.5)";},
| |
| − | end: function () {this.fill = "rgba(0, 0, 255, 1)";}
| |
| − | });
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | Файл '''"mouse_use.html"'''
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | <html>
| |
| − | <head>
| |
| − | <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
| |
| − | <script src="mouse_use.js" type="text/javascript"></script>
| |
| − | </head>
| |
| − | <body onload="MainMU();">
| |
| − | <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas>
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | </toggledisplay>
| |
| − | | |
| − | == Как самому выложить сюда скрипт ==
| |
| − | | |
| − | | |
| − | Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:
| |
| − | | |
| − | * Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
| |
| − | * Сделать специальный HTML-файл для плагина HTMLets. Например:
| |
| − | Файл '''"random_walk_TM.html"'''
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | <canvas id="canvasRW" width="800" height="600"></canvas>
| |
| − | <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
| |
| − | </syntaxhighlight>
| |
| − | * Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
| |
| − | '' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]]
| |
| − | * При верстке странички на tm.spbstu.ru добавить следующие строки:
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | // скрипт добавится на страничку в <head></head>
| |
| − | <htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу
| |
| − | </syntaxhighlight>
| |
| − | '' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
| |
| − | | |
| − | '' Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.
| |
| − | | |
| − | '' Примечание 3. Можно оформить весь скрипт в htmlet
| |
| − | | |
| − | == См. также ==
| |
| − | *[[JavaScript-пружина]]
| |
| − | *[[JavaScript-mechanics]]
| |
| − | *[[JavaScript-mechanics-box2D]]
| |
| | | | |
| − | [[Category: Виртуальная лаборатория]]
| + | <addscript src=Random_walk/> |
| − | [[Category: Программирование]]
| + | <htmlet nocache="yes">Random_walk</htmlet> |
| − | [[Category: JavaScript]]
| |
