您现在的位置是:首页 > 正文

项目实战——创建菜单与游戏页面(下)

2024-02-01 01:30:57阅读 1

目录

一、整体框架

二、修改地图为中心对称

三、 画蛇

四、实现蛇的移动

 五、读取键盘的操作

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


一、整体框架

逻辑框架图

二、修改地图为中心对称

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

修改代码:

x = rows - 1 - x;

y = cols - 1 - y;

 修改地图1

 

 成功后的界面:

地图修改sucess

 

三、 画蛇

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

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

新建Cell.js 存储一堆格子的序列 (蛇的身体):

export class Cell {
    constructor(r, c) {
        this.r = r;
        this.c = c;
        // 转换为 canvas 的坐标
        this.x = c + 0.5;  
        this.y = r + 0.5;
    }
}

 蛇头1

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

import { AcGameObject } from "./AcGameObject";
import { Cell } from "./Cell";


export class Snake extends AcGameObject {
    constructor(info, gamemap) {
        super();

        // 取出基本的id
        this.id = info.id;
        this.color = info.color;
        this.gamemap = gamemap; // 方便调用函数和参数

        //存放蛇的身体;
        this.cells = [new Cell(info.r, info.c)];

    }

    start() {

    }

    update() {
        this.render();
    }

    render() {
        // 画出基本的蛇头
        const L = this.gamemap.L;
        const ctx = this.gamemap.ctx;

        ctx.fillStyle = this.color;
        for (const cell of this.cells) {
            ctx.beginPath();
            ctx.arc(cell.x * L, cell.y * L, L / 2, 0, Math.PI * 2);
            ctx.fill();
        }
    }
}

 蛇头2

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

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

 蛇头3

成功之后的界面:

 蛇头sucess

四、实现蛇的移动

移动应该是连贯的。

身体有多个部分,如何让保持连贯?

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

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

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

import { AcGameObject } from "./AcGameObject";
import { Cell } from "./Cell";

export class Snake extends AcGameObject {
    constructor(info, gamemap) {
        super(); // 继承AcGameObject的方法

        this.id = info.id;
        this.color = info.color;
        this.gamemap = gamemap;

        this.cells = [new Cell(info.r, info.c)]; // 存放蛇的身体, cell[0] 存放蛇头
        // new add
        this.speed = 5;
    }


    update_move() {
        // 向右移动
        this.cells[0].x += this.speed * this.timedelta / 1000;
        //向上移动
        //this.cells[0].y -= this.speed * this.timedelta / 1000;
    }

    update() {
        this.update_move();
        this.render();
    }

在这里插入图片描述

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

向右移动sucess

如何实现连贯的移动呢?

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

修改 Snake.js:

import { AcGameObject } from "./AcGameObject";
import { Cell } from "./Cell";

export class Snake extends AcGameObject {
    constructor(info, gamemap) {
        super();

        this.id = info.id;
        this.color = info.color;
        this.gamemap = gamemap;

        //存放蛇的身体;
        this.cells = [new Cell(info.r, info.c)];

        this.speed = 5; // 蛇每秒走5格
        // new add
        this.direction = -1; // -1表示没有指令 0 1 2 3 
        this.status = "idle"; // 静止, move 移动 die 死亡
    }  
}

基本移动 

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

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

 裁判逻辑

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

this.next_cell = null; //下一步的目标位置

this.dr = [-1, 0, 1, 0]; // 行
this.dc = [0, 1, 0, -1]; //列

this.step = 0;

next_step() {
    const d = this.direction;
    this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
    this.direction = -1;
    this.status = "move";
    this.step ++ ;
}

 在这里插入图片描述

 在 GameMap.js 中更新:

next_step() {
    for (const snake of this.snake) {
        snake.next_step();
    }
}

update() {
    this.update_size();
    if (this.check_ready()) {
        this.next_step();
    }
    this.render();
}

 基本移动4

 五、读取键盘的操作

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

在 GameMap.vue 中修改:

<canvas ref="canvas" tabindex="0"></canvas>

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

在这里插入图片描述

绑定事件:

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

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

