CSS3贪吃蛇，HTML5实例
网页版的贪吃蛇游戏完整代码，新颖的是采用最新的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<a_snake_body.length;i++){
if( parseInt(a_snake_body[i].style.top)==snake_head_position_y && parseInt(a_snake_body[i].style.left)==snake_head_position_x){
alert(“咬到自己了!\n本次分数：“+score);
location.reload();
}
}
};
var init_game_space = function init_game_space() {
game_space = document.getElementById(‘game_space‘);
var game_space_width = parseInt(game_space.style.width);
game_space.style.left = ((parseInt(document.documentElement.clientWidth) - game_space_width) / 2)+‘px‘;
};
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‘;
};
var snake_move = function snake_move(){
var snake_head = document.getElementById(‘snake_head‘);
//蛇头运动
switch(snake_move_direction){
case “east“:
snake_head_position_x += 5;
snake_head.style.left = snake_head_position_x + ‘px‘;
break;
case “south“:
snake_head_position_y += 5;
snake_head.style.top = snake_head_position_y + ‘px‘;
break;
case “west“:
snake_head_position_x -= 5;
snake_head.style.left = snake_head_position_x + ‘px‘;
break;
case “north“:
snake_head_position_y -= 5;
snake_head.style.top = snake_head_position_y + ‘px‘;
break;
default:
break;
}
//蛇身运动
if(a_snake_body.length!=0){
//紧跟头部的身体紧跟头部位置
var body1 = document.getElementById(‘body1‘);
switch(snake_move_direction){//根据蛇头目前的方向，就可以推算出它上一刻的位置
case “east“:
body1.style.left=(snake_head_position_x-5)+‘px‘;
body1.style.top=snake_head_position_y+‘px‘;
break;
case “south“:
body1.style.left=(snake_head_position_x)+‘px‘;
body1.style.top=(snake_head_position_y-5)+‘px‘;
break;
case “west“:
body1.style.left=(snake_head_position_x+5)+‘px‘;
body1.style.top=snake_head_position_y+‘px‘;
break;
case “north“:
body1.style.left=(snake_head_position_x)+‘px‘;
body1.style.top=(snake_head_position_y+5)+‘px‘;
break;
}
a_snake_body[0].direction=snake_move_pre_direction;
snake_move_pre_direction = snake_move_direction;//记录上一次的运动方向
a_snake_body[0].style.top = body1.style.top;
a_snake_body[0].style.left = body1.style.left;
}
for(var i=a_snake_body.length-1;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>
发表评论