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

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

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

Правила игры: 

1. Перед пользователем появляется клетчатое поле, пустое окно для ввода чисел снизу и кнопка «Start»

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

3. После старта частицы начинают двигаться, отталкиваясь от стенок лабиринта, самого поля и от друг друга абсолютно упруго. Игра заканчивается тогда, когда первая из частиц попадает в определенную область, произвольно генерирующуюся в поле и проявляющуюся на мониторе по окончании игры.

4. После окончание на экран игрока выводится слова о его победе и время движения выигравшей частицы.

==Реализация==

Перечень функций, которые были использованы для написания программы:
•	В основе визуализации каждого метода используется элемент <canvas>
•	Для создания элементов управления используется форма <input>
•	Код программы на языке JavaScript разбит на несколько основных поочередно вызываемых функций: ввод, подсчёты, рисование; используются различные циклы для проверки нажатия при построении лабиринта и нахождения частиц в поле.


==Авторы==

Разработчики: [[Бутузова Евдокия|Бутузова Евдокия]], [[Галанина Екатерина|Галанина Екатерина]] 

Группа 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>

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

function is_in(arr, x1, y1) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].x == x1 && arr[i].y == y1) {
return true;
}
}
return false;
}

function Particles_generate(edge_vert, edge_hor) {
var fps = 120;
var dt = 1 / fps;
var ctx = canvas_example.getContext('2d');
var w = canvas_example.width;
var h = canvas_example.height;
/*максимум может быть 25 частиц, поэтому возвращаем остаток от деления на 25
если пользователь ввел число больше 25*/
var N = parseInt(document.getElementById('n').value);
if(N % 25 == 0 && N != 0){
N = 25;
}
else if (N == 0){
N = 0;
}
else {
N = N%25;
}
var particles = [];
var r = 4;
var cells = 12;
var small_cells = 5;
var r_max = 5;
var that_2 = this;

that_2.stopped = false;

function abs(x)
{
if(x < 0){
return -x;
}
else{
return x;
}
}
//проверка столкновений
function standoff (part1, part2 )
{
if((part1.x - part2.x)*(part1.x - part2.x) +
(part1.y - part2.y)*(part1.y - part2.y) <= 4*r*r )
{
var m = part1.vx;
var t = part1.vy;
part1.vx = part2.vx;
part1.vy = part2.vy;
part2.vx = m;
part2.vy = t;
}
}
//проверка столкновений с ребрами
function Edge_standoff( arr1, arr2, arr3){
for ( var i = 0; i < arr1.length; i++){
for ( var j = 0; j < arr2.length; j++){
if( abs(arr1[i].x - arr2[j].beg.x) <= r &&
arr1[i].y < Math.max(arr2[j].beg.y, arr2[j].end.y) &&
arr1[i].y > Math.min(arr2[j].beg.y, arr2[j].end.y) )
{
arr1[i].vx = -arr1[i].vx;
}
if(Math.min((arr1[i].x - arr2[j].beg.x)*(arr1[i].x - arr2[j].beg.x) +
(arr1[i].y - arr2[j].beg.y)*(arr1[i].y - arr2[j].beg.y),
(arr1[i].x - arr2[j].end.x)*(arr1[i].x - arr2[j].end.x) +
(arr1[i].y - arr2[j].end.y)*(arr1[i].y - arr2[j].end.y)) <= r*r &&
(arr1[i].y >= Math.max(arr2[j].beg.y, arr2[j].end.y) ||
arr1[i].y <= Math.min(arr2[j].beg.y, arr2[j].end.y) ))

{
arr1[i].vx = -arr1[i].vx;
arr1[i].vy = -arr1[i].vy;
}
}
for( var j = 0; j < arr3.length; j++)
{
if( abs(arr1[i].y - arr3[j].beg.y) <= r &&
arr1[i].x < Math.max(arr3[j].beg.x, arr3[j].end.x) &&
arr1[i].x > Math.min(arr3[j].beg.x, arr3[j].end.x) )
{
arr1[i].vy = -arr1[i].vy;
}

}

}

}

that_2.get_fps = function() {
return fps;
};

that_2.Particle = function(x , y , vx , vy ) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
var that = this;

this.info = function() {
console.log(
'Position: (' + that.x + ', ' + that.y + ')\nVelocity: (' + that.vx +
',' + that.vy + ')');
};
//движение+ проверка стокновений с границами
this.move = function() {

if( that.x >= w-r || that.x <= r){
that.vx = -that.vx;
}
if( that.y >= h-r || that.y <= r){
that.vy = -that.vy;
}
that.x += that.vx * dt;
that.y += that.vy * dt;
};

this.draw = function() {
ctx.strokeStyle="green";
ctx.beginPath();
ctx.arc(that.x, that.y, r, 0, 2 * Math.PI);
ctx.stroke();
}
};

