贪食蛇php,贪吃蛇网页小游戏的代码

贪吃蛇网页小游戏的代码

::selection {

color:#FFFFFF;

background:transparent;

}

::-moz-selection {

color:#FFFFFF;

background:transparent;

}

* {

margin:0;

padding:0;

font-family:"VT323";

}

body {

background-color:#000000;

}

.wrap {

margin-left:auto;

margin-right:auto;

}

header {

width:340px;

font-size:0;

}

canvas {

display:none;

border-style:solid;

border-width:10px;

border-color:#FFFFFF;

}

canvas:focus {

outline:none;

}

/* Top Styles */

h1 {

display:inline-block;

width:100px;

font-size:32px;

color:#FFFFFF;

}

.score {

display:inline-block;

width:240px;

font-size:20px;

color:#FFFFFF;

text-align:right;

}

.score_value {

font-size:inherit;

}

/* All screens style */

#gameover a,#setting a,#menu a {

display:block;

}

#gameover a,#setting a:hover,#menu a:hover {

cursor:pointer;

}

#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {

content:">";

margin-right:10px;

}

/* Menu Screen Style */

#menu {

display:block;

width:340px;

padding-top:95px;

padding-bottom:95px;

font-size:40px;

margin-left:auto;

margin-right:auto;

text-align:center;

color:#FFF;

}

#menu h2 {

-webkit-animation:logo-ani 1000ms linear infinite;

animation:logo-ani 1000ms linear infinite;

margin-bottom:30px;

}

#menu a {

font-size:30px;

}

@-webkit-keyframes logo-ani {

50% {

-webkit-transform:scale(1.3,1.3);

}

100% {

-webkit-transform:scale(1.0,1.0);

}

}@keyframes logo-ani {

50% {

transform:scale(1.3,1.3);

}

100% {

transform:scale(1.0,1.0);

}

}/* Game Over Screen Style */

#gameover {

display:none;

width:340px;

padding-top:95px;

padding-bottom:95px;

margin-left:auto;

margin-right:auto;

text-align:center;

font-size:30px;

color:#FFF;

}

#gameover p {

margin-top:25px;

font-size:20px;

}

/* Settings Screen Style */

#setting {

display:none;

width:340px;

margin-left:auto;

margin-right:auto;

padding-top:85px;

padding-bottom:85px;

font-size:30px;

color:#FFF;

text-align:center;

}

#setting h2 {

margin-bottom:15px;

}

#setting p {

margin-top:10px;

}

#setting input {

display:none;

}

#setting label {

cursor:pointer;

}

#setting input:checked + label {

background-color:#FFF;

color:#000;

}

Snake

Score: 0

Game Over

press space to begin a

new game

settings

Settings

new game

Speed:

Slow

Normal

Fast

贪吃蛇网页小游戏代码是一款简单黑白风格好玩的在线网页小游戏特效。

申明：php中文网下载站匠心打造专业的IT资源下载站！一切资源免费，来源网络收集，请自行检测软件的完整性。交流QQ群：916808767