 在这里插入图片描述

在 GameMap.js 中修改,添加事件:

 

add_listening_events() {
        this.ctx.canvas.focus();

        const [snake0, snake1] = this.snakes;
        this.ctx.canvas.addEventListener("keydown", e => {
            if (e.key === 'w') snake0.set_direction(0);
            else if (e.key === 'd') snake0.set_direction(1);
            else if (e.key === 's') snake0.set_direction(2);
            else if (e.key === 'a') snake0.set_direction(3);
            else if (e.key === 'ArrowUp') snake1.set_direction(0);
            else if (e.key === 'ArrowRight') snake1.set_direction(1);
            else if (e.key === 'ArrowDown') snake1.set_direction(2);
            else if (e.key === 'ArrowLeft') snake1.set_direction(3);
        });
    }

 在这里插入图片描述

在 Snake.js 中更新状态:

update() { // 每一帧执行一次
    if (this.status === 'move') {
        this.uppdate_move()
    }

    this.render();
}

 在这里插入图片描述

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

在 Snake.js 中修改:

import { AcGameObject } from "./AcGameObject";
import { Cell } from "./Cell";

export class Snake extends AcGameObject {
    constructor(info, gamemap) {
        super();

        this.id = info.id;
        this.color = info.color;
        this.gamemap = gamemap;

        this.cells = [new Cell(info.r, info.c)];  // 存放蛇的身体,cells[0]存放蛇头
        this.next_cell = null;  // 下一步的目标位置

        this.speed = 5;  // 蛇每秒走5个格子
        this.direction = -1;  // -1表示没有指令,0、1、2、3表示上右下左
        this.status = "idle";  // idle表示静止,move表示正在移动,die表示死亡

        this.dr = [-1, 0, 1, 0];  // 4个方向行的偏移量
        this.dc = [0, 1, 0, -1];  // 4个方向列的偏移量

        this.step = 0;  // 表示回合数
        this.eps = 1e-2;  // 允许的误差

    }


    start() {

    }

    set_direction(d) {
        this.direction = d;
    }

    next_step() { //蛇的状态变为走下一步
        const d = this.direction;
        this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
        this.direction = -1;
        this.status = "move";
        this.step ++ ;   

        // 求长度
        const k = this.cells.length;
        for (let i = k; i > 0; i -- ) { // 初始元素不变 每一个元素往后移动一位
            this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));
        }

    }

    update_move() {
        const dx = this.next_cell.x - this.cells[0].x;
        const dy = this.next_cell.y - this.cells[0].y;
        const distance = Math.sqrt(dx * dx + dy * dy);



        if (distance < this.eps) {  // 走到目标点了
            this.cells[0] = this.next_cell;  // 添加一个新蛇头
            this.next_cell = null;
            this.status = "idle";  // 走完了,停下来

        } else {
            const move_distance = this.speed * this.timedelta / 1000;
            this.cells[0].x += move_distance * dx / distance;
            this.cells[0].y += move_distance * dy / distance;
        }
    }

    update() {  // 每一帧执行一次
        if (this.status === 'move') {
            this.update_move();
        }

        this.render();
    }


    render() {
        const L = this.gamemap.L;
        const ctx = this.gamemap.ctx;

        ctx.fillStyle = this.color;
        for (const cell of this.cells) {
            ctx.beginPath();
            ctx.arc(cell.x * L, cell.y * L, L / 2, 0, Math.PI * 2);
            ctx.fill();
        }
    }
}

实现蛇尾的移动 :

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

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

 在这里插入图片描述

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

this.next_cell = null; //下一步的目标位置

this.dr = [-1, 0, 1, 0]; // 行
this.dc = [0, 1, 0, -1]; //列

this.step = 0;

this.eps = 1e-2 // 允许的误差

