Редактирование: Лабиринт

==Описание==

Реализация копьютерной игры Лабринт на языке программирования JavaScript

Правила игры: 
1. Перед пользователем появляется клетчатое поле, пустое окно для ввода чисел снизу и кнопка «Start»
2.  Задача нарисовать лабиринт. Используя правую кнопку мыши, игрок нажимает на ребра сетки или около него, чтобы создать стенку в лабиринте. Повторное нажатие убирает, нарисованный объект. Далее игрок вводит число объектов (шаров), которое не должно превышать 25, в специальном поле, расположенным ниже лабиринта, и нажимает «Start», чтобы запустить игру.
3. После старта частицы начинают двигаться, отталкиваясь от стенок лабиринта, самого поля и от друг друга абсолютно упруго. Игра заканчивается тогда, когда первая из частиц попадает в определенную область, произвольно генерирующуюся в поле и проявляющуюся на мониторе по окончании игры.
4. После окончание на экран игрока выводится слова о его победе и время движения выигравшей частицы.


Исполнители: Бутузова Е.С., Галанина Е.В.

Группа 3630103/90003
Кафедра Теоретической механики

==Визуализация==

{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Maze/Maze.html | width=800| height=800| border=0}}

==Код программы==
<div class="mw-collapsible mw-collapsed">
'''Текст программы на языке JavaScript:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">

var N = 600;
var x ;
var y ;
const eps = 7;
var edge_vert = [];
var edge_hor = [];
var IsBelongs_vert = false;
var IsBelongs_hor = false;
var start_pressed = false;
var winFlag = false;
var mousecoords = [];
var start;

window.addEventListener('load', main, false);
function main() {
var ctx = canvas_example.getContext('2d');
var w = canvas_example.width;
var h = canvas_example.height;

//рисует сетку
function Plot(x,y){
ctx.beginPath();
ctx.width = 2;
for (var i = 0; i<N; i+=50){
var x = i;
var y = 600;
ctx.moveTo(x,0);
ctx.lineTo(x,y);
ctx.stroke();
}
for (var j = 0; j<N; j+=50) {
var x = 600;
var y = j;
ctx.moveTo(0,y);
ctx.lineTo(x,y);
ctx.stroke();
}
}

function abs(x)
{
if(x < 0){
return -x;
}
else{
return x;
}
}
//возвращает координаты точки
function set_point(_x, _y) {
return {
x: _x,
y: _y,
}
}
//возвращает координаты ребра
function set_edge(a,b,c,d){
return{
beg: set_point(a,b),
end: set_point(c,d)
}
}
//возвращает последний элемент массива
function last(array)
{
if(array.length != 0)
{
return array[array.length - 1];
}
}
//отрисовывает ребра
function draw(m, color)
{
ctx.width = 1;
ctx.beginPath()
ctx.moveTo(m.beg.x, m.beg.y);
ctx.lineTo(m.end.x, m.end.y);
ctx.strokeStyle = color;
ctx.fillStyle = "rgba(0, 0, 200, 1)";
ctx.lineWidth =3 ;
ctx.stroke();
}

// only for edge_vert and edge_hor, проверяет есть ли уже такое ребро в массиве
function is_in(arr, x1, y1, x2, y2)
{
for(var i = 0; i < arr.length; i++)
{
if(arr[i].beg.x == x1 && arr[i].beg.y == y1
&& arr[i].end.x == x2 && arr[i].end.y == y2)
{
return true;
}
}
return false;
}
//аналогично is_in, но возвращает индекс
function find(arr, x1, y1, x2, y2)
{
for(var i = 0; i < arr.length; i++)
{
if(arr[i].beg.x == x1 && arr[i].beg.y == y1
&& arr[i].end.x == x2 && arr[i].end.y == y2)
{
return i;
}
}
return -1;
}

//проверка нажатия
function check(m) {
for(var i = 0; i < N; i += 50){
if(abs(m.x - i) < eps)
{
if( !is_in(edge_vert, i, m.y - m.y%50, i, m.y - m.y%50 + 50) )
{
edge_vert.push(set_edge(i, m.y - m.y%50, i, m.y - m.y%50 + 50));
IsBelongs_vert = true;
}
else
{
var ind = find(edge_vert, i, m.y - m.y%50, i, m.y - m.y%50 + 50);
var m = edge_vert[ind];
draw(m, "black");
edge_vert.splice(ind, 1);
}
}
if (abs(m.y - i) < eps)
{
if( !is_in(edge_hor, m.x - m.x%50, i, m.x - m.x%50 + 50, i) )
{
edge_hor.push(set_edge(m.x - m.x%50, i, m.x - m.x%50 + 50, i)) ;
IsBelongs_hor = true;
}
else
{
var ind = find(edge_hor, m.x - m.x%50, i, m.x - m.x%50 + 50, i);
var m = edge_hor[ind];
draw(m, "black");
edge_hor.splice(ind, 1);
}
}
}
//console.log(edge_hor);
//console.log(edge_vert);
//console.log(mousecoords);
}
//определяет координаты мышки
function getMouseCoords(e) {
var m = {};
var rect = canvas_example.getBoundingClientRect();
m.x = e.clientX - rect.left;
m.y = e.clientY- rect.top;
return m;
}

canvas_example.onmousedown = function(e) {
if(!start_pressed)
{
var m = getMouseCoords(e);
check(m);
//console.log(edge_vert);
//console.log(edge_hor);
}
}

//рисуем выбранные ребра
canvas_example.onmouseup = function(e){
if(!start_pressed)
{
var m;
if(IsBelongs_vert){

m = last(edge_vert);
draw(m, "red");
}
if(IsBelongs_hor){
m = last(edge_hor);
draw(m, "red");
}
IsBelongs_hor = false;
IsBelongs_vert = false;
}
}
//привязываем появление частиц к нажатию кнопки старт
button_start.onclick = function() {
if(!start_pressed)
{
var particles = new Particles_generate(edge_vert,edge_hor);
var dt = 1 / particles.get_fps();
start_pressed = true;
setInterval(control.bind(this, particles), 1000 * dt);
start = new Date().getTime();

}
}
//отрисовывает выбранные ребра лабиринта
function Draw_labirint () {
ctx.clearRect(0,0,w,h);
var k;
for(var i = 0; i< edge_vert.length; i++){
k = edge_vert[i];
ctx.beginPath()
ctx.moveTo(k.beg.x, k.beg.y);
ctx.lineTo(k.end.x, k.end.y);
ctx.strokeStyle="red";
ctx.fillStyle = "rgba(0, 0, 200, 1)";
ctx.lineWidth=3;

ctx.stroke();
}

var n;
for(var j = 0; j < edge_hor.length; j++){
n = edge_hor[j];
ctx.beginPath()
ctx.moveTo(n.beg.x,

n.beg.y);
ctx.lineTo(n.end.x, n.end.y);
ctx.strokeStyle="red";
ctx.fillStyle = "rgba(0, 0, 200, 1)";
ctx.lineWidth=3;
ctx.stroke();
}
}

Plot(x,y);
//Particle();

function control(particles) {
if(!particles.stopped){
ctx.clearRect(0, 0, w, h);
Draw_labirint();
particles.Check_standoff();
particles.control();
particles.win();
//setInterval(control.bind(this, particles), 1000 * dt);
}
}
}


</syntaxhighlight>
</div>