贪吃蛇网页小游戏的代码

<风格>
::选择{
颜色:#FFFFFF;
背景：透明；
}
::-moz-选择 {
颜色:#FFFFFF;
背景：透明；
}
* {
# 保证金：0；
填充：0;
字体系列：“VT323”;
}
身体 {＃＃＃ 背景颜色:#000000;
}
。裹 {＃＃＃ 左边距：自动；
右边距：自动；
}
标题 {
宽度：340px；
字体大小：0;
}
帆布 {＃＃＃ 显示：无；
边框样式：实心；
边框宽度：10px;
边框颜色：#FFFFFF;
}
画布：焦点{
大纲：无；
}
/* 顶级样式 */
h1 {
显示：内联块；
宽度：100px；
字体大小：32px;
颜色:#FFFFFF;
}
。分数 {＃＃＃ 显示：内联块；
宽度：240px；
字体大小：20px;
颜色:#FFFFFF;
文本对齐：右；
}
.score_value {
字体大小：继承；
}
/* 所有屏幕样式 */
#gameover a,#setting a,#menu a {
显示：块；
}
#gameover a,#setting a:hover,#menu a:hover {
光标：指针；
}
#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {
内容：“>”;
右边距:10px;
}
/* 菜单屏幕样式 */
＃菜单 {＃＃＃ 显示：块；
宽度：340px；
顶部填充：95px;
底部填充：95px;
字体大小：40px;
左边距：自动；
右边距：自动；
文本对齐：居中；
颜色:#FFF;
}
#菜单 h2 {
-webkit-animation:logo-ani 1000ms 线性无限;
动画：logo-ani 1000ms 线性无限；
下边距：30px;
}
#菜单a {
字体大小：30px;
}
@-webkit-keyframes 徽标-ani {
50% {
# -webkit-transform:scale(1.3,1.3);
}
100% {
# -webkit-transform:scale(1.0,1.0);
}
}@keyframes 徽标-ani {
50% {
# 变换：缩放(1.3,1.3);
}
100% {
# 变换：缩放(1.0,1.0);
}
}/* 游戏结束屏幕样式 */

＃游戏结束 {＃＃＃ 显示：无；
宽度：340px；
顶部填充：95px;
底部填充：95px;
左边距：自动；
右边距：自动；
文本对齐：居中；
字体大小：30px;
颜色:#FFF;
}
#游戏结束 p {
顶部边距：25px;
字体大小：20px;
}
/* 设置屏幕风格 */
＃环境 {＃＃＃ 显示：无；
宽度：340px；
左边距：自动；
右边距：自动；
顶部填充：85px;
填充底部：85px;
字体大小：30px;
颜色:#FFF;
文本对齐：居中；
}
#设置 h2 {
边距底部：15px;
}
#设置p {
顶部边距：10px;
}
#设置输入{
显示：无；
}
#设置标签{
光标：指针；
}
#设置输入：选中标签{
背景颜色：#FFF;
颜色:#000;
}
</风格>
</头>

<标题类=“换行”>
    <h1>蛇</h1>
    <p class="score">分数：<span id="score_value">0</span></p>
</标题>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>

本站声明

本站所有资源均由网友贡献发布，或转载各大下载站。请自行检查软件的完整性！本网站所有资源仅供学习和参考。请勿用于商业用途，否则造成的一切后果由您自行负责！如有侵权，请联系我们删除下架。联系方式：admin@php.cn