3.实现蛇和基本游戏界面

已于 2022-07-18 19:31:33 修改
阅读量883 收藏
点赞数
分类专栏： Java 文章标签： 游戏 javascript 前端
于 2022-07-18 19:21:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41046821/article/details/125855721
版权

1. 整体框架

逻辑框架图

2. 修改地图

思想

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

修改代码：

x = rows - 1 - x;

y = cols - 1 - y;

实现方式 ：

包含以下位置需要修改：

修改地图1

地图2

成功界面：

地图修改sucess

3. 实现蛇的头部

1. 思想

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

2. 实现

  1. 新建 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

  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

  1. 在 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

  1. 成功界面

蛇头sucess

4. 实现蛇的移动

思想
移动应该是连贯的。

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

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

蛇什么时候可以动？

同时获取两个人 / 两个机器 的操作才能动。

4.1 基本的移动

  1. 在 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();
    }

在这里插入图片描述

  1. 大致效果：
    蓝色的球一直往右移动，红色的已经移动到看不见的地方了。

向右移动sucess

4.2 连贯的移动

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

基本移动

  1. 需要有一个裁判来判断两条蛇的移动，我们放在 GameMap.js 中
check_ready() { // 判断两条蛇是否准备下一回合了
   for (const snake of this.snakes) {
      if (snake.status !== "idle") return false;
      if (snake.direction === -1) return false;
     }
  return true;  
}

裁判逻辑

  1. 在 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 ++ ;
}

在这里插入图片描述

  1. 在 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

4.3 读取键盘的操作：

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

  1. 在 GameMap.vue中修改
<canvas ref="canvas" tabindex="0"></canvas>

在这里插入图片描述

  1. 绑定事件。

在 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);
        });
    }

在这里插入图片描述

  1. 在 Snake.js 中更新状态：
update() { // 每一帧执行一次
    if (this.status === 'move') {
        this.uppdate_move()
    }

    this.render();
}

在这里插入图片描述

4.4 实现真正的移动

在 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();
        }
    }
}

4.5 蛇尾移动

  1. 在 Snake.js 中添加代码，判断蛇尾是否增长。
check_tail_increasing() {
    if (step <= 10) return true;
    if (step % 3 === 1) return true;
    return false;
}

在这里插入图片描述

  1. 修改 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;
            }
        }
    }

在这里插入图片描述

  1. 基本效果

在这里插入图片描述

4.6 美化蛇

修改 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. 基本效果：

在这里插入图片描述

4.7 检测非法逻辑

  1. 在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;
    }

在这里插入图片描述

  1. 在snake.js中更新
next_step() {
        if (!this.gamemap.check_valid(this.next_cell)) {
        this.status = "die";
    }
}


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

在这里插入图片描述

在这里插入图片描述

  1. 最终效果，红色的蛇撞墙死去：

在这里插入图片描述

4.8 实现眼睛

  1. 修改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();
        }
}

在这里插入图片描述

在这里插入图片描述

效果：

在这里插入图片描述

至此，我们实现了最基本的地图和两条蛇的移动。

5 代码地址

https://git.acwing.com/syy/kob/-/commit/2ee3e35f352dbc104e69491db86856fe5d510ad6

