HarmonyOS实战 | 贪吃蛇游戏 | JS全注释

最新推荐文章于 2024-07-15 13:17:25 发布
最新推荐文章于 2024-07-15 13:17:25 发布
阅读量743 收藏 32
点赞数 4
文章标签： html js java css python

来源：https://harmonyos.51cto.com/user/posts/15053213

关注回复"教程" 获得最新鸿蒙开发者教程

前言
 

本人之前是Java后端开发，对于前端开发一知半解。但是对于官方资料中的这个贪吃蛇项目十分感兴趣。打算做一遍流程。虽然资料中也含有开发流程，但是不全，而且没有注释。所以决定自己写完之后，把每个步骤总结出来并写上注释。属于二次创作吧！
 

开发完成的程序界面如下所示。抄一遍代码运行，也不会超过2h。适合刚学习鸿蒙的开发者~如果你喜欢，不妨收藏一下(≧∇≦)ﾉ

 正文

 

一、创建项目

1. 选择JS模板

2. 定义自己的项目名和包名，然后点击finsh

3. 创建完毕，生成的目录结构如下

    由于项目比较简单，所以就只需要在红框中的位置编写代码。这是由项目默认生成的噢！

二、编写代码

1. 导入图片资源

    在我提供的压缩资料里找到图片文件夹，他它们直接copy到项目目录中

2. 编写html页面

    先把标签、内容和资源定义好，编写完后运行查看结果

<!--容器-->
<div class="container">


    <!--标题-->
    <text class="title">Snake Game</text>


    <!--画布组件：贪吃蛇的移动区域-->
    <canvas style="width: 600px; height: 600px; background-color: black;"></canvas>


    <!--上按键-->
    <image src="/common/up.png"></image>
    <!--左按键-->
    <image src="/common/left.png"></image>
    <!--下按键-->
    <image src="/common/down.png"></image>
    <!--右按键-->
    <image src="/common/right.png"></image>
    
    <!--显示得分-->
    <text>
        <span>Score: </span>
    </text>


</div>

   运行后发现样式布局混乱，不过没关系，运行主要是确保样式和资源有没有加载。都加载好之后，再调整样式

   （测试的话，要去最上方导航栏，点击 Tools>HVD Manager>登陆开发者账号>选择P40后面的那个三角形）
3. 编写css代码

    调整样式，在需要调整的样式后面加对应的类名class=""，通过这些类名调用css文件的数据

<!--上按键-->
<image class="backBtnup" src="/common/up.png"></image>
<!--左按键-->
<image class="backBtnleft" src="/common/left.png"></image>
<!--下按键-->
<image class="backBtncenter" src="/common/down.png"></image>
<!--右按键-->
<image class="backBtnright" src="/common/right.png"></image>


<!--显示得分-->
<text class="scoretitle">
    <span>Score: </span>
</text>

    

确认好类名之后，就在index.css文件中根据类名写css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}


.title {
    font-size: 100px;
    margin-bottom: 130px;
}


.scoretitle {
    font-size: 50px;
    margin-top: 30px;
}


/*
  css选择器，逗号代表并列关系
  具体可以百度噢，因为前端博大精深
*/
.backBtnup, .backBtncenter, .backBtnleft, .backBtnright {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: black;
}


.backBtnup {
    margin-top: 80px;
}


.backBtncenter {
    margin-left: 40px;
    margin-right: 40px;
}

    写好上述内容后，再次运行一下。发现有点样子了，只需处理一下按钮即可

4. 优化按钮

    想要的效果是方向键如同键盘方向的布局，所以只需对下面三个按键进行处理。可以用一个div标签把它们包裹起来，再定义一个新属性

<!--上按键-->
<image class="backBtnup" src="/common/up.png"></image>
<!--下面三个按键用同一样式，所以用同一个div包围-->
<div class="directsecond">
    <!--左按键-->
    <image src="/common/left.png" class="backBtnleft"></image>
    <!--下按键-->
    <image src="/common/down.png" class="backBtncenter"></image>
    <!--右按键-->
    <image src="/common/right.png" class="backBtnright"></image>
</div>

    css部分的新添加的代码

