CSS3贪吃蛇，HTML5实例

时间：2013-05-30 22:45 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>贪吃蛇</title>
<style type="text/css">
			/*   CSS Reset     */
			html, body, div, span, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			abbr, address, cite, code,
			del, dfn, em, img, ins, kbd, q, samp,
			small, strong, sub, sup, var,
			b, i,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			input, textarea,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, figcaption, figure, 
			footer, header, hgroup, menu, nav, section, summary,
			time, mark, audio, video {
			    margin:0;
			    padding:0;
			    border:0;
			    outline:0;
			    font-size:100%;
			    vertical-align:baseline;
			}	
			/*   CSS Reset     */
			#game_space{
				margin:auto;
				border:1px dotted #000000;
				position:absolute;
			}
			#snake_head{
				position: absolute;
				top:0px;
				left:0px;
				height:5px;
				width:5px;
				background: red;
			}
			.snake_body{
				position: absolute;
				top:5px;
				left:5px;
				height:5px;
				width:5px;
				background: gray;
			}
			#show_score{
				position:absolute;
				top:20px;
				left:20px;
				width:100px;
				height:40px;
			}
		</style>
	</head>
	<body>
		<h1>正常人应该玩不过12分吧= =.</h1>
		<div id="game_space" style="width:800px;height:600px;">
			<div id="snake_head"></div>
		</div>
		<input id="show_score" type="reset" value="score:0">

</body>
	<script type="text/javascript">
			var interval;
			var snake_head_position_x;
			var snake_head_position_y;
			var food_position_x;
			var food_position_y;
			var snake_move_direction = "east";//4 values:east west north south
			var snake_move_pre_direction = "east";
			var snake_speed = 100;
			var a_snake_body = new Array();
			var score = 0;
			var create_new_food = function create_new_food() {
				food_position_x = parseInt(Math.random()*160+1)*5-5;
				food_position_y = parseInt(Math.random()*120+1)*5-5;
				game_space = document.getElementById('game_space');
				var newfood = document.createElement('div');
				newfood.id="snake_food";
				newfood.style.position = "absolute";
				newfood.style.top = food_position_y +"px";
				newfood.style.left = food_position_x +"px";
				newfood.style.background = "blue";
				newfood.style.width = "5px";
				newfood.style.height = "5px";
				game_space.appendChild(newfood);
			}

}//END if(snake_head_current_position_x === food_position_x && snake_head_current_position_y === food_position_y)
			};// END check_if_ate();

var init_snake_position = function init_snake_position(){
				snake_head_position_x = /*parseInt(50+Math.random()*50+1)*5*/300;
				snake_head_position_y =/* parseInt(50+Math.random()*50+1)*5*/300;
				var snake_head = document.getElementById('snake_head');
				snake_head.style.left = snake_head_position_x + 'px';
				snake_head.style.top = snake_head_position_y + 'px';
			};

CSS3贪吃蛇，HTML5实例

网页特效