芜湖男童
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java实现贪吃蛇小游戏源码.zip
12-16
3. **多线程**：为了使游戏画面流畅，通常会使用多线程来分离游戏逻辑和画面更新。游戏循环在一个独立的线程中运行，以确保即使在处理用户输入时也能定期更新屏幕。 4. **数据结构**：蛇的身体由一系列坐标点组成，...
Web学习笔记-中期项目（拳皇）
一只快乐的小蒟蒻~
11-16 2358
Web前端学习笔记-中期项目（拳皇）
unity hw5 打飞碟物理系统
DDghost的博客
04-23 296
unity hw5 根据老师的uml图，在之前的打飞碟游戏的代码的基础上进行修改，这里只贴修改了的代码。 对场记的Start函数进行修改，场记中有一个bool变量决定是否使用物理系统，当为真的时候，动作管理器就使用物理系统，否则就使用原来的运动管理器。 // Use this for initialization void Start () { diskFac = Singlet...
项目实战——创建菜单与游戏页面（上）
qq_59539549的博客
11-13 1342
PS：整篇文章全是实现前端的工作，如果大家不了解vue3，建议补一下前置知识~~PS：整篇文章全是实现前端的工作，如果大家不了解vue3，建议补一下前置知识~~
Web学习（五）中期项目-简易拳皇
May the Force be with you
04-23 3059
Web学习（五）中期项目-简易拳皇 项目参考地址：https://git.acwing.com/yxc/kof
Java实现贪吃蛇小游戏.zip
09-10
3. ** GameBoard 类**：游戏面板负责绘制游戏场景，包括蛇、食物和边界。可以使用Java的图形用户界面（GUI）库，如Swing或JavaFX，创建一个窗口并在其中画出游戏元素。通过监听键盘事件，来控制蛇的移动。 4. ** ...
java实现的贪吃蛇小游戏.zip
12-16
3. **对象和类的设计**：游戏中的每个元素，如蛇、食物、边界，都可以抽象为类。蛇类可能包含位置、长度等属性，以及移动、增长等方法；食物类负责生成随机位置；边界类用于检测蛇是否出界。 4. **数据结构**：为了...
基于C语言实现的贪吃蛇小游戏.zip
04-29
2. **数组与指针**：蛇的身体可以表示为一个动态数组或链表，利用指针操作数组元素，实现蛇的移动和增长。例如，蛇头的位置可以通过一个指针指向数组的第一个元素，蛇尾则可以通过另一个指针追踪。 3. **循环与条件...
【保卫花果山】游戏
xiaolizi66936的博客
07-18 371
拯救花果山是一款很多小伙伴都会能参与挑战的冒险小游戏，这是发生在花果山的故事，接下来你会成为一名救世主的，你的任务就是去与各种妖魔作战，能不能拯救世界就看你的了，有很多内容都会的期待的，游戏的时候你的反应一定要快，不然的话，失败了就得不尝试，得重新来过。
基于SpringBoot+Vue的游戏分享网站(带1w+文档)
神聪程序
07-20 542
本系统主要包括管理员和用户两个角色组成；主要包括首页、个人中心、用户管理、游戏类型管理、游戏文章管理、交流论坛、系统管理等功能的管理系统。
Unity点击生成节点连线
w091253的博客
07-19 226
Unity点击生成节点连线
Unity监听某个值是否改变，c#数值监听器
最新发布
GoodCooking的博客
07-23 170
Unity监听某个值是否改变，c#数值监听器
Model Import Settings
UniMark的博客
07-19 1269
在可视化3D世界中，模型是3D世界的核心，你可以没有贴图，可以没有特效，甚至可以没有用户交互界面，但必须得有模型来描述世界的基本样貌。在3D世界中，由点线面构成了模型的轮廓；由UV和纹理，共同描述模型的样貌；由骨骼和蒙皮信息描述模型的运动姿态；再由骨骼的运动轨迹描述模型在某个时间段内的肢体动作。
2024-07-20 Unity插件 Odin Serializer2 —— 序列化教程
zheliku的博客
07-20 891
​ 如果已有需要继承的特定基类型，则通过实现 Unity 的 ISerializationCallbackReceiver 接口并使用 Odin 的 UnitySerializationUtility 类，可以在需要的地方自行实现序列化。自定义 Odin-serialized自定义 Odin-serialized} }​ 使用 SerializationUtility 类，该类包装序列化系统并处理所涉及的所有样板代码。
Unity 导入MRTK，使用URP 升级材质，MRTK的材质还是洋红色
o_ojjj的博客
07-18 293
选择最后一个，这个是MRTK自带的，点击把可以材质升级成URP。点击URP的升级材质并不能把MRTK的材质进行升级。
UE4-打包游戏，游戏模式，默认关卡
weixin_52159554的博客
07-18 262
如果没有安装可以通过在 编辑器开始界面，创建C++项目来让编译器来帮我们安装，这样安装我们项目需要用到C++插件编译器都会帮我们安装好。如果打包完画面自动跳转到网页，那么说明此时我们电脑的Visual Studio环境没有配置好。注意windows系统无法打包苹果系统的执行包，只能使用苹果系统打包。在这个界面可以配置游戏的默认地图和游戏的模式，对项目中所有关卡都生效。编辑器打开时默认打开那个地图，和游戏打包后默认打开那个地图。2.设置默认加载的关卡和游戏模式。选择我们打包的项目是开发版还是发行版本。
React学习笔记（井字棋游戏）
qq_63170044的博客
07-19 808
本教程将引导你逐步实现一个简单的井字棋游戏，并且不需要你对 React 有任何了解。在此过程中你会学习到一些编写 React 程序的基本知识，完全理解它们可以让你对 React 有比较深入的理解。是一些准备工作。介绍了 React 的：组件、props 和 state。介绍了 React 开发中。可以让你更深入地了解 React 的独特优势。
2024-07-19 Unity插件 Odin Inspector10 —— Misc Attributes
zheliku的博客
07-19 506
对象在 Inspector 窗口中被释放时（更改对象或 Inspector 窗口被隐藏 / 关闭）执行回调。如果由于遇到重复的引用值，而使此属性以其他方式绘制为对另一个属性的引用，则 Odin 将隐藏引用框。对象在 Inspector 窗口中被初始化时（打开 / 显示 Inspector 窗口）执行回调。注意：如果该值递归引用自身，则无论在所有递归绘制调用中是否使用此属性，都会绘制引用框。适用于属性和字段，每当通过 Inspector 窗口更改对象时，都会调用指定的函数。通过脚本更改的属性不会调用该函数。
2024年华为OD机试真题-虚拟游戏理财-C++-OD统一考试（C卷D卷）
面试高手的博客
07-21 9723
现有一家Bank，它提供有若干理财产品m，风险及投资回报不同，你有N（元）进行投资，能接受的总风险值为X。第一行：产品数(取值范围[1, 20])，总投资额(整数，取值范围[1, 10000])，可接受的总风险(整数，取值范围[1, 200])投资第二项30个单位，第四项40个单位，总的投资风险为两项相加为4+6=10。第四行：最大投资额度序列，输入为整数，取值范围[1,10000]第二行：产品投资回报率序列，输入为整数，取值范围[1,60]第三行：产品风险值序列，输入为整数，取值范围[1,100]
C++ MFC实现详尽贪吃蛇教程：界面设计与初始化
例如，JieMian变量用于跟踪用户对界面按钮的选择，Kuan和Gao分别代表游戏区域的宽度和高度，FangXiang用于表示蛇的移动方向，而FangGe则定义蛇移动的格子大小。这些变量的取值与游戏逻辑紧密相关，确保了游戏的正确...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值