【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

JS与HTML、CSS实现2048小游戏(一)

放大字体  缩小字体 发布日期:2020-06-26 07:40:11    浏览次数:8
导读

  weixin_43601905:[reply]weixin_44593822[/reply]真的真的只会算法题啦,比如我啥都不会,例如html学了跟没学一样,java提前自学一星期(然后课就没听过,逃去练题目了),直接期末考试还高分通过了,不过现在忘了一些语法QvQ(现在是肯定没有同学们(java党)辣么厉害了),考试的题目是编程题考你实现一些算法,这不是

  weixin_43601905:[reply]weixin_44593822[/reply]真的真的只会算法题啦,比如我啥都不会,例如html学了跟没学一样,java提前自学一星期(然后课就没听过,逃去练题目了),直接期末考试还高分通过了,不过现在忘了一些语法QvQ(现在是肯定没有同学们(java党)辣么厉害了),考试的题目是编程题考你实现一些算法,这不是小CASE吗。acm训练的就是思维。起码学数学,计算机系统基础轻松多了(然而这些是大把人挂科的),还有就是考研复试机试(难度应该没有acm的难度那么大)的时候可以轻松过了吧。(有一次聊到OJ,有个大四考研复试学姐拿个她没有AC压轴题(机试题)给我做,我乍一看是傻逼题,于是20分钟就码完了)

  这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整理了一下,拿来试试水。

  我们学校的课程安排在大一的时候只学习了html,所以当时做这个项目的时候我通过自学来实现的。因此在学习之前,你需要做一些准备,了解一下html、css、Javascript的基本语法。前两项算是比较简单,依靠大一时期课本便足够了,最主要的则是Javascript。这一项大家可以找到一本Javascript的书进行学习。我当时使用的是《21学通Javascript》,觉得上面的讲解比较基础,适合初学者快速入门。

  首先,最为基础的写网站的工具是记事本,只需要写完之后把后缀名txt改为html便可以直接访问写好的html网站。

  其次就是入门比较常用的adobe公司出品的Dreamweaver,同样是这个公司出品的还有Photoshop(PS)、Premiere(Pr)、Flash等等,这个编译器几乎可以写网站涉及到的大多数功能,不过相对来说他的内置预览功能比较令人头疼。

  最后则是我使用的编译器——jetbrains公司出品的webstorm,这个编译器我觉得比较清晰明了,而且对于设置的颜色的16位编码会有一个比较清晰的预览功能。因为我经常会使用同样是jetbrains公司出品的IDEA(JAVA)、pycharm(python)、clion(c++)的编译器,所以我比较喜欢同样这个公司出品的软件的风格。不过就是这个软件的破解码不太好找,大家可以通过自己学校edu结尾的邮箱申请一个学生认证账号,可以免费使用这个公司的大多数产品。

  Jquery -1.11.0.js:网络上下载的Javascript的代码库,减少游戏中手写JS的代码量(有直接可以调用的就直接用就好了)

  上图便是游戏的主要框架,为了让代码更为清晰,我将这个页面分为了两个部分,前三块标题、按钮、计分器,我将其放入header中作为页面的头部,操作界面则由单独的DIV构成。因为主要实现游戏的逻辑语言是Javascript,在其中一些需要链接的地方便要用id来进行命名。而游戏更新按钮,再点击时需要重置游戏,便引用javascript:newgame()方法,具体的方法内容则在.js后缀的文件中编写。

  头部位置设置好了,再来看操作界面。这个界面是由四行四列的方格组成,最外侧还有一个大方格,便用17个div来定义这一区域。而在命名小格子的名称时使用的数字时0-0,是因为计算机在一般情况下都是从0开始计数的,比如:数组,这样命名符合计算机规则。

  大致的页面设置完了,就要设置CSS样式,先是将整个界面居中,调整字体大小,再设置操作界面中各个div的间隔,大小与宽度,鉴于这些内容比较基础,我就不一一描述了,大家可以参照以下代码进行调整。建议大家先自己尝试着编写这部分代码,等编写完之后在来对照我的代码,如果有问题欢迎大家指正交流。

  这样构建完页面会出现只显示一个格子的状况,后续的JS程序会调整成刚开始预览的16格的状况。而使用JS来初始化是为了方便在编写其他函数时方便调用每个方块的信息。

  (二)前篇链接游戏主逻辑——更新游戏newgame方法1、 初始化棋盘格init()方法2、 数字格初始化前篇链接游戏主逻辑——更新游戏newgame方法在前面的文章中,已经带大家做好了2048的基本

  这个游戏。首先,咱们来编写newgame()方法用于开始新游戏。因为这个是引用在主页面中的逻辑,所以咱们......

  (三)前篇链接随机数生成方法——generateoneNumber()1、 初始化棋盘格init()方法2、 数字格初始化前篇链接

  (二)随机数生成方法——generateoneNumber()在前面的文章中数字格和棋盘格已经初始化完成,init()初始化的步骤差不......

  比赛分享——蓝桥杯比赛介绍比赛注意事项1、比赛项目2、开发环境赛前练习1、基础准备2、练习平台3、学习论坛4、真题总结比赛介绍相信大家或多或少都听说过“蓝桥杯”这个比赛,这是一个为推动软件开发技术的发展,促进软件专业技术人才培养,向软件行业输送具有创新能力和实践能力的高端人才,提升高校毕业生的就业竞争力,全面推动行业发展及人才培养进程,由工业和信息化部人才交流中心特举办的“全国软件专业人才设计......

  最近公司想上线一个打地鼠游戏,我被安排到了写页面,网上找了很多demo,发现不是太简单就是写的根本看不懂,于是下定决心自己写了一个demo,真正

  该功能的代码并不多,也就一两百行代码,下面我附上游戏的图1.进入界面2.规则3.游戏页面4.失败页面5.游戏页面6.挑战成功7.下载链接

 
关键词: css小游戏
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-322858.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4