0°

esp8266上的chrome离线游戏

esp8266上的chrome离线游戏

简介

游戏的原型是chrome浏览器在离线时呈现的小恐龙跳仙人掌的游戏,这个游戏有两个版本,第一个版本的恐龙,仙人掌是用循环数组逐点像素实现的,每帧显示都重新绘制一边,这种绘制的算法没有优化,因此可以看到有卡顿。

版本2中,不再使用练成表格而是使用PBM格式的图片。

在下面的项目中,将会把这两个项目都写上去,制作过程主要是版本1的,版本2相关代码也在后面。

步骤一 材料清单

esp8266上的chrome离线游戏

硬件:

  • NodeMCU(esp8266芯片、4M内存)
  • 12864 oled (ssd1306 驱动)
  • 大按键按钮 (低电平触发)
  • 杜邦线若干(母对母)

软件:

  • microPython开发软件

步骤二 V1版本制作过程

  1. 使用excel表格,绘制恐龙和仙人掌
esp8266上的chrome离线游戏

2.用1和0进行填充,保存为csv文件,并用文本编辑器打开

esp8266上的chrome离线游戏
esp8266上的chrome离线游戏

3.写到代码里

player = {}
player["x"] = 10
player["y"] = 44
player["pixel"] = [
        (0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0),
        (0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1),
        (0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1),
        (0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1),
        (0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1),
        (0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0),
        (0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0),
        (0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0),
        (1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0),
        (1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0),
        (1,1,0,0,0,0,1,1,1,1,1,1,1,1,0,1,0,0,0,0),
        (1,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0),
        (1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0),
        (0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0),
        (0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0),
        (0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0),
        (0,0,0,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0),
        (0,0,0,0,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0),
        (0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0),
        (0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0)
    ]
esp8266上的chrome离线游戏

4.循环像素,显示小恐龙:

pixels = player["pixel"]

    if(status["is_jump"]):
        player["y"]-=3if(player["y"]<15):
            status["is_jump"]=Falseelse:
        player["y"]+=3if(player["y"]>=43):
            player["y"]=43
            status["is_jumpfinish"]=True

    for i in range(0,len(pixels)):
        for ii in range(0,len(pixels[i])):
            oled.pixel(player["x"]+ii,player["y"]+i,pixels[i][ii])
esp8266上的chrome离线游戏

这里提供一个绘制好的excel文件 game.xls:

game

提取码:无,解压码:

下载

步骤三 V2版本更新说明

版本2中,不再使用练成表格而是使用PBM格式的图片。

如下所示,这是把游戏玩家的像素图读出来。

with open('player.pbm', 'rb') as f:
    f.readline() # Magic number
    f.readline() # Creator comment
    f.readline() # Dimensions
    data = bytearray(f.read())
player["buf_jump"] = framebuf.FrameBuffer(data, 20, 20

到需要绘制的时候,无需循环像素,而是使用内置的函数来绘制。

oled.blit(player["buf_jump"], player["x"], player["y"])

V2版本增加了暂停,其实这很容易,就是针对2个按钮来使用状态机:

def blue_click():if(status["is_jumpfinish"]):
        status["is_jump"]=True
        status["is_jumpfinish"]=False
    
def red_click():if(status["game"]=="ready"):
        status["game"]="playing"elif(status["game"]=="playing"):
        status["game"]="pause"elif(status["game"]=="pause"):
        status["game"]="playing"elif(status["game"]=="gameover"):
        begin()
        status["game"]="playing"

进行时的界面 :

esp8266上的chrome离线游戏

暂停时的界面 :

esp8266上的chrome离线游戏

游戏结束时的界面:

esp8266上的chrome离线游戏

步骤四 项目代码

V1和V2版本完整项目代码下载:

当前内容已被隐藏,您需要登录才能查看

步骤五 最终演示

V1版本视频演示:

V2版本视频演示:

原作者:cr4fun

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论