API tools faq
paste
Advertisement
Guest User

chatGPT @ ES6 rewrite using classes

a guest
Feb 23rd, 2023
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.33 KB | Software | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>Змейка</title>
  6.     <style>
  7.         html,
  8.         body {
  9.             height: 100%;
  10.             margin: 0;
  11.         }
  12.  
  13.         /*Задаём глобальные параметры*/
  14.         body {
  15.             background: black;
  16.             display: flex;
  17.             align-items: center;
  18.             justify-content: center;
  19.         }
  20.  
  21.         /*Делаем границу вокруг игрового поля*/
  22.         canvas {
  23.             border: 1px solid white;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <!-- Рисуем игровое поле -->
  30.     <canvas width="400" height="400" id="game"></canvas>
  31.     <!-- Сам скрипт с игрой -->
  32.     <script>
  33.  
  34.         // Define the canvas and context
  35.         const canvas = document.getElementById("game");
  36.         const context = canvas.getContext("2d");
  37.  
  38.         // Define grid and count
  39.         const grid = 16;
  40.         let count = 0;
  41.  
  42.         // Define the Snake class
  43.         class Snake {
  44.             constructor() {
  45.                 this.x = 160;
  46.                 this.y = 160;
  47.                 this.dx = grid;
  48.                 this.dy = 0;
  49.                 this.cells = [];
  50.                 this.maxCells = 4;
  51.                 this.bullets = [];
  52.             }
  53.  
  54.             // Update the position of the snake
  55.             update() {
  56.                 this.x += this.dx;
  57.                 this.y += this.dy;
  58.  
  59.                 if (this.x < 0) {
  60.                     this.x = canvas.width - grid;
  61.                 } else if (this.x >= canvas.width) {
  62.                     this.x = 0;
  63.                 }
  64.  
  65.                 if (this.y < 0) {
  66.                     this.y = canvas.height - grid;
  67.                 } else if (this.y >= canvas.height) {
  68.                     this.y = 0;
  69.                 }
  70.  
  71.                 this.cells.unshift({ x: this.x, y: this.y });
  72.  
  73.                 if (this.cells.length > this.maxCells) {
  74.                     this.cells.pop();
  75.                 }
  76.             }
  77.  
  78.             // Draw the snake on the canvas
  79.             draw() {
  80.                 context.fillStyle = "green";
  81.                 this.cells.forEach((cell) => {
  82.                     context.fillRect(cell.x, cell.y, grid - 1, grid - 1);
  83.                 });
  84.             }
  85.  
  86.             // Check if the snake has eaten an apple
  87.             checkCollision() {
  88.                 for (let i = 1; i < this.cells.length; i++) {
  89.                     if (this.cells[0].x === this.cells[i].x && this.cells[0].y === this.cells[i].y) {
  90.                         this.x = 160;
  91.                         this.y = 160;
  92.                         this.cells = [];
  93.                         this.maxCells = 4;
  94.                         this.dx = grid;
  95.                         this.dy = 0;
  96.                         apple.x = getRandomInt(0, 25) * grid;
  97.                         apple.y = getRandomInt(0, 25) * grid;
  98.                     }
  99.                 }
  100.             }
  101.  
  102.             // Shoot the apple
  103.             shoot() {
  104.                 const bullet = { x: this.x, y: this.y, dx: this.dx, dy: this.dy, size: grid };
  105.                 this.bullets.push(bullet);
  106.             }
  107.         }
  108.  
  109.         // Define the Apple class
  110.         class Apple {
  111.             constructor() {
  112.                 this.x = 320;
  113.                 this.y = 320;
  114.             }
  115.  
  116.             // Draw the apple on the canvas
  117.             draw() {
  118.                 context.fillStyle = "red";
  119.                 context.fillRect(this.x, this.y, grid - 1, grid - 1);
  120.             }
  121.  
  122.             // Check if the apple has been eaten by the snake
  123.             checkCollision() {
  124.                 if (snake.cells[0].x === this.x && snake.cells[0].y === this.y) {
  125.                     snake.maxCells++;
  126.                     this.x = getRandomInt(0, 25) * grid;
  127.                     this.y = getRandomInt(0, 25) * grid;
  128.                 }
  129.             }
  130.         }
  131.  
  132.         // Create the snake and apple objects
  133.         const snake = new Snake();
  134.         const apple = new Apple();
  135.  
  136.         // Define the getRandomInt function
  137.         function getRandomInt(min, max) {
  138.             return Math.floor(Math.random() * (max - min)) + min;
  139.         }
  140.  
  141.         // Main game loop
  142.         function loop() {
  143.             requestAnimationFrame(loop);
  144.  
  145.             // Draw and update bullets
  146.             snake.bullets.forEach((bullet) => {
  147.                 context.fillStyle = "white";
  148.                 context.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
  149.                 bullet.x += bullet.dx;
  150.                 bullet.y += bullet.dy;
  151.                 if (
  152.                     bullet.x < 0 ||
  153.                     bullet.x > canvas.width ||
  154.                     bullet.y < 0 ||
  155.                     bullet.y > canvas.height
  156.                 ) {
  157.                     snake.bullets.splice(snake.bullets.indexOf(bullet), 1);
  158.                 } else if (bullet.x === apple.x && bullet.y === apple.y) {
  159.                     apple.x = getRandomInt(0, 25) * grid;
  160.                     apple.y = getRandomInt(0, 25) * grid;
  161.                     snake.bullets.splice(snake.bullets.indexOf(bullet), 1);
  162.                 }
  163.             });
  164.  
  165.             // Update the snake's position
  166.             count++;
  167.             if (count < 4) {
  168.                 return;
  169.             }
  170.             count = 0;
  171.             context.clearRect(0, 0, canvas.width, canvas.height);
  172.             snake.update();
  173.             snake.draw();
  174.             apple.draw();
  175.             snake.checkCollision();
  176.             apple.checkCollision();
  177.         }
  178.  
  179.         // Event listener for key presses
  180.         document.addEventListener("keydown", (e) => {
  181.             if (e.which === 37 && snake.dx === 0) {
  182.                 snake.dx = -grid;
  183.                 snake.dy = 0;
  184.             } else if (e.which === 38 && snake.dy === 0) {
  185.                 snake.dy = -grid;
  186.                 snake.dx = 0;
  187.             } else if (e.which === 39 && snake.dx === 0) {
  188.                 snake.dx = grid;
  189.                 snake.dy = 0;
  190.             } else if (e.which === 40 && snake.dy === 0) {
  191.                 snake.dy = grid;
  192.                 snake.dx = 0;
  193.             } else if (e.which === 32) { // Space bar
  194.                 snake.shoot();
  195.             }
  196.         });
  197.  
  198.         // Start the game loop
  199.         requestAnimationFrame(loop);
  200.  
  201.     </script>
  202. </body>
  203.  
  204. </html>
Tags: JavaScript Snake game GPT-3 chatGPT
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!