玩嗨OpenHarmony：基于OpenHarmony的贪吃蛇小游戏
51cto 开源基础软件社区 #夏日挑战赛# 《openharmony基于js实现的贪吃蛇》
1. 项目简介贪吃蛇是一款非常经典的小游戏，概念起源于1976年由美国一家街机游戏blockade（参见下图），后来经过无数次迭代，在1998年，成为诺基亚手机预装的小游戏，相信也能激起很多人的回忆。这次，我将在openharmony操作系统基础上通过js来实现贪吃蛇。
最终，我必须承认，自己做的贪吃蛇，却被自己菜哭了，自己写的贪吃蛇自己都不会玩（ps:我曾经可是在不会死亡的情况下完了好长时间>_<)。实现的效果如下：
基本实现思路贪吃蛇的基本操作规则是：玩家操控一条细长的直线（俗称蛇或虫，起始可能是一个点），它会不停前进，玩家只能操控蛇的头部朝向（上下左右），蛇身体后面的部分会跟随头部移动的轨迹。头一路拾起触碰到之食物（或称作“豆”/“果”），并要避免触碰到自身或者其他障碍物（包括游戏界面的边界墙壁）。每次贪吃蛇吃掉一件食物，它的身体便增长一节。吃掉一些食物后会使蛇的移动速度逐渐加快，让游戏的难度渐渐变大。要实现以上的要求，有几个关键点需要考虑：
要有个游戏的容器空间设计定义蛇的身体
要随机生成食物
要人工控制蛇的移动
吃掉食物身体变长
撞到障碍物（包括自身）会死亡，游戏重启或结束
下面就针对以上情况来分别描述。
参数属性：
名称 类型 备注
result number 分数
conw number 容器宽度
conh number 容器高度
snakebody number 蛇身体单位
h number 网格的y长度
w number 网格的x长度
grid array 网格地图
food object 食物
timeid number 定时器id
level number 游戏难度级别
des object 蛇的四个方向
isstart boolean 判断是否开始
snake object 蛇
currdes object 当前蛇前进的方向
isendp boolean 判断游戏是否结
函数咯列表：
名称 参数 备注
init 无 初始化函数
onshow 无 框架生命周期钩子函数
isend newhead : object 判断游戏是否结束
setisend 无 设置游戏结束相关数据
randomfood 无 随机生成食物
addhead des : object 增加新头
move des : object 蛇的移动
intervalmove d ：object 蛇自动移动
iscuurdes value:object ,x1:string,x2:string 定时器id
clickbut m:object 操作蛇的移动的点击事件
reinit 无 重新开始游戏
容器初始化在onshow钩子函数那里获取到游戏容器的宽高，其实我是不想在这里获取的，但没办法，好像getboundingclientrect()需要挂载后才能拿到值，在这之前的钩子函数中都拿不到具体的属性值。
拿到容器宽高后，根据蛇的身体长度（就是每个小圆点）来确定要划分多少个格子，形成一个坐标轴，后面食物，蛇的移动都根据这坐标轴来确定。
onshow(){ // 第一次初始化
this.conh = this.$refs[con].getboundingclientrect().height ;
this.conw = this.$refs[con].getboundingclientrect().width ;
this.h = math.floor(this.conh / this.snakebody);
this.w = math.floor(this.conw / this.snakebody);
for (var i = 0; i < this.w; i++) { //绘制网格
this.grid.push([])
for (var j = 0; j {
return item.x == x && item.y == y;
})
this.food.x = x;
this.food.y = y;
if(!is) { //当食物的位置不为蛇不和蛇的位置重叠就跳出结束死循环
break;
}
}
}蛇的移动蛇的移动是通过对数组的push和shift实现，蛇有移动的方向，根据方向来修改新增蛇头的x和y的值。移动图如下：
des:{//蛇的方向
-20:{ // 向上移动一位
x:0,
y:-1,
flag: ''
},
20:{//向下
x:0,
y:1,
flag: ''
},
10:{ //右
x:1,
y:0,
flag: ''
},
-10:{ //左
x:-1,
y:0,
flag: ''
}
},
addhead(des){
//添加蛇头 des为蛇的方向，一共有四个方向上下左右，每次移动是都会传一个方向过来
const ohead = this.snake.snakepos[this.snake.snakepos.length -1];
const newhead ={
x : ohead.x + des.x,
y : ohead.y + des.y,
flag : 'h',
id : math.random()
}
this.isend(newhead);
this.snake.snakepos.push(newhead);
ohead.flag = 'b';
},
move(des){ // 蛇移动时，原头变身体，原尾巴去掉，也就是push一个头，shift一个尾巴
this.addhead(des);
this.snake.snakepos.shift();
},蛇的死亡判定当蛇头的x >= 地图的x最大值 || x = 地图的y最大值 || y = this.w || newhead.x = this.h || newhead.y { //循环查询是否撞到自己
return item.x == newhead.x && item.y == newhead.y;
})
if(is){
this.setisend(); //结束游戏
}
},
setisend(){
clearinterval(this.timeid); //清除蛇的移动定时器
this.isendp = true; //这个属性是用来是否显示游戏结果界面
}操作蛇的移动-20,20,10,-10，原本是一开用来判定是否当前移动的方向是否和原来的方向冲突，后来发现还是用坐标轴香，也就懒得改了。
intervalmove(d){ // 自动跑
if(!this.isstart) return;//判定是否开始
clearinterval(this.timeid); //清除以前的定时时器
this.timeid = setinterval(()=>{
const head = this.snake.snakepos[this.snake.snakepos.length - 1];
this.move(d);
if(this.snakebody * head.x == this.food.x && this.food.y == this.snakebody * head.y ){ //蛇吃到食物
this.addhead(d); //新增蛇头，这个不去除尾巴
this.randomfood(); //再次重新生成食物
this.result++; //分数
}
},1000/this.level); //this.level级别，决定蛇移动的速度
},
iscuurdes(value = '',x1,x2){
// 判断当前蛇的方向,x1 为新方向，x2为以前的方向，主要是判断点击的按钮是否左右，上下冲突
if((+x1 + +x2) == 0 ) return false; //这里+x1，+x2 是用来把字符串转成数字
if(this.isendp) return;//当游戏结束无法再修改方向
this.currdes = value; //存下方向
return true;
},
clickbut(m){// 点击按钮
const value = m.target.dataset.value;
switch(value){
case -20:{ //上
//判断方向是否相反，如果相反则不切换方向
this.iscuurdes(this.des[value],this.des[value].y,this.currdes.y)
&& this.intervalmove(this.des[value]);
break;
}
case 20:{// 下
this.iscuurdes(this.des[value],this.des[value].y,this.currdes.y)
&& this.intervalmove(this.des[value]);
break;
}
case -10:{ //左
this.iscuurdes(this.des[value],this.des[value].x,this.currdes.x)
&& this.intervalmove(this.des[value]);
break;
}
case 10:{ // 右
this.iscuurdes(this.des[value],this.des[value].x,this.currdes.x)
&& this.intervalmove(this.des[value]);
break;
}
case 1: { //开始或暂停
if(this.isendp) return
this.isstart = !this.isstart;
if(this.isstart && !this.isendp){
this.intervalmove(this.currdes);
}else{
clearinterval(this.timeid);
}
break;
}
}
} 本文完写在最后我们最近正带着大家玩嗨openharmony。如果你有好玩的东东，欢迎投稿，让我们一起嗨起来！有点子，有想法，有demo，立刻联系我们：合作邮箱：zzliang@atomsource.org
原文标题：玩嗨openharmony：基于openharmony的贪吃蛇小游戏
文章出处：【微信公众号：开源技术服务中心】欢迎添加关注！文章转载请注明出处。
使用非原装充电器，是否会对手机造成损害？
三星滑屏新机发布，小米8青春版历史最低价
ANSYS在航空航天器电子产品中的应用解析
使用FPGA实现低成本汽车多总线桥接
全国第一辆自动驾驶出租车在广州运营 百度联合红旗发布L4无人车
玩嗨OpenHarmony：基于OpenHarmony的贪吃蛇小游戏
TensorFlow 2.0有什么样的新功能
家庭防盗报警器电路
汽车厂商计划将AR带到汽车挡风玻璃上
什么是电容器以及有哪些不同类型？
大尺寸电缆非接触在线测径仪
绝缘子故障检测仪的功能特点及技术参数
LED电子屏有多少种信号？
国产特斯拉的雷达传感器
详细解说pcb板表面绝缘层
Wi-Fi 6增强版厉害在什么地方
华为路由A2到底怎么样
iPhone8发布时间确定:发布会倒计时,iPhone8除了全面屏,还有这些功能值得期待
证监会同意龙图光罩科创板IPO注册申请
四川大学制造学院与中科视拓共同打造成立人工智能联合实训基地
1. 项目简介贪吃蛇是一款非常经典的小游戏，概念起源于1976年由美国一家街机游戏blockade（参见下图），后来经过无数次迭代，在1998年，成为诺基亚手机预装的小游戏，相信也能激起很多人的回忆。这次，我将在openharmony操作系统基础上通过js来实现贪吃蛇。
最终，我必须承认，自己做的贪吃蛇，却被自己菜哭了，自己写的贪吃蛇自己都不会玩（ps:我曾经可是在不会死亡的情况下完了好长时间>_<)。实现的效果如下：
基本实现思路贪吃蛇的基本操作规则是：玩家操控一条细长的直线（俗称蛇或虫，起始可能是一个点），它会不停前进，玩家只能操控蛇的头部朝向（上下左右），蛇身体后面的部分会跟随头部移动的轨迹。头一路拾起触碰到之食物（或称作“豆”/“果”），并要避免触碰到自身或者其他障碍物（包括游戏界面的边界墙壁）。每次贪吃蛇吃掉一件食物，它的身体便增长一节。吃掉一些食物后会使蛇的移动速度逐渐加快，让游戏的难度渐渐变大。要实现以上的要求，有几个关键点需要考虑：
要有个游戏的容器空间设计定义蛇的身体
要随机生成食物
要人工控制蛇的移动
吃掉食物身体变长
撞到障碍物（包括自身）会死亡，游戏重启或结束
下面就针对以上情况来分别描述。
参数属性：
名称 类型 备注
result number 分数
conw number 容器宽度
conh number 容器高度
snakebody number 蛇身体单位
h number 网格的y长度
w number 网格的x长度
grid array 网格地图
food object 食物
timeid number 定时器id
level number 游戏难度级别
des object 蛇的四个方向
isstart boolean 判断是否开始
snake object 蛇
currdes object 当前蛇前进的方向
isendp boolean 判断游戏是否结
函数咯列表：
名称 参数 备注
init 无 初始化函数
onshow 无 框架生命周期钩子函数
isend newhead : object 判断游戏是否结束
setisend 无 设置游戏结束相关数据
randomfood 无 随机生成食物
addhead des : object 增加新头
move des : object 蛇的移动
intervalmove d ：object 蛇自动移动
iscuurdes value:object ,x1:string,x2:string 定时器id
clickbut m:object 操作蛇的移动的点击事件
reinit 无 重新开始游戏
容器初始化在onshow钩子函数那里获取到游戏容器的宽高，其实我是不想在这里获取的，但没办法，好像getboundingclientrect()需要挂载后才能拿到值，在这之前的钩子函数中都拿不到具体的属性值。
拿到容器宽高后，根据蛇的身体长度（就是每个小圆点）来确定要划分多少个格子，形成一个坐标轴，后面食物，蛇的移动都根据这坐标轴来确定。
onshow(){ // 第一次初始化
this.conh = this.$refs[con].getboundingclientrect().height ;
this.conw = this.$refs[con].getboundingclientrect().width ;
this.h = math.floor(this.conh / this.snakebody);
this.w = math.floor(this.conw / this.snakebody);
for (var i = 0; i < this.w; i++) { //绘制网格
this.grid.push([])
for (var j = 0; j {
return item.x == x && item.y == y;
})
this.food.x = x;
this.food.y = y;
if(!is) { //当食物的位置不为蛇不和蛇的位置重叠就跳出结束死循环
break;
}
}
}蛇的移动蛇的移动是通过对数组的push和shift实现，蛇有移动的方向，根据方向来修改新增蛇头的x和y的值。移动图如下：
des:{//蛇的方向
-20:{ // 向上移动一位
x:0,
y:-1,
flag: ''
},
20:{//向下
x:0,
y:1,
flag: ''
},
10:{ //右
x:1,
y:0,
flag: ''
},
-10:{ //左
x:-1,
y:0,
flag: ''
}
},
addhead(des){
//添加蛇头 des为蛇的方向，一共有四个方向上下左右，每次移动是都会传一个方向过来
const ohead = this.snake.snakepos[this.snake.snakepos.length -1];
const newhead ={
x : ohead.x + des.x,
y : ohead.y + des.y,
flag : 'h',
id : math.random()
}
this.isend(newhead);
this.snake.snakepos.push(newhead);
ohead.flag = 'b';
},
move(des){ // 蛇移动时，原头变身体，原尾巴去掉，也就是push一个头，shift一个尾巴
this.addhead(des);
this.snake.snakepos.shift();
},蛇的死亡判定当蛇头的x >= 地图的x最大值 || x = 地图的y最大值 || y = this.w || newhead.x = this.h || newhead.y { //循环查询是否撞到自己
return item.x == newhead.x && item.y == newhead.y;
})
if(is){
this.setisend(); //结束游戏
}
},
setisend(){
clearinterval(this.timeid); //清除蛇的移动定时器
this.isendp = true; //这个属性是用来是否显示游戏结果界面
}操作蛇的移动-20,20,10,-10，原本是一开用来判定是否当前移动的方向是否和原来的方向冲突，后来发现还是用坐标轴香，也就懒得改了。
intervalmove(d){ // 自动跑
if(!this.isstart) return;//判定是否开始
clearinterval(this.timeid); //清除以前的定时时器
this.timeid = setinterval(()=>{
const head = this.snake.snakepos[this.snake.snakepos.length - 1];
this.move(d);
if(this.snakebody * head.x == this.food.x && this.food.y == this.snakebody * head.y ){ //蛇吃到食物
this.addhead(d); //新增蛇头，这个不去除尾巴
this.randomfood(); //再次重新生成食物
this.result++; //分数
}
},1000/this.level); //this.level级别，决定蛇移动的速度
},
iscuurdes(value = '',x1,x2){
// 判断当前蛇的方向,x1 为新方向，x2为以前的方向，主要是判断点击的按钮是否左右，上下冲突
if((+x1 + +x2) == 0 ) return false; //这里+x1，+x2 是用来把字符串转成数字
if(this.isendp) return;//当游戏结束无法再修改方向
this.currdes = value; //存下方向
return true;
},
clickbut(m){// 点击按钮
const value = m.target.dataset.value;
switch(value){
case -20:{ //上
//判断方向是否相反，如果相反则不切换方向
this.iscuurdes(this.des[value],this.des[value].y,this.currdes.y)
&& this.intervalmove(this.des[value]);
break;
}
case 20:{// 下
this.iscuurdes(this.des[value],this.des[value].y,this.currdes.y)
&& this.intervalmove(this.des[value]);
break;
}
case -10:{ //左
this.iscuurdes(this.des[value],this.des[value].x,this.currdes.x)
&& this.intervalmove(this.des[value]);
break;
}
case 10:{ // 右
this.iscuurdes(this.des[value],this.des[value].x,this.currdes.x)
&& this.intervalmove(this.des[value]);
break;
}
case 1: { //开始或暂停
if(this.isendp) return
this.isstart = !this.isstart;
if(this.isstart && !this.isendp){
this.intervalmove(this.currdes);
}else{
clearinterval(this.timeid);
}
break;
}
}
} 本文完写在最后我们最近正带着大家玩嗨openharmony。如果你有好玩的东东，欢迎投稿，让我们一起嗨起来！有点子，有想法，有demo，立刻联系我们：合作邮箱：zzliang@atomsource.org
原文标题：玩嗨openharmony：基于openharmony的贪吃蛇小游戏
文章出处：【微信公众号：开源技术服务中心】欢迎添加关注！文章转载请注明出处。
使用非原装充电器，是否会对手机造成损害？
三星滑屏新机发布，小米8青春版历史最低价
ANSYS在航空航天器电子产品中的应用解析
使用FPGA实现低成本汽车多总线桥接
全国第一辆自动驾驶出租车在广州运营 百度联合红旗发布L4无人车
玩嗨OpenHarmony：基于OpenHarmony的贪吃蛇小游戏
TensorFlow 2.0有什么样的新功能
家庭防盗报警器电路
汽车厂商计划将AR带到汽车挡风玻璃上
什么是电容器以及有哪些不同类型？
大尺寸电缆非接触在线测径仪
绝缘子故障检测仪的功能特点及技术参数
LED电子屏有多少种信号？
国产特斯拉的雷达传感器
详细解说pcb板表面绝缘层
Wi-Fi 6增强版厉害在什么地方
华为路由A2到底怎么样
iPhone8发布时间确定:发布会倒计时,iPhone8除了全面屏,还有这些功能值得期待
证监会同意龙图光罩科创板IPO注册申请
四川大学制造学院与中科视拓共同打造成立人工智能联合实训基地