Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
	background-color:rgb(255,255,255);
}
@media screen and (min-width:width 0px) and (max-width:1000px) {
	/* 手机,平板等需要横屏加载 */
}
#playground {
	margin:20px auto;
	width:600px;
	height:400px;
	border:solid rgb(209,209,209) 1px;
	border-radius:10px;
	position:relative;
	background-color:rgb(248,251,252);
}
#snake {
	width:20px;
	height:20px;
	position:absolute;
	background-color:black;
	top:100px;
	left:100px;
	border-radius:50%;
}
#foods {
	background-color:blue;
	width:20px;
	height:20px;
	position:absolute;
	top:300px;
	left:300px;
	border-radius:50%;
}
.body {
	width:20px;
	height:20px;
	position:absolute;
	background-color:rgb(119,119,119);
	border-radius:50%;
}
p {
	text-align:center;
	background:transparent;
	z-index:10;
	position:relative;
}
div p {
	top:-30px;
}
.container {
	text-align:center;
}
div.container div#scores,div.container div#playground {
	display:inline-block;
}
.background {
	margin:0 auto;
	width:350px;
	height:35px;
	background-color:black;
	opacity:10%;
	border-radius:0 0 20px 20px;
	z-index:9;
}
span {
	background:transparent;
}
#scores {
	top:-20px;
	width:200px;
	height:400px;
	position:relative;
	margin-right:20px;
	background-color:rgb(237,243,245);
	border:solid rgb(209,209,209) 1px;
	border-radius:10px;
	left:30px;
	opacity:.7;
}
.title {
	margin:4px;
	margin-bottom:10px;
	margin-top:10px;
	line-height:30px;
	font-weight:bold;
	background-color:transparent;
	text-align:center;
	border-radius:10px;
}
.score {
	position:relative;
	overflow:hidden;
	margin:4px;
	width:96%;
	height:30px;
	float:left;
	border-radius:10px;
}
.scorespan {
	position:relative;
	top:5px;
	left:90px;
	float:left;
}
.score div.gametime {
	position:relative;
	float:right;
	line-height:12px;
	font-size:12px;
	top:18px;
	color:rgb(104,117,121);
	width:70px;
	height:12px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

贪吃蛇游戏(原创)

更新时间:2020-12-07 01:41:01

wsad操作,

0