回到首页 返回首页
回到顶部 回到顶部
返回上一页 返回上一页

【创意】“活力无限 • 魅力上海”上海旅游地图 简单

头像 JOVI 2024.02.19 177 0

【项目介绍】

这是一个基于家乡特色的创客作品,以家乡上海为背景,通过编程的方式,用Mind+软件制作了一个图形化程序小游戏,名为“上海旅游地图”,展现了家乡上海的活力、魅力和无限的发展潜力。

 

本游戏的主要目的,是为了帮助学生了解,上海市16个区县的名称、面积大小、地理位置和景点,激发大家对上海这座城市的热爱和探索兴趣。

【项目演示】

这个游戏非常容易上手,点击开始之后,会在界面的左下角,出现一个上海某区景点的照片,并语音播放名称,游戏者需用鼠标,在界面中点击选择景点所在的区域,如果选错则继续选择,直至选择正确后,才会出现下一个景点。

 

游戏里,一共有25个有代表性的上海地域景点,若选错5次,则游戏结束,重新再来。

 

以下是整个游戏的视频演示:

【制作过程】

1.素材准备

程序的内核其实就是个拼图游戏。首先将上海地图分成16个区。

image.png

 

工作量最大的就是抠图,要抠出16张背景透明的区图,细节上也不能太差,要修得漂亮些。

image.png

 

当然也要准备一张空白地图,这个相对比较简单。

image.png

 

准备25张景点素材,按照所在区进行编号,这里为了有规律,就采用真实的行政区区号来命名。比方说,长宁区的区号是105,那么“上海动物园”和“刘海粟美术馆”就分别编号为1051和1052,而且文件名的前4位为数字编号,从第5位开始是中文的景点名称,这些设置都是为了后续编程的方便。

image.png

 

当然也要准备一些诸如“帮助”、“开始”、“游戏成功”和“游戏失败”之类的辅助素材。到此为止,素材的准备工作就基本完成了。

image.png

2.程序编写

编程的大致思路,首先是采用一个“景点列表”,将1到25的数字随机打乱顺序。这样每次从列表第1项顺序取值,就会是从1到25的数字的随机序列。

image.png

 

景点角色的造型按行政区号的顺序,分别放入25个造型。每次换景点,就可以按照“景点列表”中的取值序列,按照造型编号来找到相应的景点图片。

image.png

 

在每个区角色的程序中,通过判断此时此刻的景点角色的造型名称是否包含区号数字,来判定点击的行政区是否正确,所以之前的景点素材在景点角色里的造型名称里面包含了3位区号,3位区号相同的景点,是被划为属于同一个行政区。

screenshots-上海旅游地图.mp-1708576223040.png

 

此外,在主程序里增加了“游戏成功”和“游戏失败”的判断条件,提高了游戏的娱乐性,寓教于乐。

image.png

3.语音合成

程序虽简单,但也是要加一点亮色的。

这里用到了Mind+软件提供的百度AI语音合成技术,这里就不赘述如何实现这个功能了,论坛里有详细的教程说明。

image.png

 

因为景点造型的名称,之前已经设置好了是4位数字+景点名称,所以朗读时就取名称的第5个字符到倒数第1个字符(即最后一个字符)即可满足需求。

image.png

 

这样程序的实现效果就是,当左下角出现景点照片和名称的时候,游戏会直接播放景点名称,给游戏者更好的游戏体验。

 

最后,加上开头的帮助和结尾的成功或失败,再加一些特效功能,整个游戏编程就基本结束了。

image.png

【项目总结】

说实话,本项目小游戏的程序不算复杂,素材收集的过程稍微费些精力。

 

本项目最大的意义,还是我为家乡打CALL,一起探索家乡之美,分享家乡记忆。最近,全国人民家喻户晓的电视剧《繁花》,把上海这座大城市的美,表现的淋漓尽致。然而,让家里的小朋友把大上海的16个行政区,一一说出来说清楚,还倒是真的犯难了。

 

通过这个小游戏,小朋友可以知道我们的家乡大上海一共分为16个行政区。虽然上海比不上国内的许多历史名城,但大上海也是有很多具有特色的名胜景点。景点实在是数不胜数,碍于小游戏的性质,只能东挑西选,选了25个地方作为本项目的景点素材。

image.png

 

就拿我们的上海市长宁区来说,除了本项目小游戏里有的上海动物园、刘海粟美术馆,还有小游戏里没有的中山公园、宋庆龄陵园、儿童博物馆、上生新所、沙逊别墅、愚园路历史文化街等等,有自然风景,有历史建筑,有海派文化。

微信图片_20231101082232.jpg

Welcome to Shanghai!

我为上海打CALL!

【资源附件】

附件是源程序文件,供大家参考。

评论

user-avatar