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

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

制作方法

贪吃蛇游戏是经典手机游戏，既简单又耐玩。通过控制蛇头方向吃食物，使得蛇变长，从而获得积分。这个贪吃蛇游戏的游戏布局和蛇的控制操作等均是在js文件中完成的。在CSS文件中仅是给贪吃蛇和网格布局一些基本样式。其中游戏中网格布局的样式如下：

.tile {
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  -webkit-transition-property:
    background,
    box-shadow,
    opacity,
    -webkit-transform;
  transition-property:
    background,
    box-shadow,
    opacity,
    transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition-duration: 3000ms;
          transition-duration: 3000ms;
}

.tile:before {
  bottom: 0;
  content: '';
  height: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  -webkit-transition: opacity 300ms;
          transition: opacity 300ms;
}

.tile.path:before {
  opacity: 1;
}

.tile.up:before {
  border-bottom: 4px inset rgba(255, 255, 255, 0.15);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.tile.down:before {
  border-top: 4px inset rgba(255, 255, 255, 0.15);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.tile.left:before { 
  border-right: 4px inset rgba(255, 255, 255, 0.15);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.tile.right:before { 
  border-left: 4px inset rgba(255, 255, 255, 0.15);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}               
              

整个游戏是一个响应式布局，它通过CSS媒体查询来实现不同屏幕尺寸下的不同游戏布局大小。

@media (max-width: 900px), (max-height: 900px) {
  .tile.up:before,
  .tile.down:before,
  .tile.left:before,
  .tile.right:before {
    border-width: 3px;
  }
}

@media (max-width: 500px), (max-height: 500px) {
  .tile.up:before,
  .tile.down:before,
  .tile.left:before,
  .tile.right:before {
    border-width: 2px;
  }
}                
              

具体的js代码请参考下载文件。