Редактирование: JavaScript-приложения

== Случайное блуждание ==

'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript

<addscript src=Random_walk/>
<htmlet nocache="yes">Random_walk_TM</htmlet>


Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> 
<source lang="javascript" first-line="1">
function MainRW() {
    var canvas  = document.getElementById('canvasRW');
    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();
    }
}
</source>
</toggledisplay>

== Использование мыши  ==

'''''Это приложение - аналог [[Флэш-приложения: техника программирования|вот этого flash-приложения]], написанный на JavaScript

<addscript src=ocanvas-251/>
<addscript src=mouse_use/>
<htmlet nocache="yes">mouse_use_TM</htmlet>


Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> 
<source lang="javascript" first-line="1">
function MainMU() {
    var canvas  = document.getElementById('canvasMU');
    var context = canvas.getContext("2d");

    var w = canvas.width;
    var h = canvas.width;

    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*2,
        width: 2*r,
        height: 2*r,
        fill: "rgba(255, 0, 0, 1)"
    });

    var arc = canvas.display.arc({
        x: 5*r,
        y: y0-r,
        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)";}
    });
}
</source>
</toggledisplay>
@@ Строка 1: / Строка 1: @@
-[[Виртуальная лаборатория]] > [[JavaScript-приложения]] <HR>
 == Случайное блуждание ==
 '''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript
+<addscript src=Random_walk/>
+<htmlet nocache="yes">Random_walk_TM</htmlet>
-{| 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"'''
+<source lang="javascript" first-line="1">
-<syntaxhighlight lang="javascript" line start="1" enclose="div">
+function MainRW() {
-// canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
+    var canvas  = document.getElementById('canvasRW');
-function MainRW(canvas) {
      var context = canvas.getContext("2d");
@@ Строка 65: / Строка 51: @@
      }
 }
-</syntaxhighlight>
+</source>
-Файл '''"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>
@@ Строка 83: / Строка 58: @@
 '''''Это приложение - аналог [[Флэш-приложения: техника программирования|вот этого flash-приложения]], написанный на JavaScript
+<addscript src=ocanvas-251/>
+<addscript src=mouse_use/>
 <htmlet nocache="yes">mouse_use_TM</htmlet>
-Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
+Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
-Файл '''"mouse_use.js"'''
+<source lang="javascript" first-line="1">
-<syntaxhighlight lang="javascript" line start="1" enclose="div">
 function MainMU() {
      var canvas  = document.getElementById('canvasMU');
@@ Строка 96: / Строка 70: @@
      var w = canvas.width;
-     var h = canvas.height;
+     var h = canvas.width;
      var y0 = h / 2;
@@ Строка 108: / Строка 82: @@
      var rectangle = canvas.display.rectangle({
          x: r,
-         y: y0-r,
+         y: y0-r*2,
          width: 2*r,
          height: 2*r,
@@ Строка 116: / Строка 90: @@
      var arc = canvas.display.arc({
          x: 5*r,
-         y: y0,
+         y: y0-r,
          radius: r,
          start: 0,
@@ Строка 137: / Строка 111: @@
      });
 }
-</syntaxhighlight>
+</source>
-Файл '''"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: Виртуальная лаборатория]]
-[[Category: Программирование]]
-[[Category: JavaScript]]