• 项目实战——创建菜单与游戏页面（下）

    目录

    一、整体框架

    二、修改地图为中心对称

    三、 画蛇

    四、实现蛇的移动

     五、读取键盘的操作

     六、美化蛇和检测非法逻辑

    一、整体框架

    逻辑框架图

    二、修改地图为中心对称

    如果两条蛇，同时走到相同的格子，会造成平局，这种情况会对优势者不利！
    需要把地图变为 偶数 乘 奇数

    修改代码：

    1. x = rows - 1 - x;
    2.  
    3. y = cols - 1 - y;

     修改地图1

     

     成功后的界面：

    地图修改sucess

     

    三、 画蛇

    如何画蛇 -> 本质上蛇是由一堆格子组成的序列。

    蛇里面的一个格子我们定义成Cell
    中心的坐标r+0.5， c +0.5
    先调用基类的构造函数，
    再把蛇的信息取出来

    新建Cell.js 存储一堆格子的序列 （蛇的身体）：

    1. export class Cell {
    2.     constructor(r, c) {
    3.         this.r = r;
    4.         this.c = c;
    5.         // 转换为 canvas 的坐标
    6.         this.x = c + 0.5;  
    7.         this.y = r + 0.5;
    8.     }
    9. }

     蛇头1

     新建Snake.js 对象，方便我们进行操作~

    1. import { AcGameObject } from "./AcGameObject";
    2. import { Cell } from "./Cell";
    3.  
    4.  
    5. export class Snake extends AcGameObject {
    6.     constructor(info, gamemap) {
    7.         super();
    8.  
    9.         // 取出基本的id
    10.         this.id = info.id;
    11.         this.color = info.color;
    12.         this.gamemap = gamemap; // 方便调用函数和参数
    13.  
    14.         //存放蛇的身体;
    15.         this.cells = [new Cell(info.r, info.c)];
    16.  
    17.     }
    18.  
    19.     start() {
    20.  
    21.     }
    22.  
    23.     update() {
    24.         this.render();
    25.     }
    26.  
    27.     render() {
    28.         // 画出基本的蛇头
    29.         const L = this.gamemap.L;
    30.         const ctx = this.gamemap.ctx;
    31.  
    32.         ctx.fillStyle = this.color;
    33.         for (const cell of this.cells) {
    34.             ctx.beginPath();
    35.             ctx.arc(cell.x * L, cell.y * L, L / 2, 0, Math.PI * 2);
    36.             ctx.fill();
    37.         }
    38.     }
    39. }

     蛇头2

     在GameMap.js 中创建两条蛇的对象：

    1. this.Snakes = {
    2.     new Snake({id : 0, color : "#4876ec", r : this.rows - 2, c : 1}, this),
    3.     new Snake({id : 1, color : "#f94848", r : 1, c : this.cols - 2}, this),
    4. }

     蛇头3

    成功之后的界面：

     蛇头sucess

    四、实现蛇的移动

    移动应该是连贯的。

    身体有多个部分，如何让保持连贯？

    中间保持不动，头和尾动，在头部创建一个新的节点，朝着目的地移动。尾巴朝着目的地动

    蛇只有在获取到 两个人 或 机器的指令后才能动~~

    在 Snake.js 中添加代码，实现蛇头的移动：

    1. import { AcGameObject } from "./AcGameObject";
    2. import { Cell } from "./Cell";
    3.  
    4. export class Snake extends AcGameObject {
    5.     constructor(info, gamemap) {
    6.         super(); // 继承AcGameObject的方法
    7.  
    8.         this.id = info.id;
    9.         this.color = info.color;
    10.         this.gamemap = gamemap;
    11.  
    12.         this.cells = [new Cell(info.r, info.c)]; // 存放蛇的身体， cell[0] 存放蛇头
    13.         // new add
    14.         this.speed = 5;
    15.     }
    16.  
    17.  
    18.     update_move() {
    19.         // 向右移动
    20.         this.cells[0].x += this.speed * this.timedelta / 1000;
    21.         //向上移动
    22.         //this.cells[0].y -= this.speed * this.timedelta / 1000;
    23.     }
    24.  
    25.     update() {
    26.         this.update_move();
    27.         this.render();
    28.     }

    在这里插入图片描述

     蓝色的球会一直向右移动：

    向右移动sucess

    如何实现连贯的移动呢？

    1、 由于可能会产生一些问题， 也就是中间某个状态，没有完全移出去，蛇的身子会出现问题。
    2、中间不动，首尾动！创建的虚拟节点朝着目的地移动。只有两个点动。
    3、考虑蛇什么时候动? 回合制游戏，两个人都有输入的时候，才可以移动。

    修改 Snake.js:

    1. import { AcGameObject } from "./AcGameObject";
    2. import { Cell } from "./Cell";
    3.  
    4. export class Snake extends AcGameObject {
    5.     constructor(info, gamemap) {
    6.         super();
    7.  
    8.         this.id = info.id;
    9.         this.color = info.color;
    10.         this.gamemap = gamemap;
    11.  
    12.         //存放蛇的身体;
    13.         this.cells = [new Cell(info.r, info.c)];
    14.  
    15.         this.speed = 5; // 蛇每秒走5格
    16.         // new add
    17.         this.direction = -1; // -1表示没有指令 0 1 2 3 
    18.         this.status = "idle"; // 静止， move 移动 die 死亡
    19.     }  
    20. }

    基本移动 

    首先我们需要一个裁判来判断两条蛇的移动，我们抽取放在 GameMap.js 中

    1. check_ready() { // 判断两条蛇是否准备下一回合了
    2.    for (const snake of this.snakes) {
    3.       if (snake.status !== "idle") return false;
    4.       if (snake.direction === -1) return false;
    5.      }
    6.   return true;  
    7. }

     裁判逻辑

     在 Snake.js 中更新蛇的状态：

    1. this.next_cell = null; //下一步的目标位置
    2.  
    3. this.dr = [-1, 0, 1, 0]; // 行
    4. this.dc = [0, 1, 0, -1]; //列
    5.  
    6. this.step = 0;
    7.  
    8. next_step() {
    9.     const d = this.direction;
    10.     this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
    11.     this.direction = -1;
    12.     this.status = "move";
    13.     this.step ++ ;
    14. }

     在这里插入图片描述

     在 GameMap.js 中更新：

    1. next_step() {
    2.     for (const snake of this.snake) {
    3.         snake.next_step();
    4.     }
    5. }
    6.  
    7. update() {
    8.     this.update_size();
    9.     if (this.check_ready()) {
    10.         this.next_step();
    11.     }
    12.     this.render();
    13. }

     基本移动4

     五、读取键盘的操作

    从键盘获取操作 w a s d 和 ↑ ↓ ← → 来控制两条蛇。

    在 GameMap.vue 中修改：

    "canvas" tabindex="0">

     这样我们的游戏才拥有了聚焦功能（这里Edge会有一个Bug就是上下左右一次后它会聚焦导航栏，但不用担心，因为我们后期实施多人对战，会让每个用户用 w a s d 来操作~）

    在这里插入图片描述

    绑定事件：

    在 Snake.js 中加入辅助函数，用来获取方向

    1. //辅助函数
    2. set_direction(d) {
    3.     this.direction = d;
    4. }

     在这里插入图片描述

    在 GameMap.js 中修改，添加事件：

     

    1. add_listening_events() {
    2.         this.ctx.canvas.focus();
    3.  
    4.         const [snake0, snake1] = this.snakes;
    5.         this.ctx.canvas.addEventListener("keydown", e => {
    6.             if (e.key === 'w') snake0.set_direction(0);
    7.             else if (e.key === 'd') snake0.set_direction(1);
    8.             else if (e.key === 's') snake0.set_direction(2);
    9.             else if (e.key === 'a') snake0.set_direction(3);
    10.             else if (e.key === 'ArrowUp') snake1.set_direction(0);
    11.             else if (e.key === 'ArrowRight') snake1.set_direction(1);
    12.             else if (e.key === 'ArrowDown') snake1.set_direction(2);
    13.             else if (e.key === 'ArrowLeft') snake1.set_direction(3);
    14.         });
    15.     }

     在这里插入图片描述

    在 Snake.js 中更新状态：

    1. update() { // 每一帧执行一次
    2.     if (this.status === 'move') {
    3.         this.uppdate_move()
    4.     }
    5.  
    6.     this.render();
    7. }

     在这里插入图片描述

     此时我们就可以真正让蛇动起来了~

    在 Snake.js 中修改：

    1. import { AcGameObject } from "./AcGameObject";
    2. import { Cell } from "./Cell";
    3.  
    4. export class Snake extends AcGameObject {
    5.     constructor(info, gamemap) {
    6.         super();
    7.  
    8.         this.id = info.id;
    9.         this.color = info.color;
    10.         this.gamemap = gamemap;
    11.  
    12.         this.cells = [new Cell(info.r, info.c)];  // 存放蛇的身体，cells[0]存放蛇头
    13.         this.next_cell = null;  // 下一步的目标位置
    14.  
    15.         this.speed = 5;  // 蛇每秒走5个格子
    16.         this.direction = -1;  // -1表示没有指令，0、1、2、3表示上右下左
    17.         this.status = "idle";  // idle表示静止，move表示正在移动，die表示死亡
    18.  
    19.         this.dr = [-1, 0, 1, 0];  // 4个方向行的偏移量
    20.         this.dc = [0, 1, 0, -1];  // 4个方向列的偏移量
    21.  
    22.         this.step = 0;  // 表示回合数
    23.         this.eps = 1e-2;  // 允许的误差
    24.  
    25.     }
    26.  
    27.  
    28.     start() {
    29.  
    30.     }
    31.  
    32.     set_direction(d) {
    33.         this.direction = d;
    34.     }
    35.  
    36.     next_step() { //蛇的状态变为走下一步
    37.         const d = this.direction;
    38.         this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
    39.         this.direction = -1;
    40.         this.status = "move";
    41.         this.step ++ ;   
    42.  
    43.         // 求长度
    44.         const k = this.cells.length;
    45.         for (let i = k; i > 0; i -- ) { // 初始元素不变 每一个元素往后移动一位
    46.             this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));
    47.         }
    48.  
    49.     }
    50.  
    51.     update_move() {
    52.         const dx = this.next_cell.x - this.cells[0].x;
    53.         const dy = this.next_cell.y - this.cells[0].y;
    54.         const distance = Math.sqrt(dx * dx + dy * dy);
    55.  
    56.  
    57.  
    58.         if (distance < this.eps) {  // 走到目标点了
    59.             this.cells[0] = this.next_cell;  // 添加一个新蛇头
    60.             this.next_cell = null;
    61.             this.status = "idle";  // 走完了，停下来
    62.  
    63.         } else {
    64.             const move_distance = this.speed * this.timedelta / 1000;
    65.             this.cells[0].x += move_distance * dx / distance;
    66.             this.cells[0].y += move_distance * dy / distance;
    67.         }
    68.     }
    69.  
    70.     update() {  // 每一帧执行一次
    71.         if (this.status === 'move') {
    72.             this.update_move();
    73.         }
    74.  
    75.         this.render();
    76.     }
    77.  
    78.  
    79.     render() {
    80.         const L = this.gamemap.L;
    81.         const ctx = this.gamemap.ctx;
    82.  
    83.         ctx.fillStyle = this.color;
    84.         for (const cell of this.cells) {
    85.             ctx.beginPath();
    86.             ctx.arc(cell.x * L, cell.y * L, L / 2, 0, Math.PI * 2);
    87.             ctx.fill();
    88.         }
    89.     }
    90. }

    实现蛇尾的移动 ：

    在 Snake.js 中添加代码，判断蛇尾是否增长

    1. check_tail_increasing() {
    2.     if (step <= 10) return true;
    3.     if (step % 3 === 1) return true;
    4.     return false;
    5. }

     在这里插入图片描述

     修改 Snake.js ， 判断蛇尾是否在下一步是否增长

    1. this.next_cell = null; //下一步的目标位置
    2.  
    3. this.dr = [-1, 0, 1, 0]; // 行
    4. this.dc = [0, 1, 0, -1]; //列
    5.  
    6. this.step = 0;
    7.  
    8. this.eps = 1e-2 // 允许的误差
    9.  
    10. next_step() {
    11.     const d = this.direction;
    12.     this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
    13.     this.direction = -1;
    14.     this.status = "move";
    15.     this.step ++ ;
    16.  
    17.         // 求长度
    18.     const k = this.cells.length;
    19.     for (let i = k; i > 0; i -- ) { // 初始元素不变 每一个元素往后移动一位
    20.         this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));
    21.     }
    22.  
    23. }
    24.  
    25.     update_move() {
    26.         const dx = this.next_cell.x - this.cells[0].x;
    27.         const dy = this.next_cell.y - this.cells[0].y;
    28.         const distance = Math.sqrt(dx * dx + dy * dy);
    29.  
    30.         if (distance < this.eps) {  // 走到目标点了
    31.             this.cells[0] = this.next_cell;  // 添加一个新蛇头
    32.             this.next_cell = null;
    33.             this.status = "idle";  // 走完了，停下来
    34.  
    35.             if (!this.check_tail_increasing()) { // 蛇不变长。
    36.                 this.cells.pop();
    37.             }
    38.  
    39.         } else {
    40.             const move_distance = this.speed * this.timedelta / 1000;
    41.             this.cells[0].x += move_distance * dx / distance;
    42.             this.cells[0].y += move_distance * dy / distance;
    43.  
    44.             if (!this.check_tail_increasing()) {
    45.                 const k = this.cells.length;
    46.                 const tail = this.cells[k - 1], tail_target = this.cells[k - 2];
    47.                 const tail_dx = tail_target.x - tail.x;
    48.                 const tail_dy = tail_target.y - tail.y;
    49.                 tail.x += move_distance * tail_dx / distance;
    50.                 tail.y += move_distance * tail_dy / distance;
    51.             }
    52.         }
    53.     }

     在这里插入图片描述

    效果图：

     在这里插入图片描述

     六、美化蛇和检测非法逻辑

    修改 Snake.js ，让蛇变得连贯、缩小一点。添加下列代码：

    1. render() {
    2.         const L = this.gamemap.L;
    3.         const ctx = this.gamemap.ctx;
    4.  
    5.         ctx.fillStyle = this.color;
    6.         for (const cell of this.cells) {
    7.             ctx.beginPath();
    8.             ctx.arc(cell.x * L, cell.y * L, L / 2 * 0.8, 0, Math.PI * 2);
    9.             ctx.fill();
    10.         }
    11.  
    12.         for (let i = 1; i < this.cells.length; i ++ ) {
    13.             const a = this.cells[i - 1], b = this.cells[i];
    14.             if (Math.abs(a.x - b.x) < this.eps && Math.abs(a.y - b.y) < this.eps)
    15.                 continue;
    16.             if (Math.abs(a.x - b.x) < this.eps) {
    17.                 ctx.fillRect((a.x - 0.4) * L, Math.min(a.y, b.y) * L, L * 0.8, Math.abs(a.y - b.y) * L);
    18.             } else {
    19.                 ctx.fillRect(Math.min(a.x, b.x) * L, (a.y - 0.4) * L, Math.abs(a.x - b.x) * L, L * 0.8);
    20.             }
    21.         }
    22.     }

    效果图：

     在这里插入图片描述

     检测非法逻辑：

    1）此时目标位置是否合法（墙体、蛇身、障碍物）

    2）蛇尾前进时，蛇尾要不要判断

    在 GameMap.js 中更新：

    1. check_valid(cell) {  // 检测目标位置是否合法：没有撞到两条蛇的身体和障碍物
    2.         for (const wall of this.walls) {
    3.             if (wall.r === cell.r && wall.c === cell.c)
    4.                 return false;
    5.         }
    6.  
    7.         for (const snake of this.snakes) {
    8.             let k = snake.cells.length;
    9.             if (!snake.check_tail_increasing()) {  // 当蛇尾会前进的时候，蛇尾不要判断
    10.                 k -- ;
    11.             }
    12.             for (let i = 0; i < k; i ++ ) {
    13.                 if (snake.cells[i].r === cell.r && snake.cells[i].c === cell.c)
    14.                     return false;
    15.             }
    16.         }
    17.  
    18.         return true;
    19.     }
    20.

    在这里插入图片描述

     在 Snake.js 中更新：

    1. next_step() {
    2.         if (!this.gamemap.check_valid(this.next_cell)) {
    3.         this.status = "die";
    4.     }
    5. }
    6.  
    7.  
    8. render() {
    9.     if (this.status === "die") {
    10.         ctx.fillStyle = "white";
    11.     }
    12. }

     在这里插入图片描述

     在这里插入图片描述

     效果图：

    在这里插入图片描述

    画蛇点睛！！！！

    修改 Snake.js

    1. this.eye_direction = 0;
    2. if (this.id === 1) this.eye_direction = 2;
    3.  
    4. this.eye_dx = [
    5.     [-1, 1];
    6.     [1, 1];
    7.     [1, -1];
    8.     [-1, -1];
    9. ];
    10. this.eye_dy = [
    11.     [-1, -1];
    12.     [-1, 1];
    13.     [1, 1];
    14.     [1, -1];
    15. ];
    16.  
    17.  
    18. next_step() {
    19.     this.eye_direction = d;
    20.  
    21. }
    22.  
    23. render() {
    24.     ctx.fillStyle = "black";
    25.         for (let i = 0; i < 2; i ++ ) {
    26.             const eye_x = (this.cells[0].x + this.eye_dx[this.eye_direction][i] * 0.15) * L;
    27.             const eye_y = (this.cells[0].y + this.eye_dy[this.eye_direction][i] * 0.15) * L;
    28.  
    29.             ctx.beginPath();
    30.             ctx.arc(eye_x, eye_y, L * 0.05, 0, Math.PI * 2);
    31.             ctx.fill();
    32.         }
    33. }

     在这里插入图片描述

     在这里插入图片描述

     效果图：

    在这里插入图片描述

     最后记得用 git 维护哦~~

     

  • 相关阅读:
    hdfs读流程
    建一座设计模式大厦
    ElementUl-布局+分页+表格+导航栏
    List类使用
    程序设计原则
    STM32单片机LCD1602智能药盒定时药盒开盒检测拿起检测
    uvm中transaction的response和id的解读
    【endnote】如何将参考文献放到想放的位置
    JavaWeb AJAX请求
    计算器的简化版
  • 原文地址：https://blog.csdn.net/qq_59539549/article/details/127836997