贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作

贪吃蛇是以前我们经常在手机里玩的一个小游戏，现在要是把它搬到网页上也会让人更回味。这是一款非常有趣的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;

}

}