Skip to content

wwz223/wwz223.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍎 基于H5实现的哆啦A梦闯关小游戏

image

游戏链接

https://wwz223.github.io/

游戏实现细节

🍔 怎么使游戏不断的运行

JS中有一个函数setInterval(function , time)可以按照指定的周期来调用函数。function代表要执行的函数,time是时间间隔,只要调用该函数重复不断的绘制游戏场景,与此同时根据情况修改相关的变量,就能够绘制出不同的游戏场景

🍔 怎么通过 canvas 来绘制游戏场景?

把游戏场景划分成了19*28的格子,每个物体的大小都是一个格子,通过物体在数组中的位置加上格子的大小可以确定物体的位置,物体的大小和格子一样大,通过物体坐标、大小和背景图片来绘制角色

🍔 地图是怎么实现的?

通过一个maps.js文件里面有一个maps数组,长度为4,代表四个关卡的地图,数组中的每个值又是一个19*28数组,通过0,1,2来绘制地图,数组中的0代表墙壁,1代表通路,2代表敌人的基地。

🍔 项目的角色绘制有什么特点?

面向对象开发,每个角色都有相对应的类,如敌人,哆啦A梦,墙壁,金币,类里面包含了这些对象的属性和行为,新建某个对象的时候只需要new一个即可。

🍔 哆啦 A 梦和敌人怎么做到动态的效果

每个角色都是由16张图片不停切换实现的动态效果,其中四个方向各四张图片,通过角色移动的方向来判断哪四张图片循环切换

🍔 碰撞怎么检测?

该游戏中每个物体都是一个矩形,所以只需要考虑两个矩形的碰撞检测,检测的原理是先找到两个矩形的中心点,即两条对角线的交点,如果两个矩形相撞,即两个矩形的中心点的横坐标只差小于两个矩形宽度相加的一半,且两个矩形的中心点的纵坐标之差小于两个矩形高度相加的一半。

🍔 游戏的逻辑是什么?

玩家操作哆啦A梦在地图中找寻开启本关大门的钥匙,钥匙被随机放在金币中与此同时要躲避敌人的追赶,每一关都有时间限制且敌人的数量是不断增加的,玩家找到钥匙,通过通道进入下一关,完成所有四个关卡则游戏成功。

🍔 游戏有什么特别之处?

为了游戏的好玩,提供了双人模式,而且两个玩家可以互相帮助,其中一个玩家被敌人触碰之后会处于自闭状态,另一个玩家靠近该玩家的同时点击空格键可以唤醒该玩家,救活机制的添加增加了游戏的乐趣。 还有一点是游戏中的钥匙是可以设置为隐藏的,这个时候钥匙会与金币没有区别,这个时候就需要玩家的运气来找到钥匙,这样设置,游戏的难度提高很多,而且增加很多不确定性。

🍔 游戏改进之处?

缺少游戏中的奖品种类,比如加速药瓶,无敌模式,干扰模式等,可以通过玩家触碰到的场景中的道具而做出不同的反应。 还可以添加通关时间的记录,并且有一个排行榜,这样,能够起到竞争的作用 跨端游戏,两个玩家通过不同的电脑登陆一起玩。 总之该项目还需要完善。

About

基于JS实现的H5闯关类小游戏

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published