转载

HTML5响应式网页贪吃蛇小游戏

简要教程 这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中，你可以使用键盘的上下左右方向键来控制贪吃蛇的运动方向，屏幕中会随机出现一个绿色的食物，你的任务就是控制蛇去吃这个食物。

HTML5响应式网页贪吃蛇小游戏

查看演示     下载插件

制作方法

HTML5响应式网页贪吃蛇小游戏

贪吃蛇游戏是经典手机游戏，既简单又耐玩。通过控制蛇头方向吃食物，使得蛇变长，从而获得积分。这个贪吃蛇游戏的游戏布局和蛇的控制操作等均是在js文件中完成的。在CSS文件中仅是给贪吃蛇和网格布局一些基本样式。其中游戏中网格布局的样式如下：
  1. .tile {
  2.   background: rgba(0, 0, 0, 0.15);
  3.   position: absolute;
  4.   -webkit-transition-property:
  5.     background,
  6.     box-shadow,
  7.     opacity,
  8.     -webkit-transform;
  9.   transition-property:
  10.     background,
  11.     box-shadow,
  12.     opacity,
  13.     transform;
  14.   -webkit-transform: translateZ(0);
  15.           transform: translateZ(0);
  16.   -webkit-transition-duration: 3000ms;
  17.           transition-duration: 3000ms;
  18. }
  20. .tile:before {
  21.   bottom: 0;
  22.   content: '';
  23.   height: 0;
  24.   left: 0;
  25.   margin: auto;
  26.   opacity: 0;
  27.   position: absolute;
  28.   right: 0;
  29.   top: 0;
  30.   width: 0;
  31.   -webkit-transition: opacity 300ms;
  32.           transition: opacity 300ms;
  33. }
  35. .tile.path:before {
  36.   opacity: 1;
  37. }
  39. .tile.up:before {
  40.   border-bottom: 4px inset rgba(255, 255, 255, 0.15);
  41.   border-left: 4px solid transparent;
  42.   border-right: 4px solid transparent;
  43. }
  45. .tile.down:before {
  46.   border-top: 4px inset rgba(255, 255, 255, 0.15);
  47.   border-left: 4px solid transparent;
  48.   border-right: 4px solid transparent;
  49. }
  51. .tile.left:before {
  52.   border-right: 4px inset rgba(255, 255, 255, 0.15);
  53.   border-top: 4px solid transparent;
  54.   border-bottom: 4px solid transparent;
  55. }
  57. .tile.right:before {
  58.   border-left: 4px inset rgba(255, 255, 255, 0.15);
  59.   border-top: 4px solid transparent;
  60.   border-bottom: 4px solid transparent;
  61. }               
复制代码
整个游戏是一个响应式布局，它通过CSS媒体查询来实现不同屏幕尺寸下的不同游戏布局大小。
  1. @media (max-width: 900px), (max-height: 900px) {
  2.   .tile.up:before,
  3.   .tile.down:before,
  4.   .tile.left:before,
  5.   .tile.right:before {
  6.     border-width: 3px;
  7.   }
  8. }
  10. @media (max-width: 500px), (max-height: 500px) {
  11.   .tile.up:before,
  12.   .tile.down:before,
  13.   .tile.left:before,
  14.   .tile.right:before {
  15.     border-width: 2px;
  16.   }
  17. }            
复制代码
具体的js代码请参考下载文件。 本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/html5/html5youxi/201507092197.html
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：658 人
  • 运行天数：4,439天
  • 最后更新：2024年12月22日23点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG