人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件,下面分享一波源代码,可直接在手机上打开,进入手机浏览器,就能够high起来了。


分享一波关于H5的小游戏

1:飞翔的小鸟

以前用unity3D写过类似于这款小游戏,现在看完这个,是一款基于jQuery+CSS3实现的小鸟飞翔动画特效源码,效果很好,流畅也不卡顿,适配于各种主流浏览器。


2:锅打灰太狼

用js做过打地鼠游戏的童鞋们都知道,其实是一个原理,设置随机数和定时器,功能也特别简单得分统计,计算成功率,灰太狼图片的隐藏、显示,判断是否点中灰太狼,最终结果显示,错误提示


3:天天爱消除

这款游戏曾经风靡一时,大学室友们都在玩这个游戏,想必应该是有过人之处吧,移动端和pc端都支持的,运用到touch事件和鼠标事件等。


4:贪吃蛇

外观比较简陋,需要在UI上加以完善。具体功能很简单,用队列模拟蛇身,来控制蛇头的方向,设置蛇身的宽度,设置食物的x坐标,设置食物的y坐标,设置蛇头的x坐标,设置蛇头的y坐标,设置画布的高度,设置画布的宽度,设置蛇的速度,设置计算玩家分数等等。


5:消消乐小游戏


文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程:https://www.jianshu.com/p/e8197d4d9880


领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!

几款用jQuery写的h5小游戏的更多相关文章

  1. 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

    本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...

  2. 从零开始开发一款H5小游戏(三) 攻守阵营,赋予粒子新的生命

    本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canv ...

  3. Egret白鹭H5小游戏开发入门(二)

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  4. Egret白鹭H5小游戏开发入门(三)

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  5. Egret白鹭H5小游戏开发入门(一)

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  6. 青瓷qici - H5小游戏 抽奖机 “one-arm bandit”

    写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个 ...

  7. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

  8. “倔驴”一个h5小游戏的实现和思考(码易直播)——总结与整理

    3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...

  9. 浅试 Webview 一app 加载 H5小游戏

    整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...

随机推荐

  1. vue+mui+html5+ plus开发的混合应用底部导航的显示与隐藏

    1. 模板相关内容(template) <template> <div> <transition :name="transitionName"> ...

  2. 使用PHP中的curl发送请求

    使用CURL发送请求的基本流程 使用CURL的PHP扩展完成一个HTTP请求的发送一般有以下几个步骤: 初始化连接句柄: 设置CURL选项: 执行并获取结果: 释放VURL连接句柄. 下面的程序片段是 ...

  3. hdu5308 I Wanna Become A 24-Point Master(构造)

    题目:pid=5308" target="_blank">http://acm.hdu.edu.cn/showproblem.php? pid=5308 题意:给定 ...

  4. 车牌识别--S5PV210測试第二次优化

    优化: 1.RGB转HSV 浮点运算改成定点运算: 2.匹配模板由图片改成C语言数组: 3.优化測试BMP车牌图片读取(两层for循环改为一层for循环). 总体相比优化之前时间降低110ms左右. ...

  5. JavaScript中的*top、*left、*width、*Height具体解释

    来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...

  6. 漫话C++之string字符串类的使用(有汇编分析)

    C++中并不提倡继续使用C风格的字符串,而是为字符串定义了专门的类,名为string. 使用前的准备工作 在使用string类型时,需要包含string头文件,且string位于std命名空间内: # ...

  7. Linux下的led驱动程序,ok6410

    本程序採用动态映射的方法控制led.硬件平台为飞凌的ok6410 led.h:定义控制命令 #ifndef _LED_H #define _LED_H #define LED_MAGIC 'M' #d ...

  8. gridView -item 大小调节(dimen-代码引用)

    今天在修改一个gridview的时候,发现里面的内容并不会自动适应,填满整个gridview,而是会产生滑动,尝试了很多的方法,包括在item文件中设定width和height,结果,宽度可调,高度却 ...

  9. Vue Invalid handler for event "": got undefined

    原因:绑定的方法不是放在methods:{}里.比如我把绑定的函数写在了computed:{}里就会报这个错.

  10. SQL分页的几种方式

    1.使用Row_number() over(order by columnName)函数来作为标示分页(下面的例子都是以last_seen来排序的,要求取顺序为20-30行的数据) SELECT Us ...