转载

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折
说给你听

本文目录
随机标签
书籍教程
Java入门教程 bootstrap3 CSS springboot-demo Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 Struts2教程 MongoDB教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 SpringCloud ANTLR教程 Hive教程 java实例教程 Ant教程 Hazelcast教程 Elastic-Job-Lite XStream教程 深入浅出MyBatis SVN教程 ibaties教程 rabittmq教程 WebService CXF学习 Hadoop教程 solr教程 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Boot集成Spring AI实现快速接入openAI
  2. 2 Spring Boot集成Spring Session快速入门Demo
  3. 3 Spring Boot集成RabbitMQ快速入门Demo
  4. 4 Spring Boot集成Quartz快速入门Demo
  5. 5 Spring Boot集成Mybatis Plus快速入门Demo
  6. 6 Spring Boot集成zipkin快速入门Demo
  7. 7 能用365块大洋去解决的事，千万不要用时间
  8. 8 Spring Boot集成atomikos快速入门Demo
  9. 9 Spring Boot集成fastdfs快速入门Demo
  10. 10 Spring Boot集成Https快速入门Demo
网站信息
  • 文章总数：155,466 篇
  • 文件总数：468,744 个
  • 标签总数：2,268 个
  • 分类总数：90 个
  • 留言数量：2,542 条
  • 在线人数：693 人
  • 运行天数：4,197天
  • 最后更新：2024年04月24日16点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG