• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5边玩边学(十)-俄罗斯方块之控制界面篇(源码)

HTML5边玩边学(十)-俄罗斯方块之控制界面篇(源码)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,俄罗斯方块,控制界面等相关知识,匿名希望在学习及工作中可以帮助到您
本来想写几句的,但是看到前面一篇的反映不是很理想,所以也没动力了,原计划下面还想写个“贪吃蛇”的,看看再说吧,直接上源代码。

这一次在上一篇程序的基础上增加了以下功能:

1、键盘控制

2、开始、暂停

3、消除时候空行的停顿效果

4、随着消除行数的增多,速度加快

5、音效

等等。

代码里的注释已经很详细了,上一篇中模型的代码基本上没改动,只是增加了控制和图形的代码,自己感觉写的还是比较有条理的。

提示:本文中的俄罗斯方块游戏需要 Chrome 浏览器才能得到最好的运行效果,Firefox 浏览器也可以运行,但是没有声音效果。

后面罗嗦两句,愿意看的就看看。

这一部分代码主要由两个定时器组成。

第一个定时器每间隔一段时间就产生一个 TickMessage 消息,对这个消息的处理就是使方块下落,下落后每消去一次,触发的速度就更快一点。

第二个定时器是消息循环,他尽可能快的循环,所以时间间隔设置为0。

因为整个游戏的模型部分和控制部分会产生很多的事件,谁也不知道用户什么时候按下按键,所以这里维护了一个消息队列。

一旦有新的情况产生,就在消息队列里面添加上一条对应的消息,而消息循环不停的从里面取出消息,只要有就取出一条,并处理它。

图形部分,重点是要把七种颜色的小方块事先绘制好,并缓存起来,后面需要的时候直接使用。否则临时绘制的话,随着方块的增多,程序会出现卡死现象。

以上就是HTML5边玩边学(十)-俄罗斯方块之控制界面篇(源码)的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5版径向渐变梯度色彩
  • 2017-08-06用canvas实现图片滤镜效果附演示
  • 2018-12-03html5自定义遮罩的实现代码分享
  • 2018-12-035个你不知道的HTML5的接口介绍_html5教程技巧
  • 2018-12-03HTML5视频播放器<video>和音频播放器<audio>用法
  • 2017-08-06HTML5重塑Web世界它将如何改变互联网
  • 2018-12-03如何解决IE8下不兼容rgba()的问题
  • 2018-12-03怎么评价国产框架MUI跟ReactNative的对比帖?
  • 2018-12-03jquery 新建的元素事件绑定问题
  • 2018-12-03HTML5通过调用canvas对象的getContext()方法来获取绘图环境_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)
    • HTML5 canvas画布详解(六)
    • 利用JS实现点击按钮后图片自动切换的简单方法
    • 使用HTML5捕捉音频与视频信息概述及实例
    • 如何去设计一个自适应的网页设计或HTMl5
    • HTML5 css3:3D旋转木马效果相册
    • HTML5/CSS3专题 3D展示商品信息的经典案例
    • 如何理解扎克伯格说「Facebook 最大错误是在 HTML5 上押注过大,在移动平台上浪费两年时间」?
    • 如何利用input事件来监听移动端的输入_html5教程技巧
    • 基于HTML5 Canvas:字符串,路径,背景,图片的详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有