一个有趣的前端小项目----新手练手小游戏

    对于学前端的小伙伴们来说,最难的应该就是Javascript的理解与运用了,很重要,很有用,也很难真的掌握,但是对于这种难啃的骨头,多去啃一啃的话还是很有意思的~~不好意思,一不小心暴露了我吃货的本质,今天给大家分享的是一个小游戏,之前有在github上看见有大神做过一个类似的游戏,然后自己就花了一天的时间写了这个小游戏,废话不多说,先给大家看一下这个游戏的效果图:


1、大家看到的实在点击开始游戏后,会随机生成不同的水果,这个是将图片放在一个数组里面的,然后获取随机的图片就行

2、在点击图片之后,图片会左右晃动一下,然后变成衰的表情,这个不设置的话也挺好的

3、接下来给大家展示一下未点中的效果:


4、当未点击中图片的时候,图片会掉落下去,分数会扣一分,屏幕会震动一下,这个效果是参考了大神的,毕竟这个游戏很单一,这个效果会比较明显。

5、接下来给大家介绍一个封装好的js-----简易运动框架,这个很适合用来做这些简单的运动动画,这个小游戏就是我直接在网上找到的这个框架,然后直接调用的,封装不易,膜拜大佬,请大佬收下我的膝盖~


6、代码部分:

6.1大神做的:(此处表白大神死循环),但这个小游戏只用到了前三个封装的,hide和out没有用上

由于封装格式有问题,不能直接放上来,我就截图给大家看,大家可以看一下这个js下载网址:网址http://www.mamicode.com/info-detail-1612909.html 



  • 35
    点赞
  • 167
    收藏
    觉得还不错? 一键收藏
  • 46
    评论
评论 46
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值