对上篇原生js贪吃蛇游戏的优化

一、前言

上篇:原生js贪吃蛇游戏 - 掘金 (juejin.cn)

记录:写完第一篇文章后去请教别人,询问代码有什么不足之点,弥补不足才能更好地进步!

二、可增加游戏难度

法:根据蛇的长度去改变速度。比如当蛇长度小于5,每走一格花费的时间为1000毫秒,若蛇长度大于5,则每走一格花费的时间为500毫秒。

思路:在snake.js内,定义一个数组,内为蛇每个长度会对应每个毫秒值的对象。再封装一个函数,将当前蛇的长度和数组内要求的长度进行比较,若是符合,则返回该长度应该有 的速度。最后返回process.js,修改延时器选择时间为该函数的返回值。

snake.js 复制代码
// 蛇长度和速度的一一匹配
let snakeSpeed = [{length:5, speed: 1000}, {length: 10, speed: 500}]

// 说明:根据当前蛇的长度去选择对应的速度
function updateSnakeSpeed(){
  for(let i = 0; i < snakeSpeed.length; i++) {
    if(snake.length < snakeSpeed[i].length) {
        return snakeSpeed[i].speed
    }
  }
}
process.js 复制代码
 // 该函数返回值为秒数,是校验蛇长度匹配的速度
 setTimeout(gameLoop, updateSnakeSpeed())

真的能实现!测试时为了更容易看出速度,选择了200毫秒。

还有修改了一点小注释,完整代码请看第1版本snake(firstVersion) · mini25/snake - 码云 - 开源中国 (gitee.com)

三、优化循环的效率等

1.对象数组的优化

旧版:数组内包裹着数组,用for循环去遍历该数组,内部再去每个对象的属性名,多次访问数组是没必要的,增加了代码的复杂性。

新版:for...of,直接遍历到每个对象。

好处:新版更简洁、易读。同时避免了使用索引变量i,减少了代码的复杂性。

旧版的food.js的函数 复制代码
function isSnakeBody(x, y) {
  for(let i = 0; i < snake.length; i++) {
    if(x === snake[i].x && y === snake[i].y) {
      return true // 说明是在蛇身上了
    }
  }
  return false // 说明不是在蛇身上了
}
新版后的food.js的函数 复制代码
function isSnakeBody(x, y) {
  for(let obj of snakeSpeed) {
    if(x === obj.x && y === obj.y) {
      return true  // 说明是在蛇身上了
    }
  }
  return false // 说明不是在蛇身上了
}
旧版的snake.js 复制代码
function updateSnakeSpeed(){
  for(let i = 0; i < snakeSpeed.length; i++) {
    if(snake.length < snakeSpeed[i].length) {
        return snakeSpeed[i].speed
    }
  }
}
新版的snake.js 复制代码
function updateSnakeSpeed(){
  for (const obj of snakeSpeed) {
    if(snake.length < obj.length) {
      return obj.speed
    }
  }
}

2.for访问数组长度

旧版:每次都需要重新计算蛇的长度,浪费性能。

新版:长度只需计算一次,减少了重复计算的次数,提高了代码的效率。

旧版的snake.js 复制代码
  for(let i = 1, i < snake.length; i++) 
新版的snake.js 复制代码
   for(let i = 1, len = snake.length; i < len; i++) 

这将是我的第2版本snake(secondVersion) · mini25/snake - 码云 - 开源中国 (gitee.com)

四、总结

若读者还发现有哪些不足之处,请评论区留言,我希望我又可以学习和进步啦。

相关推荐
yinuo19 分钟前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
xkxnq1 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
烛阴1 小时前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
xkxnq1 小时前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
anyup3 小时前
2026第一站:分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos
BBBBBAAAAAi3 小时前
Claude Code安装记录
开发语言·前端·javascript
xiaolyuh1233 小时前
【XXL-JOB】 GLUE模式 底层实现原理
java·开发语言·前端·python·xxl-job
源码获取_wx:Fegn08953 小时前
基于 vue智慧养老院系统
开发语言·前端·javascript·vue.js·spring boot·后端·课程设计
毕设十刻3 小时前
基于Vue的人事管理系统67zzz(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
anyup3 小时前
从赛场到产品:分享我在高德大赛现场学到的技术、产品与心得
前端·harmonyos·产品