Простейшие интернет-программы — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Wikiadmin (обсуждение | вклад) м (Замена текста — «</syntaxhighligh>» на «</syntaxhighlight>») |
Wikiadmin (обсуждение | вклад) м (Замена текста — «<syntaxhighlight lang="html" line start="1" enclose="div">» на «<syntaxhighlight lang="html5" line start="1" enclose="div">») |
||
| Строка 67: | Строка 67: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Файл '''"random_walk.html"''' | Файл '''"random_walk.html"''' | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<html> | <html> | ||
<head> | <head> | ||
Версия 22:02, 10 марта 2015
Виртуальная лаборатория > Простейшие интернет-программыСлучайное блуждание
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
Текст программы на языке 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>
Использование мыши
Старый пример в этой статье был написан на ныне неиспользуемой нашей кафедрой библиотеке.
Актуальный пример смотрите здесь: Управление мышью