next_step() {
    const d = this.direction;
    this.next_cell = new Cell(this.cells[0].r + this.dr[d], this.cells[0].c + this.dc[d]);
    this.direction = -1;
    this.status = "move";
    this.step ++ ;

        // 求长度
    const k = this.cells.length;
    for (let i = k; i > 0; i -- ) { // 初始元素不变 每一个元素往后移动一位
        this.cells[i] = JSON.parse(JSON.stringify(this.cells[i - 1]));
    }

}

    update_move() {
        const dx = this.next_cell.x - this.cells[0].x;
        const dy = this.next_cell.y - this.cells[0].y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < this.eps) {  // 走到目标点了
            this.cells[0] = this.next_cell;  // 添加一个新蛇头
            this.next_cell = null;
            this.status = "idle";  // 走完了,停下来

            if (!this.check_tail_increasing()) { // 蛇不变长。
                this.cells.pop();
            }

        } else {
            const move_distance = this.speed * this.timedelta / 1000;
            this.cells[0].x += move_distance * dx / distance;
            this.cells[0].y += move_distance * dy / distance;

            if (!this.check_tail_increasing()) {
                const k = this.cells.length;
                const tail = this.cells[k - 1], tail_target = this.cells[k - 2];
                const tail_dx = tail_target.x - tail.x;
                const tail_dy = tail_target.y - tail.y;
                tail.x += move_distance * tail_dx / distance;
                tail.y += move_distance * tail_dy / distance;
            }
        }
    }

 在这里插入图片描述

效果图:

 在这里插入图片描述

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

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

render() {
        const L = this.gamemap.L;
        const ctx = this.gamemap.ctx;

        ctx.fillStyle = this.color;
        for (const cell of this.cells) {
            ctx.beginPath();
            ctx.arc(cell.x * L, cell.y * L, L / 2 * 0.8, 0, Math.PI * 2);
            ctx.fill();
        }

        for (let i = 1; i < this.cells.length; i ++ ) {
            const a = this.cells[i - 1], b = this.cells[i];
            if (Math.abs(a.x - b.x) < this.eps && Math.abs(a.y - b.y) < this.eps)
                continue;
            if (Math.abs(a.x - b.x) < this.eps) {
                ctx.fillRect((a.x - 0.4) * L, Math.min(a.y, b.y) * L, L * 0.8, Math.abs(a.y - b.y) * L);
            } else {
                ctx.fillRect(Math.min(a.x, b.x) * L, (a.y - 0.4) * L, Math.abs(a.x - b.x) * L, L * 0.8);
            }
        }
    }

效果图:

 在这里插入图片描述

 检测非法逻辑:

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

2)蛇尾前进时,蛇尾要不要判断

在 GameMap.js 中更新:

check_valid(cell) {  // 检测目标位置是否合法:没有撞到两条蛇的身体和障碍物
        for (const wall of this.walls) {
            if (wall.r === cell.r && wall.c === cell.c)
                return false;
        }

        for (const snake of this.snakes) {
            let k = snake.cells.length;
            if (!snake.check_tail_increasing()) {  // 当蛇尾会前进的时候,蛇尾不要判断
                k -- ;
            }
            for (let i = 0; i < k; i ++ ) {
                if (snake.cells[i].r === cell.r && snake.cells[i].c === cell.c)
                    return false;
            }
        }

        return true;
    }

在这里插入图片描述

 在 Snake.js 中更新:

next_step() {
        if (!this.gamemap.check_valid(this.next_cell)) {
        this.status = "die";
    }
}


render() {
    if (this.status === "die") {
        ctx.fillStyle = "white";
    }
}

 在这里插入图片描述

 在这里插入图片描述

 效果图:

在这里插入图片描述

画蛇点睛!!!!

修改 Snake.js

this.eye_direction = 0;
if (this.id === 1) this.eye_direction = 2;

this.eye_dx = [
    [-1, 1];
    [1, 1];
    [1, -1];
    [-1, -1];
];
this.eye_dy = [
    [-1, -1];
    [-1, 1];
    [1, 1];
    [1, -1];
];


next_step() {
    this.eye_direction = d;

}

