Редактирование: Простейшие интернет-программы

[[Виртуальная лаборатория]] > [[Простейшие интернет-программы]] <HR>

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

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



{| class="simple" border="1"
 |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM</htmlet>
|}


{| class="simple" border="1"
 |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_1</htmlet>
 |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_2</htmlet>
 |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_3</htmlet>
|}



<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content">
Файл '''"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>
</div>
</div>

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

''Старый пример в этой статье был написан на ныне неиспользуемой нашей кафедрой библиотеке.''

Актуальный пример смотрите здесь: [[Обучение_JavaScript#Пример №5. Управление мышью|Управление мышью]]

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


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

* Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
* Сделать специальный HTML-файл для плагина HTMLets. Например:
Файл '''"random_walk_TM.html"'''
<source lang="html" first-line="1">
<canvas id="canvasRW" width="800" height="600"></canvas>
<script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
</source>
* Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
'' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]]
* При верстке странички на tm.spbstu.ru добавить следующие строки:
<source lang="html" first-line="1">
<addscript src=random_walk/>    // скрипт добавится на страничку в <head></head>
<htmlet nocache="yes">random_walk_TM</htmlet>    // содержимое специального HTML-файла добавится на страницу
</source>
'' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.

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

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

== См. также ==
*[[Как выложить скрипт в Виртуальную лабораторию]]

[[Category: Виртуальная лаборатория]]
[[Category: Программирование]]
[[Category: JavaScript]]