that_2.generate = function() {
return (Math.floor(Math.random() * small_cells * small_cells) % (small_cells * small_cells));
};

that_2.Phys = function() {
for (var i = 0; i < particles.length; i++) {
particles[i].move();
}
};

that_2.draw = function() {
//ctx.clearRect(0, 0, w, h);
for (var i = 0; i < particles.length; i++) {
// console.log(particles.length);
particles[i].draw();
}
};

that_2.Check_standoff = function (){
console.log(particles);
for (var i = 0; i < particles.length; i++){
for (var j = i+1; j < particles.length; j++){
standoff (particles[i], particles[j]);
}
}
Edge_standoff( particles, edge_vert,edge_hor);
}
that_2.control = function() {
that_2.Phys();
that_2.draw();
console.log(N);
};
//проверка попала ли частица в выигрышную область, завершение игры
that_2.win = function (){
for( var i = 0; i < particles.length; i++){
if( particles[i].x > 500 + r && particles[i].y > 500 + r){
particles.splice(i,1);
var end = new Date().getTime();
console.log(start);
console.log(end);
var time = end - start;
var time_sec = time/1000;
console.log(time);
ctx.fillRect(500,500,100,100);
that_2.stopped = true;
ctx.fillStyle = "blue";
setTimeout(function() {
alert('You have won!\n Your time is '+time_sec+'sec');
ctx.clearRect(0,0,



w, h);
}, 15);
break;
}
}
}

//генерируем частицы
for (var j = 0; j < N; j++) {
var fi = Math.random() * Math.PI * 2;
var i = that_2.generate();
if (!is_in(
particles, r_max + 2*r_max * (i % 5),
r_max + 2*r_max * Math.floor(i / 5))) {
particles.push(new that_2.Particle(
r_max + 2*r_max * (i % 5),
r_max + 2*r_max * Math.floor(i / 5), 75 * Math.cos(fi),
75 * Math.sin(fi)))
}
else
{
i1 = i;
offset = 1;
while(true)
{
i1 += offset;
if(i1 == small_cells*small_cells)
{
i1 = i - 1;
offset = -1;
}
if(!is_in(particles,r_max + 2*r_max * (i1 % 5),
r_max+ 2*r_max * Math.floor(i1 / 5)))
{
particles.push(new that_2.Particle(
r_max + 2*r_max * (i1 % 5),
r_max + 2*r_max * Math.floor(i1 / 5),
100 * Math.cos(fi),
100 * Math.sin(fi)
))
break;
}
}
}
}
}

</syntaxhighlight>
</div>

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

<html>
<head>
<meta charset='utf-8'>
<title>ЛАБИРИНТ</title>
<script src='project.js'></script>
<script src='particles_generate.js'> </script>
</head>
<body>
<canvas id='canvas_example' width=600 height=600 style='border: 1px solid #000000'></canvas>
<div align ='left'>
<input id='n'type='number'><br/>
<input type = 'button' id= 'button_start' value='Start'>
</div>
</body>
</html>

</syntaxhighlight>
</div>