.directsecond {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    运行测试一下，发现达到了我们想要的效果

三、编写JS代码


我们发现现在只有样式，光点击按钮没有反馈，而且也没有小蛇和食物……

所以我们接下来编写JS代码就是要解决这些事情，但是切忌边写边想。应该先设计再写代码！

 

1. 设计思想

  • 按钮的触发是通过点击屏幕，所以要有点击事件

鼠标点击事件是有对应的方法

通过方法传不同的参数来区别不同的方向

 

  • 食物的生成

随机生成
判断食物生成的位置如果出现在蛇身上，则重新生成

 

  • 蛇身的初始化 （由于案例比较简单，所以没有设定随机生成初始位置）

给定长度并设定一个空数组
通过for循环，把x和y的坐标push进数组，作为蛇身每格的位置

 

  • 蛇运动

移动是靠每帧重绘位置

吃到水果就头部立刻加长
没吃到水果就去掉尾部，把头部方向指向的下一个位置记录到数组头部，等下次刷新帧

  • 判定游戏结束

碰壁

相对方向移动
形成环路

 

2. 方法调用流程图

虚线代表 if 判断，如果为符合判断条件才会调用该方法

3. 编写代码

    在index.html文件中绑定对应的事件（这也是html文件的全部内容）

<!--容器-->
<div class="container">


    <!--标题-->
    <text class="title">Snake Game</text>


    <!--画布组件：贪吃蛇的移动区域-->
    <canvas ref="canvasref" style="width: 600px; height: 600px; background-color: black;"></canvas>


    <!--上按键-->
    <image src="/common/up.png" class="backBtnup" onclick="onStartGame(1)"></image>


    <!--下面三个按键用同一样式，所以用同一个div包围-->
    <div class="directsecond">
        <!--左按键-->
        <image src="/common/left.png" class="backBtnleft" onclick="onStartGame(2)"></image>
        <!--下按键-->
        <image src="/common/down.png" class="backBtncenter" onclick="onStartGame(3)"></image>
        <!--右按键-->
        <image src="/common/right.png" class="backBtnright" onclick="onStartGame(4)"></image>
    </div>


    <!--用if判断，如果游戏结束，则显示该模块-->
    <text if="{{gameOver}}" class="scoretitle">
        <span>Game Over!!!</span>
    </text>
    <!--用if判断，如果游戏没有结束，则显示该模块。显示得分-->
    <text if="{{!gameOver}}" class="scoretitle">
        <span>Score: {{score}}</span>
    </text>
</div>

 

  index.js文件的全部内容

export default {
    data: {
        title: "",
        snakeSize: 30,      // 蛇身格子像素大小
        w: 600,             // 背景的宽度
        h: 600,             // 背景的高度
        score: 0,           // 得分为0
        snake : [],         // 数组用来存蛇每个格子的位置
        ctx: null,          // 用来调用填充颜色的
        food: null,         // 食物位置
        direction: '',      // 按键的状态
        gameOver: false,    // 游戏状态
        tail: {             // 记录更新后蛇头的位置
            x: 0,
            y: 0
        },
        interval : null     // 获得setInterval()的返回值
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onShow() {
        // 通过$refs得到组件，进而调用组件的变量和方法
        const canvas = this.$refs.canvasref;
        // 指定了二维绘画
        this.ctx = canvas.getContext("2d");
        // 第一次打开app时，初始化蛇的方向
        this.direction = 'down';
        // 调用初始化蛇体的方法
        this.drawSnake()
        // 创建食物的位置
        this.createFood()
        // 渲染帧画面
        this.paint()
    },
    // 画背景
    drawArea() {
        var ctx = this.ctx
        // 设置填充颜色的
        ctx.fillStyle = '#61c7e6';
        // 填充
        ctx.fillRect(0, 0, this.w, this.h);
        // 设置矩阵颜色的
        ctx.strokeStyle = '#00000';
        // 矩阵的线宽
        ctx.lineWidth = 5;
        // 绘制矩阵（不填色的）
        ctx.strokeRect(0, 0, this.w, this.h);
        this.ctx = ctx
    },
    // 创建蛇体
    drawSnake() {
        var len = 7;
        var snake = [];
        // 默认蛇的长度为7
        for (var i = len - 1; i >= 0; i--) {
            // 将x轴和y轴的坐标数据存到数组中，这些数据就是每个蛇格子的位置
            snake.push({
                x: 0,
                y: i
            });
        }
        // 更新蛇的长度
        this.snake = snake;
    },
    // 设计蛇身的颜色的
    bodySnake(x, y) {
        //single square of snake
        var ctx = this.ctx;
        // 蛇的颜色及填充的位置和大小
        ctx.fillStyle = '#e28743';
        // fillRect()指的是要填充的位置及大小 参数说明：fillRect(X轴位置, Y轴位置, 宽度, 高度）
        ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        // 蛇的内部格子边框颜色，加了才会分割
        ctx.strokeStyle = '#063970';
        ctx.strokeRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        this.ctx = ctx;
    },
    // 设计食物的颜色的
    cookie(x, y) {
        var ctx = this.ctx;
        // 食物的颜色及填充位置和大小
        ctx.fillStyle = '#e2d743';
        ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
        this.ctx = ctx;
    },
    // 创建食物的位置
    createFood() {
        // 随机生成食物的位置
        // 这里的20是背景高度（宽度）/ 格子高度（宽度），即 600 / 30 = 20
        this.food = {
            x: Math.floor((Math.random() * 20) + 1),
            y: Math.floor((Math.random() * 20) + 1)
        }
        for (var i = 0; i > this.snake.length; i++) {
            // 获取刚创建蛇的时候，蛇上每个点的位置，再和食物的位置进行比较
            var snakeX = this.snake[i].x;
            var snakeY = this.snake[i].y;
            // 如果食物的位置出现在蛇的身上，则重新生成
            if (this.food.x === snakeX && this.food.y === snakeY || this.food.y === snakeY && this.food.x === snakeX) {
                this.food.x = Math.floor((Math.random() * 20) + 1);
                this.food.y = Math.floor((Math.random() * 20) + 1);
            }
        }
    },
    // 检查是否碰壁
    checkCollision(x, y, array) {
        for(var i = 0; i < array.length; i++) {
            if(array[i].x === x && array[i].y === y)
            return true;
        }
        return false;
    },
    // 鼠标点击绑定的事件
    onStartGame(direct){
        // 设置游戏初始状态，控制text标签的显示
        this.gameOver = false
        // 通过对应的参数，获取对应direct的字段
        if (direct == 1) {
            this.direction = 'up'
        } else if (direct == 2) {
            this.direction = 'left'
        } else if (direct == 3) {
            this.direction = 'down'
        } else if (direct == 4) {
            this.direction = 'right'
        }
        // 调用绘图方法
        this.paint()
        // 设置蛇的移动间隔时间，也可以理解为绘图的时间间隔
        if (this.interval == null) {
            // setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
            this.interval = setInterval(this.paint, 250);
        }
    },
    // 每次移动刷新的操作，即帧画面创建和渲染的流程
    paint() {
        // 调用画背景
        this.drawArea()
        // 获得蛇头的位置的初始坐标
        var snakeX = this.snake[0].x;
        var snakeY = this.snake[0].y;
        // 移动操作，更新数据
        if (this.direction == 'right') {
            snakeX++;
        }
        else if (this.direction == 'left') {
            snakeX--;
        }
        else if (this.direction == 'up') {
            snakeY--;
        } else if (this.direction == 'down') {
            snakeY++;
        }
        // 反向移动或碰撞壁的时候，游戏失败，重启游戏
        if (snakeX == -1 || snakeX == this.w / this.snakeSize || snakeY == -1 || snakeY == this.h / this.snakeSize || this.checkCollision(snakeX, snakeY, this.snake)) {
            //ctx.clearRect(0,0,this.w,this.h); //clean up the canvas
            clearInterval(this.interval);
            this.interval = null
            this.restart()
            return;
        }
        //  判断是否吃到食物
        if(snakeX == this.food.x && snakeY == this.food.y) {
            // 吃到食物
            // 将食物的位置记录下来
            this.tail = {x: snakeX, y: snakeY};
            // 分数加5
            this.score = this.score+5;
            // 再创建食物
            this.createFood();
        } else {
            // 没吃到食物
            // 去掉数组最后的元素并返回，相当于删除蛇尾
            this.tail = this.snake.pop();
            // 将移动更新后蛇头的位置加到tail中
            this.tail.x = snakeX;
            this.tail.y = snakeY;
        }
        // unshift()方法可向数组的开头添加一个或多个元素
        // 将更新后的节点添加蛇头
        this.snake.unshift(this.tail);
        // 渲染每个蛇身格子的位置
        for(var i = 0; i < this.snake.length; i++) {
            this.bodySnake(this.snake[i].x, this.snake[i].y);
        }
        // 渲染食物的位置
        this.cookie(this.food.x, this.food.y);
    },
    // 重启操作
    restart() {
        this.drawArea()
        this.drawSnake()
        this.createFood()
        this.gameOver = true
        this.score = 0
    },
}

    运行测试ok

总结

 

写贴方式有点虎头蛇尾，在比较重要的JS代码部分没有细致说清步骤。不过这也是没办法的，因为这里面太多嵌套调用了，只有文字无法说清，唯有视频讲解才能把逻辑理清。所以考虑到这样的缺点，我也做出了程序调用流程图来方便大家理解。就好像很难用语言去描述递归的调用流程一样，因为这是套娃……


在我看来这个小项目还是有比较多改进的地方

比如：

  • 蛇的位置随机生成；

  • 优化按下相对按键的操作：即蛇向右走的时候，按左方向是不会影响蛇的方向，就不会被程序判定失败了；

  • 定制专门的重启游戏按键

  • 等等

--完--

关注「HarmonyOS应用开发者」，一起学习成长

后台回复"教程" 获得最新鸿蒙开发者教程，助你快速上手鸿蒙开发！

程序员码仔
关注
  • 4
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
harmonyos的js UI框架FA概述
漏网之鱼的博客
09-17 3683
JS FA概述 JS UI框架支持纯JavaScript、JavaScript和Java混合语言开发。JS FA指基于JavaScript或JavaScript和Java混合开发的FA，下面主要介绍：JS FA在HarmonyOS上运行时需要的基类AceAbility、加载JS FA主体的方法、JS FA开发目录。 AceAbility AceAbility类是JS FA在HarmonyOS上运行环境的基类，继承自Ability。开发者的应用运行入口类应该从该类派生，代码示例如下： public
JS学习笔记——原生js贪吃蛇
smile981005的博客
12-29 217
目前处于学习阶段，学习的总结，如果有错误的地方，还请指出指教！ 思路：把界面分成30*30个小方格，蛇头、身子和食物分别占据一个小方格。 定义全局变量 // 全局变量 var sw = 20, // 一个方块的宽度 sh = 20, // 一个方块的高度 tr = 30, // 行数 td = 30; // 列数 var snake = null, // 蛇的实例 food = null, // 事物实例 game = null;
大数据最全java小项目之贪吃蛇项目（图解超详细）_java贪吃蛇(1)，2024年最新这些大数据开发高级必会知识点你能答出来几个
2401_84592266的博客
05-15 488
/这里再初始化一个用来判断游戏是否开始的，如果没开始的话，就可以进行一些文字提示。g.setFont(new Font(“楷体”,Font.BOLD,20));g.setFont(new Font(“楷体”,Font.BOLD,40));g.setFont(new Font(“楷体”,Font.BOLD,40));//首先是把头部的地址和头部的图片生成,还用到反射的机制,路劲src这个路径。//然后再这边定一个一个食物的属性，有坐标，还有一个随机数。//先设置一些变量,蛇的长度和蛇的x轴以及y轴坐标。
【鸿蒙】贪吃蛇（JS）
damao78945654的博客
11-17 1003
不喜勿喷，还上着学呢。
鸿蒙——贪吃蛇项目源码
09-23
鸿蒙——贪吃蛇项目源码，HarmonyOS实战 | 贪吃蛇游戏 | JS全注释
贪吃蛇编码——一款很老但很经典的游戏
07-01
就现在来说，这款游戏算是很低级的了，但是曾经有多少人是玩它长大的。这里的代码完全是用c语言写的。
Javascript实现贪吃蛇小游戏（含详细注释）
01-22
本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang=en> <...
c++经典项目贪吃蛇游戏控制台版，详细注释.zip
08-21
c++经典项目贪吃蛇游戏控制台版，详细注释。 本资源中的源码都是经过本地编译过可运行的，下载后按照文档配置好环境就可以运行。资源项目源码系统完整，内容都是经过专业老师审定过的，基本能够满足学习、使用参考...
JavaScript 网页版贪吃蛇游戏代码
10-23
JavaScript版贪吃蛇游戏，网页小游戏代码分享，这类小游戏可以很好的用JS来实现，游戏速度由快、中、慢可选，按“空格键” 开始/暂停，方向键控制蛇身运动方向，若要想研究代码原理，可关注代码中的注释，写的非常好...
java基于Swing的贪吃蛇游戏源代码＋报告
02-10
利用Swing类库，结合java语法及课程学习中出现的案例，逐步实现游戏界面显示，游戏的暂停与继续、键盘交互，难度更改等一系列功能，实现了通过键盘控制贪吃蛇移动及食物的随机显示效果，实现读取和显示最高记录。
HarmonyOS UI 开发 vp ,fp , px 以及写具体数字的 理解
小牧在一直在学习,在前进的道路上大家一起学习，进步。
06-19 3776
HarmonyOS 开发 距离和字体使用什么单位 距离使用 vp(virtual pixel) 字体大小使用 fp(font pixel) 下面
OpenHarmony 源码获取.md 开放源码，华为鸿蒙HarmonyOS 2.0来了
秋̶᭄ꦿ攻城狮࿆ྂ
09-11 6660
源码获取 OpenHarmony介绍 OpenHarmony是HarmonyOS的开源版，由华为捐赠给开放原子开源基金会（OpenAtom Foundation）开源。第一个开源版本支持在128KB~128MB设备上运行，欢迎参加开源社区一起持续演进。 代码仓库地址：https://openharmony.gitee.com 代码地址2：https://codechina.csdn.net/openharmony 源码获取概述 本文档将介绍如何获取OpenHarmony源码并说明OpenHarmony的源码
harmonyos的Js UI框架开发一个JS FA应用
漏网之鱼的博客
09-17 2746
开发一个JS FA应用 此应用相对于Hello World应用模板具备更复杂的页面布局、页面样式和页面逻辑。该页面可以通过将焦点移动到不同颜色的圆形来选择不同的食物图片，也可以进行添加到购物车操作，应用效果图如下。 图1JS FA应用效果图 构建页面布局 开发者在index.hml文件中构建页面布局。在进行代码开发之前，首先要对页面布局进行分析，将页面分解为不同的部分，用容器组件来承载。根据JS FA应用效果图，此页面一共分成三个部分：标题区、展示区和购物车区。根据此分区，可以确定根节点的..
添加购物车中的小球动画实现
weixin_44028804的博客
08-20 794
实现动画效求 1、先写好小球，确定小球的最终位置以及小球运动的轨迹，这里小球运动的轨迹是贝塞尔曲线，并且使用v-if=false将小球隐藏 html: css: 2、触发小球的状态改变，这里我使用的场景是，点击添加购物车， 然后就将小球的v-if=true，同时将此时被点击的dom元素记录。 此时小球的状态改变触发了小球过渡的动画。 3、先分析动画的beforeEnter钩子函数，这个阶段是入场前的回调 做了些什么呢？ 获取到记录被点击的元素dom,也就是此时添加购物车的“+”号 根据DOM获取
DevEco Studio 如何对代码快速注释（HarmonyOS鸿蒙开发基础知识）
iCloudEnd的博客
09-14 4634
代码快速注释 支持对选择的代码块进行快速注释，使用快捷键Ctrl+/快速进行注释。对于已注释的代码快，再次使用快捷键Ctrl+/取消注释。 更多技术交流请加入QQ群 群名称：harmonyos鸿蒙技术交流 群 号：856567895 从零开始入门学习HarmonyOS鸿蒙2.0开发 原创 HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 （教程含源码） 原创 HarmonyOS 鸿蒙开发之02开发工具安装 原创 HarmonyOS 鸿蒙入门教程之03 运行开发
HTML的文档类型与字符集＜!DOCTYPE html＞
最新发布
m0_65696193的博客
07-15 241
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
html 关闭信息窗口
cuisidong1997的博客
07-14 210
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
用python打个贪吃蛇游戏代码每行都注释
06-08
当然可以！以下是基于 Python 的贪吃蛇游戏的代码，每行都有注释： ```python # 导入必要的模块 import pygame, sys, random # 初始化pygame pygame.init() # 定义游戏窗口大小和游戏速度 window_width = 800 window_height = 600 speed = 15 # 创建游戏窗口 screen = pygame.display.set_mode((window_width, window_height)) # 设置游戏标题 pygame.display.set_caption('贪吃蛇游戏') # 定义颜色 black = pygame.Color(0, 0, 0) white = pygame.Color(255, 255, 255) red = pygame.Color(255, 0, 0) green = pygame.Color(0, 255, 0) blue = pygame.Color(0, 0, 255) # 定义蛇的初始位置和大小 snake_position = [100, 50] snake_body = [[100, 50], [90, 50], [80, 50]] # 定义食物的初始位置 food_position = [random.randrange(1, (window_width//10)) * 10, random.randrange(1, (window_height//10)) * 10] food_spawned = True # 定义蛇的初始方向 direction = 'RIGHT' change_to = direction # 定义蛇移动的函数 def move_snake(direction): if direction == 'RIGHT': snake_position[0] += 10 elif direction == 'LEFT': snake_position[0] -= 10 elif direction == 'UP': snake_position[1] -= 10 elif direction == 'DOWN': snake_position[1] += 10 # 定义游戏结束函数 def game_over(): font = pygame.font.SysFont('arial', 50) text = font.render('Game Over!', True, red) text_rect = text.get_rect() text_rect.center = (window_width/2, window_height/2) screen.blit(text, text_rect) pygame.display.flip() pygame.time.delay(2000) pygame.quit() sys.exit() # 定义游戏主循环 while True: # 事件循环，检测按键和关闭窗口事件 for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() elif event.type == pygame.KEYDOWN: if event.key == pygame.K_RIGHT: change_to = 'RIGHT' elif event.key == pygame.K_LEFT: change_to = 'LEFT' elif event.key == pygame.K_UP: change_to = 'UP' elif event.key == pygame.K_DOWN: change_to = 'DOWN' elif event.key == pygame.K_ESCAPE: pygame.event.post(pygame.event.Event(pygame.QUIT)) # 根据蛇的方向移动蛇头 move_snake(change_to) direction = change_to # 判断蛇头是否与食物位置重合 if snake_position[0] == food_position[0] and snake_position[1] == food_position[1]: food_spawned = False else: snake_body.pop() # 生成新的食物 if not food_spawned: food_position = [random.randrange(1, (window_width // 10)) * 10, random.randrange(1, (window_height // 10)) * 10] food_spawned = True # 将蛇头添加到蛇身列表中 snake_body.insert(0, list(snake_position)) # 绘制游戏界面 screen.fill(black) for position in snake_body: pygame.draw.rect(screen, green, pygame.Rect(position[0], position[1], 10, 10)) pygame.draw.rect(screen, white, pygame.Rect(food_position[0], food_position[1], 10, 10)) # 判断游戏是否结束 if snake_position[0] < 0 or snake_position[0] > window_width-10: game_over() elif snake_position[1] < 0 or snake_position[1] > window_height-10: game_over() for block in snake_body[1:]: if snake_position[0] == block[0] and snake_position[1] == block[1]: game_over() # 更新游戏界面 pygame.display.update() # 控制游戏速度 clock = pygame.time.Clock() clock.tick(speed) ``` 注：以上代码是基于 Python3 和 Pygame 模块的，如果您的 Python 版本不是 3.x，请将代码中的 print 语句改为 Python2.x 的语法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值