CSS3贪吃蛇，HTML5实例

2024-09-05 12:21:05

字体：大中小

来源：转载

供稿：网友

网页版的贪吃蛇游戏完整代码，新颖的是采用最新的HTML5技术编写而成，相信这个游戏不少朋友都玩过吧，想学习CSS3的朋友，这也是一个不错的参考范例，期待与大家共同学习CSS3。

<!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);			}			var check_if_ate = function check_if_ate(){				var snake_head = document.getElementById('snake_head');				var snake_head_current_position_x = parseInt(snake_head.style.left);				var snake_head_current_position_y = parseInt(snake_head.style.top);				if(snake_head_current_position_x === food_position_x && snake_head_current_position_y === food_position_y){					clearInterval(interval);					snake_speed-=10;					interval = setInterval(snake_move,snake_speed);					var old_food = document.getElementById('snake_food');					game_space = document.getElementById('game_space');					game_space.removeChild(old_food);					create_new_food();					score++;					var show_score = document.getElementById('show_score');					show_score.value="score:"+score;					var newbody = document.createElement('div');					newbody.className="snake_body";					newbody.id="body"+score;					newbody.direction=snake_move_direction;					if(a_snake_body.length === 0){//如果只有蛇头						switch(snake_move_direction){							case "east":								newbody.style.top=snake_head_position_y+"px";								newbody.style.left=(snake_head_position_x-5)+"px";								break;							case "south":								newbody.style.top=(snake_head_position_y-5)+"px";								newbody.style.left=snake_head_position_x+"px";								break;							case "west":								newbody.style.top=snake_head_position_y+"px";								newbody.style.left=(snake_head_position_x+5)+"px";								break;							case "north":								newbody.style.top=(snake_head_position_y+5)+"px";								newbody.style.left=snake_head_position_x+"px";								break;							default:								break;						}						var game_space = document.getElementById("game_space");						game_space.appendChild(newbody);						a_snake_body.push(newbody);					}else{//如果已经有蛇身						var snake_tail = a_snake_body[a_snake_body.length-1];						var newbody = document.createElement('div');						newbody.className="snake_body";						newbody.id="body"+score;						newbody.direction=snake_tail.direction;						switch(snake_tail.direction){							case "east":								newbody.style.top=snake_tail.style.top;								newbody.style.left=(parseInt(snake_tail.style.left)-5)+"px";								break;							case "south":								newbody.style.top=(parseInt(snake_tail.style.top)-5)+"px";								newbody.style.left=snake_tail.style.left;								break;							case "west":								newbody.style.top=snake_tail.style.top;								newbody.style.left=(parseInt(snake_tail.style.left)+5)+"px";								break;							case "north":								newbody.style.top=(parseInt(snake_tail.style.top)+5)+"px";								newbody.style.left=snake_tail.style.left;								break;							default:								break;						}						var game_space = document.getElementById("game_space");						game_space.appendChild(newbody);						a_snake_body.push(newbody);					}				}//END if(snake_head_current_position_x === food_position_x && snake_head_current_position_y === food_position_y)			};// END check_if_ate();			var check_if_died = function check_if_died(){				//碰到墙				var snake_head = document.getElementById('snake_head');				var snake_head_current_position_x = parseInt(snake_head.style.left);				var snake_head_current_position_y = parseInt(snake_head.style.top);				if(snake_head_current_position_x>=800||snake_head_current_position_x<0||snake_head_current_position_y<0||snake_head_current_position_y>=600){					alert("撞墙了！/n本次分数："+score);					location.reload();				}				//TODO 碰到自己的身体				for(var i=0;i=1;i--){//逆序写法					var bodyi = document.getElementById('body'+(i+1));					if(i===1){						switch(a_snake_body[0].direction){//前一个的方向							case "east":								body2.style.left=(parseInt(a_snake_body[0].style.left)-5)+'px';								body2.style.top=a_snake_body[i-1].style.top;								break;							case "south":								body2.style.left=a_snake_body[i-1].style.left;								body2.style.top=(parseInt(a_snake_body[i-1].style.top)-5)+'px';								break;							case "west":								body2.style.left=(parseInt(a_snake_body[i-1].style.left)+5)+'px';								body2.style.top=a_snake_body[i-1].style.top;								break;							case "north":								body2.style.left=a_snake_body[i-1].style.left;								body2.style.top=(parseInt(a_snake_body[0].style.top)+5)+'px';								break;						}						a_snake_body[1].direction=a_snake_body[0].direction;//当前这一个的方向						a_snake_body[1].style.top = body2.style.top;						a_snake_body[1].style.left = body2.style.left;					}else{						switch(a_snake_body[i-1].direction){//前一个的方向							case "east":								bodyi.style.left=(parseInt(a_snake_body[i-1].style.left))+'px';								bodyi.style.top=a_snake_body[i-1].style.top;								break;							case "south":								bodyi.style.left=a_snake_body[i-1].style.left;								bodyi.style.top=(parseInt(a_snake_body[i-1].style.top))+'px';								break;							case "west":								bodyi.style.left=(parseInt(a_snake_body[i-1].style.left))+'px';								bodyi.style.top=a_snake_body[i-1].style.top;								break;							case "north":								bodyi.style.left=a_snake_body[i-1].style.left;								bodyi.style.top=(parseInt(a_snake_body[i-1].style.top))+'px';								break;						}						a_snake_body[i].direction=a_snake_body[i-1].direction;//当前这一个的方向						a_snake_body[i].style.top = bodyi.style.top;						a_snake_body[i].style.left = bodyi.style.left;					}									}				check_if_died();				check_if_ate();			};						var append_snake_tail = function append_snake_tail () {				var game_space = document.getElementById('game_space');				var newbody = document.createElement('div');				newbody.className="snake_body";				newbody.style.top = snake_head_position_y + "px";				newbody.style.left = snake_head_position_x + "px";				game_space.appendChild(newbody);			}			var init_direction_handler = function init_direction_handler () {				document.addEventListener("keydown",function(event){					if(snake_move_direction!="west"&&event.keyCode==39){						snake_move_direction="east";					}else if(snake_move_direction!="north"&&event.keyCode==40){						snake_move_direction="south";					}else if(snake_move_direction!="east"&&event.keyCode==37){						snake_move_direction="west";					}else if(snake_move_direction!="south"&&event.keyCode==38){						snake_move_direction="north";					}				});			}						var init_all_elements = function init_all_elements(){				create_new_food();				init_direction_handler();				init_game_space();				init_snake_position();				interval = setInterval(snake_move,snake_speed);			};			document.load=init_all_elements();		</script></html>

上一篇：JavaScript网页游戏代码-扫雷

下一篇：JS网页小游戏-推箱子代码