Whtmlets/js2020/Jakhangirov/index.html — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Код программы Cell на языке JavaScript)
(→‎Код программы)
 
(не показаны 2 промежуточные версии 2 участников)
Строка 10: Строка 10:
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/js2020/Jakhangirov/index.html |width=800 |height=650 |border=0 }}
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/js2020/Jakhangirov/index.html |width=800 |height=650 |border=0 }}
  
 +
==Код программы==
 
<div class="mw-collapsible mw-collapsed">
 
<div class="mw-collapsible mw-collapsed">
−
'''Код программы scratch на языке JavaScript:''' <div class="mw-collapsible-content">
+
'''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
  
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
−
let cols, rows;
+
const canvas = document.getElementById("game");
−
let w = 20;
+
const ctx = canvas.getContext("2d");
−
let grid = [];
 
−
let current;
 
−
let stack = [];
 
  
−
function setup() {
+
const ground = new Image();
−
  createCanvas(600, 600);
+
ground.src = "img/ground.png";
−
  cols = floor(width / w);
 
−
  rows = floor(height / w);
 
  
−
  for (let j = 0; j < rows; j++) {
+
const foodImg = new Image();
−
    for (let i = 0; i < cols; i++) {
+
foodImg.src = "img/food.png";
−
      var cell = new Cell(i, j);
+
 
−
      grid.push(cell);
+
let box = 32;
−
    }
 
−
  }
 
  
−
  current = grid[0];
+
let score = 0;
−
}
 
  
−
function draw() {
+
let food = {
−
   background(51);
+
   x: Math.floor((Math.random() * 17 + 1)) * box,
−
   for (let i = 0; i < grid.length; i++) {
+
   y: Math.floor((Math.random() * 15 + 3)) * box,
−
    grid[i].show();
+
};
−
  }
 
  
−
  current.visited = true;
+
let snake = [];
−
  current.highlight();
+
snake[0] = {
−
   // STEP 1
+
   x: 9 * box,
−
   let next = current.checkNeighbors();
+
   y: 10 * box
−
  if (next) {
+
};
−
    next.visited = true;
 
  
−
    // STEP 2
+
document.addEventListener("keydown", direction);
−
    stack.push(current);
 
  
−
    // STEP 3
+
let dir;
−
    removeWalls(current, next);
 
  
−
    // STEP 4
+
function direction(event) {
−
     current = next;
+
  if(event.keyCode == 37 && dir != "right")
−
   } else if (stack.length > 0) {
+
     dir = "left";
−
     current = stack.pop();
+
   else if(event.keyCode == 38 && dir != "down")
−
   }
+
     dir = "up";
 +
  else if(event.keyCode == 39 && dir != "left")
 +
    dir = "right";
 +
   else if(event.keyCode == 40 && dir != "up")
 +
    dir = "down";
 
}
 
}
  
−
function index(i, j) {
+
function eatTail(head, arr) {
−
   if (i < 0 || j < 0 || i > cols - 1 || j > rows - 1) {
+
   for(let i = 0; i < arr.length; i++) {
−
     return -1;
+
     if(head.x == arr[i].x && head.y == arr[i].y)
 +
      clearInterval(game);
 
   }
 
   }
−
  return i + j * cols;
 
 
}
 
}
  
−
function removeWalls(a, b) {
+
function drawGame() {
−
   let x = a.i - b.i;
+
   ctx.drawImage(ground, 0, 0);
−
   if (x === 1) {
+
 
−
    a.walls[3] = false;
+
   ctx.drawImage(foodImg, food.x, food.y);
−
    b.walls[1] = false;
+
 
−
   } else if (x === -1) {
+
   for(let i = 0; i < snake.length; i++) {
−
     a.walls[1] = false;
+
     ctx.fillStyle = i == 0 ? "blue" : "orange";
−
     b.walls[3] = false;
+
     ctx.fillRect(snake[i].x, snake[i].y, box, box);
 
   }
 
   }
−
   let y = a.j - b.j;
+
 
−
   if (y === 1) {
+
   ctx.fillStyle = "black";
−
    a.walls[0] = false;
+
  ctx.font = "50px Times New Roman";
−
    b.walls[2] = false;
+
   ctx.fillText(score, box * 2.5, box * 1.7);
−
   } else if (y === -1) {
+
 
−
     a.walls[2] = false;
+
  let snakeX = snake[0].x;
−
     b.walls[0] = false;
+
  let snakeY = snake[0].y;
 +
 
 +
   if(snakeX == food.x && snakeY == food.y) {
 +
     score++;
 +
    food = {
 +
      x: Math.floor((Math.random() * 17 + 1)) * box,
 +
      y: Math.floor((Math.random() * 15 + 3)) * box,
 +
    };
 +
  } else {
 +
     snake.pop();
 
   }
 
   }
 +
 +
  if(snakeX < box || snakeX > box * 17
 +
    || snakeY < 3 * box || snakeY > box * 17)
 +
    clearInterval(game);
 +
 +
  if(dir == "left") snakeX -= box;
 +
  if(dir == "right") snakeX += box;
 +
  if(dir == "up") snakeY -= box;
 +
  if(dir == "down") snakeY += box;
 +
 +
  let newHead = {
 +
    x: snakeX,
 +
    y: snakeY
 +
  };
 +
 +
  eatTail(newHead, snake);
 +
 +
  snake.unshift(newHead);
 
}
 
}
  
−
</syntaxhighlight>
+
let game = setInterval(drawGame, 100);
−
</div>
 
  
−
<div class="mw-collapsible mw-collapsed">
 
  
−
'''Код программы Cell на языке JavaScript:''' <div class="mw-collapsible-content">
 
−
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
−
function Cell(i, j) {
 
−
  this.i = i;
 
−
  this.j = j;
 
−
  this.walls = [true, true, true, true];
 
−
  this.visited = false;
 
  
−
  this.checkNeighbors = function() {
 
−
    let neighbors = [];
 
  
−
    let top = grid[index(i, j - 1)];
 
−
    let right = grid[index(i + 1, j)];
 
−
    let bottom = grid[index(i, j + 1)];
 
−
    let left = grid[index(i - 1, j)];
 
  
−
    if (top && !top.visited) {
 
−
      neighbors.push(top);
 
−
    }
 
−
    if (right && !right.visited) {
 
−
      neighbors.push(right);
 
−
    }
 
−
    if (bottom && !bottom.visited) {
 
−
      neighbors.push(bottom);
 
−
    }
 
−
    if (left && !left.visited) {
 
−
      neighbors.push(left);
 
−
    }
 
  
−
    if (neighbors.length > 0) {
+
//
−
      let r = floor(random(0, neighbors.length));
 
−
      return neighbors[r];
 
−
    } else {
 
−
      return undefined;
 
−
    }
 
−
  };
 
−
  this.highlight = function() {
 
−
    let x = this.i * w;
 
−
    let y = this.j * w;
 
−
    noStroke();
 
−
    fill(0, 0, 255, 100);
 
−
    rect(x, y, w, w);
 
−
  };
 
  
−
  this.show = function() {
 
−
    let x = this.i * w;
 
−
    let y = this.j * w;
 
−
    stroke(255);
 
−
    if (this.walls[0]) {
 
−
      line(x, y, x + w, y);
 
−
    }
 
−
    if (this.walls[1]) {
 
−
      line(x + w, y, x + w, y + w);
 
−
    }
 
−
    if (this.walls[2]) {
 
−
      line(x + w, y + w, x, y + w);
 
−
    }
 
−
    if (this.walls[3]) {
 
−
      line(x, y + w, x, y);
 
−
    }
 
−
 
−
    if (this.visited) {
 
−
      noStroke();
 
−
      fill(255, 0, 255, 100);
 
−
      rect(x, y, w, w);
 
−
    }
 
−
  };
 
−
}
 
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 
</div>
 
</div>

Текущая версия на 03:21, 2 августа 2020

Описание[править]

Генератор лабиринта на JavaScript

Исполнитель: Джахангиров Мансур

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

Визуализация[править]

Код программы[править]

Код программы на языке JavaScript: 
  1 const canvas = document.getElementById("game");
  2 const ctx = canvas.getContext("2d");
  3 
  4 const ground = new Image();
  5 ground.src = "img/ground.png";
  6 
  7 const foodImg = new Image();
  8 foodImg.src = "img/food.png";
  9 
 10 let box = 32;
 11 
 12 let score = 0;
 13 
 14 let food = {
 15   x: Math.floor((Math.random() * 17 + 1)) * box,
 16   y: Math.floor((Math.random() * 15 + 3)) * box,
 17 };
 18 
 19 let snake = [];
 20 snake[0] = {
 21   x: 9 * box,
 22   y: 10 * box
 23 };
 24 
 25 document.addEventListener("keydown", direction);
 26 
 27 let dir;
 28 
 29 function direction(event) {
 30   if(event.keyCode == 37 && dir != "right")
 31     dir = "left";
 32   else if(event.keyCode == 38 && dir != "down")
 33     dir = "up";
 34   else if(event.keyCode == 39 && dir != "left")
 35     dir = "right";
 36   else if(event.keyCode == 40 && dir != "up")
 37     dir = "down";
 38 }
 39 
 40 function eatTail(head, arr) {
 41   for(let i = 0; i < arr.length; i++) {
 42     if(head.x == arr[i].x && head.y == arr[i].y)
 43       clearInterval(game);
 44   }
 45 }
 46 
 47 function drawGame() {
 48   ctx.drawImage(ground, 0, 0);
 49 
 50   ctx.drawImage(foodImg, food.x, food.y);
 51 
 52   for(let i = 0; i < snake.length; i++) {
 53     ctx.fillStyle = i == 0 ? "blue" : "orange";
 54     ctx.fillRect(snake[i].x, snake[i].y, box, box);
 55   }
 56 
 57   ctx.fillStyle = "black";
 58   ctx.font = "50px Times New Roman";
 59   ctx.fillText(score, box * 2.5, box * 1.7);
 60 
 61   let snakeX = snake[0].x;
 62   let snakeY = snake[0].y;
 63 
 64   if(snakeX == food.x && snakeY == food.y) {
 65     score++;
 66     food = {
 67       x: Math.floor((Math.random() * 17 + 1)) * box,
 68       y: Math.floor((Math.random() * 15 + 3)) * box,
 69     };
 70   } else {
 71     snake.pop();
 72   }
 73 
 74   if(snakeX < box || snakeX > box * 17
 75     || snakeY < 3 * box || snakeY > box * 17)
 76     clearInterval(game);
 77 
 78   if(dir == "left") snakeX -= box;
 79   if(dir == "right") snakeX += box;
 80   if(dir == "up") snakeY -= box;
 81   if(dir == "down") snakeY += box;
 82 
 83   let newHead = {
 84     x: snakeX,
 85     y: snakeY
 86   };
 87 
 88   eatTail(newHead, snake);
 89 
 90   snake.unshift(newHead);
 91 }
 92 
 93 let game = setInterval(drawGame, 100);
 94 
 95 
 96 
 97 
 98 
 99 
100 //
Источник — «http://tm.spbstu.ru/?title=Whtmlets/js2020/Jakhangirov/index.html&oldid=57170»