esp8266上的chrome离线游戏

简介

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

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

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

步骤一 材料清单

硬件：

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

软件：

• microPython开发软件

步骤二 V1版本制作过程

1. 使用excel表格，绘制恐龙和仙人掌

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

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)
    ]

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])

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

步骤三 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"

进行时的界面 ：

暂停时的界面 ：

游戏结束时的界面：

步骤四 项目代码

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

步骤五 最终演示

V1版本视频演示：

V2版本视频演示：

原作者:cr4fun