这是一款非常有趣的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; }} |
网盘下载密码：3eze
