贪吃蛇是以前我们经常在手机里玩的一个小游戏，现在要是把它搬到网页上也会让人更回味。这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中你可以使用键盘的上下左右来控制蛇的运动方向。现在要列出的是贪吃蛇的制作方法。enjoy！
查看演示下载插件
.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;
}
}