render() {
    ctx.fillStyle = "black";
        for (let i = 0; i < 2; i ++ ) {
            const eye_x = (this.cells[0].x + this.eye_dx[this.eye_direction][i] * 0.15) * L;
            const eye_y = (this.cells[0].y + this.eye_dy[this.eye_direction][i] * 0.15) * L;

            ctx.beginPath();
            ctx.arc(eye_x, eye_y, L * 0.05, 0, Math.PI * 2);
            ctx.fill();
        }
}

 在这里插入图片描述

 在这里插入图片描述

 效果图:

在这里插入图片描述

 最后记得用 git 维护哦~~

 

网站文章

  • 关于MySQL中文乱码显示???解决办法

    关于MySQL中文乱码显示???解决办法

    描述 电脑配置:win10系统,MySQL版本5.7.19 用sqlyog设置的utf8只能在软件里面显示正常,而当我用eclipse连接数据库进行数据库内容输入输出时,中文就会显示??? 解决办法 ...

    2024-02-01 01:30:50
  • 11个 React 图片库演示示例

    11个 React 图片库演示示例

    来源 | https://us.niemvuilaptrinh.com/article/13-examples-of-react-photo-gallery-for-website在今天的...

    2024-02-01 01:30:42
  • commons-collections包中的常用的工具类

    commons-collections包中的常用的工具类

    commons-collections包中的常用的工具类 <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> &...

    2024-02-01 01:30:13
  • SpringBoot集成logstash

    SpringBoot集成logstash

    前言 原网址:https://www.jianshu.com/p/b6977babcc7e 大家应该都听说过ELK,一般ELK都是用来做分布式系统的集中日志管理,ELK的优点这里就不介绍了,好处太多,今天主要介绍下其中的Logstash。数据传给logstash,它将数据进行过滤和格式化(转成JSON格式),然后传给数据存储或者消息队列Broker,用于后续加工处理。 最近要做app埋点监控...

    2024-02-01 01:30:05
  • List-迭代器与反向迭代器

    List-迭代器与反向迭代器

    list的简单使用以及模拟实现(模板参数,反向迭代器)

    2024-02-01 01:29:59
  • initgraph函数(讲解) 热门推荐

    函数名: initgraph()   功 能: 初始化图形系统   函数原型: void far initgraph(int far *graphdriver, int far *graphmode,   char far *pathtodriver);graphdriver是上涨指向图形驱动序号变量的指针;graphmode是在graphdriver选定后,指向图形显示模式序号变

    2024-02-01 01:29:30
  • C语言案例-输出 Fibonacci 数列(斐波那契数列)的前 40 项

    【代码】C语言案例-输出 Fibonacci 数列(斐波那契数列)的前 40 项。

    2024-02-01 01:29:21
  • iOS 8 人机交互指南极客翻译版(一)

    iOS 8 人机交互指南极客翻译版(一)

    为设计而生iOS 设计包含了以下几个关键点遵从:UI 能够帮助用户理解内容并与之互动,但却不会分散用户对内容的注意力清晰:每种大小的文字都必须是易读的,界面中的图标醒目且无多余的修饰,在功能上有突出的重点,很好地突显了设计理念。深度:视觉层次和生动的交互操作赋予了 UI 生命力,不仅能够帮助用户更好的理解 UI,还能让用户在使用过程中感到惊喜无论你正在重新...

    2024-02-01 01:29:15
  • 苹果手机怎么编辑word文档_办公软件入门到精通:文档WORD文本编辑

    苹果手机怎么编辑word文档_办公软件入门到精通:文档WORD文本编辑

    大家好:我是小愿望,很高兴你能看到这篇文章,也感谢能在这个平台能跟大家分享,在以后的日子里会陆续发文一些办公软件的操作知识,希望大家喜欢。上一篇跟大家分享了WORD文档的文本输入内容,本期我们继续往下...

    2024-02-01 01:28:46
  • 【华为OD机试真题 Python语言】179、探索地块建立 | 机试真题+思路参考+代码解析

    给一块 n * m 的地块,相当于n * m的二维数组,每个元素的值表示这个小地块的发电量; &gt; 求在这块地上建立正方形的边长为c的发电站,发电量满足目标电量k的地块数量

    2024-02-01 01:28:38