JavaScript-приложения — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Новая страница: «== Случайное блуждание == '''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого во...»)
 
м (Замена текста — «<syntaxhighlight lang="html" line start="1" enclose="div">» на «<syntaxhighlight lang="html5" line start="1" enclose="div">»)
 
(не показано 40 промежуточных версий 2 участников)
Строка 1: Строка 1:
 +
[[Виртуальная лаборатория]] > [[JavaScript-приложения]] <HR>
 +
 
== Случайное блуждание ==
 
== Случайное блуждание ==
  
−
'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого вот приложения]], написанный на 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]]
  
−
<addscript src=Random_walk/>
+
[[Category: Виртуальная лаборатория]]
−
<htmlet nocache="yes">Random_walk</htmlet>
+
[[Category: Программирование]]
 +
[[Category: JavaScript]]

Текущая версия на 22:02, 10 марта 2015

Виртуальная лаборатория > JavaScript-приложения

Случайное блуждание[править]

Это приложение - аналог вот этого flash-приложения, написанный на JavaScript


Не удается найти HTML-файл Random_walk_TM.html


Не удается найти HTML-файл Random_walk_TM_400x300_1.html
Не удается найти HTML-файл Random_walk_TM_400x300_2.html
Не удается найти HTML-файл Random_walk_TM_400x300_3.html


Текст программы на языке JavaScript (разработчик Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "random_walk.js" 

 1 // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
 2 function MainRW(canvas) {
 3     var context = canvas.getContext("2d");
 4 
 5     var start = 0;
 6     var d, x, y;
 7     var w = canvas.width;
 8     var h = canvas.height;
 9 
10     setInterval(tick, 30);
11 
12 
13     function Rand() {
14         return Math.floor(3 * Math.random()) - 1;
15     }
16 
17     function tick() {
18         if (start == 0) {
19             start = 1;
20             d = 10;
21             x = w / 2;
22             y = h / 2;
23         }
24         else {
25             x = x + d * Rand();
26             y = y + d * Rand();
27             if (x < 0) x = x + w;
28             if (x > w-10) x = x - w;
29             if (y < 0) y = y + h;
30             if (y > h-10) y = y - h;
31         }
32 
33         context.fillStyle = "rgb("+
34             Math.floor(Math.random()*256)+","+
35             Math.floor(Math.random()*256)+","+
36             Math.floor(Math.random()*256)+")";
37         context.beginPath();
38         context.rect(x, y, d-1, d-1);
39         context.closePath();
40         context.fill();
41     }
42 }

Файл "random_walk.html" 

1 <html>
2 <head>
3     <script src="random_walk.js" type="text/javascript"></script>
4 </head>
5 <body onload="MainRW(document.getElementById('canvasRW'));">
6     <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>
7 </body>
8 </html>

</toggledisplay>

Использование мыши[править]

Это приложение - аналог вот этого flash-приложения, написанный на JavaScript


Не удается найти HTML-файл mouse_use_TM.html


Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "mouse_use.js" 

 1 function MainMU() {
 2     var canvas  = document.getElementById('canvasMU');
 3     var context = canvas.getContext("2d");
 4 
 5     var w = canvas.width;
 6     var h = canvas.height;
 7 
 8     var y0 = h / 2;
 9     var r = w  / 7;
10 
11     var canvas = oCanvas.create({
12         canvas: "#canvasMU",
13         fps: 60
14     });
15 
16     var rectangle = canvas.display.rectangle({
17         x: r,
18         y: y0-r,
19         width: 2*r,
20         height: 2*r,
21         fill: "rgba(255, 0, 0, 1)"
22     });
23 
24     var arc = canvas.display.arc({
25         x: 5*r,
26         y: y0,
27         radius: r,
28         start: 0,
29         end: 360,
30         fill: "rgba(0, 0, 255, 1)"
31     });
32 
33     canvas.addChild(rectangle);
34     canvas.addChild(arc);
35 
36     rectangle.dragAndDrop({
37         changeZindex: true,,
38         move: function ()  {this.fill = "rgba(255, 0, 0, 0.5)";},
39         end: function ()    {this.fill = "rgba(255, 0, 0, 1)";}
40     });
41     arc.dragAndDrop({
42         changeZindex: true,
43         move: function ()  {this.fill = "rgba(0, 0, 255, 0.5)";},
44         end: function ()    {this.fill = "rgba(0, 0, 255, 1)";}
45     });
46 }

Файл "mouse_use.html" 

1 <html>
2 <head>
3     <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
4     <script src="mouse_use.js" type="text/javascript"></script>
5 </head>
6 <body onload="MainMU();">
7     <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas>
8 </body>
9 </html>

</toggledisplay>

Как самому выложить сюда скрипт[править]

Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:

  • Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
  • Сделать специальный HTML-файл для плагина HTMLets. Например:

Файл "random_walk_TM.html" 

1 <canvas id="canvasRW" width="800" height="600"></canvas>
2 <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
  • Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets

Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к администратору

  • При верстке странички на tm.spbstu.ru добавить следующие строки:
1     // скрипт добавится на страничку в <head></head>
2 <htmlet nocache="yes">random_walk_TM</htmlet>    // содержимое специального HTML-файла добавится на страницу

Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.

Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.

Примечание 3. Можно оформить весь скрипт в htmlet

См. также[править]

Источник — «http://tm.spbstu.ru/?title=JavaScript-приложения&oldid=32517»