以下是：snakey.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>贪吃蛇</title>
<style>
body{
margin:0;
padding:0;
text-align:center;
}
#set{
float:left;
width:800px;
height:100px;
margin-top:50px;
margin-left:200px;
border:1px solid green;
}
#tit{
float:left;
width:800px;
height:50px;
}
#tit{
font-size:26px;
color:#000;
position:relative;
top:20px;
}
#set_con{
float:left;
width:800px;
height:20px;
position:relative;
}
#wall{
position:absolute;
right:5px;
bottom:3px;
}
#speed{
background:white;
position:absolute;
left:5px;
bottom:3px;
}
#main{
float:left;
width:800px;
height:500px;
margin-top:10px;
margin-left:200px;
border:1px solid green;
background:url("img/1.jpg");
}
.dx{
float:left;
width:10px;
height:10px;
}
.cdx{
background:green;
}
#dx_num{
width:40px;
height:20px;
background:#006699;
color:white;
position:absolute;
bottom:3px;
left:370px;
}
#start_div{
width:120px;
background:red;
position:relative;
top:40%;
left:40%;
}
#start_div input{
background:green;
font-size:45px;
color:#003366;
border:2px solid #FFF;
}
#start_div input:hover{
font-size:50px;
color:#FFF;
border:3px solid yellow;
cursor:pointer;
}
#set_bg{
width:800px;
height:30px;
cursor:pointer;
}
#set_bg .set_bg_jpg{
float:left;
width:30px;
height:30px;
background:red;
}
</style>
</head>
<body οnlοad="start_but()">
<!-- 自然状态下，即没有设置速度时，每多吃一个方块，前进一格的时间就会减少1毫秒 -->
<div id="set">
<div id="tit">
<span><b>贪吃蛇</b></span>
<br>
</div>
<div id="set_con">
<div id="speed">
<!-- 龙的速度最快，每10毫秒前进一格 -->
<span id="speed_span">设置速度：</span>
<select id="speed_sel">
<option value="0"></option>
<option value="200">龟</option>
<option value="130">兔</option>
<option value="90">狼</option>
<option value="50">马</option>
<option value="30">豹</option>
<option value="10">龙</option>
</select>
当前时速：<span id="time_speed">0</span> 毫秒
</div>
<div id="dx_num">
<span id="dx_num_span"></span>
</div>
<!-- 贴墙，表示新生的方块有可能出现在边界；不贴墙，表示新生方块不出现在边界-->
<select id="wall">
<option></option>
<option value="t1">贴墙</option>
<option value="t0" selected>不贴墙</option>
</select>
</div>
<div id="set_bg">
<div style="float:left;width:10px;"></div>
<?php
//鼠标放在图片上方可以切换背景
for($i=1;$i<=26;$i++)
{
?>
<div class="set_bg_jpg" style="background:url('img/small/<?=$i?>.jpg');" οnmοuseοver="set_bg(<?=$i;?>)"></div>
<?}?>
</div>
</div>
<div id="main">
</div>
</body>
</html>
<script><!--
//方法要点，将第一个前面根据方向加一个食物，将最后一个食物去掉
var main = document.getElementById("main");//声明获取游戏区域对象
var num = (main.offsetWidth-2)*(main.offsetHeight-2)/100;//声明计算游戏区域的区块数量
var dx_num1 = 0;//声明设置运动中的首个区块的下标初始值
var dx_num2 = 0;//声明设置静止状态下的区块的下标初始值
var cdx = '';//声明设置定时器对象
var code = '';//声明设置按键初始化编码
var code_save = '';//声明设置存储按键编码变量
var dx_arr=new Array();//声明建立贪吃蛇区块存储数组
var dx_count = 0;//声明贪吃蛇区块数组的初始键值
var snakey_color = "red";
//设置游戏背景
function set_bg(i)
{
document.getElementById('main').style.backgroundImage='url("img/'+i+'.jpg")';
}
//加载开始按钮背景
function start_but()
{
//main.style.background = "#DDD";
str = '<div id="start_div"><input type="button" value="Start Play" οnclick="start_eat()"/></div>';
main.innerHTML = str;
}
//加载贪吃蛇活动背景
function loa()
{
//用小区块“食物”填补主显示区域
str = '';
for(i=0; i<num; i++)
{
str += '<div class="dx"></div>';
}
main.innerHTML = str;
first_dx();
}
//设置按键函数
//按键编码=87，则方向朝上；编码=83，则方向朝下；编码=65，则方向朝左；编码=68，则方向朝右
//按键编码=38，则方向朝上；编码=40，则方向朝下；编码=37，则方向朝左；编码=39，则方向朝右
document.onkeydown = keyevent;
function keyevent()
{
code = event.keyCode;
//document.write(code);
if(code==87)
{
code = 38;
}
else if(code==83)
{
code = 40;
}
else if(code==65)
{
code = 37;
}
else if(code==68)
{
code = 39;
}
if(code>36 && code<41)
{
if(code_save != code)
{
if(code==38 && code_save==40 || code==40 && code_save==38 || code==37 && code_save==39 || code==39 && code_save==37)
{
}
else
{
clearInterval(cdx);
valtime(code);
}
}
}
}
//是否贴墙
function wall(ts)
{
wa = document.getElementById("wall").value;
if(wa == 't0')
{
col = (main.offsetWidth-2)/10;
if(ts<=col || ts>=(num-col) || ts%col==0 || (ts+1)%col==0)
{
return 't0';
}
}
else
{
return 't1';
}
}
//生成第一个食物
function first_dx()
{
dx = Math.ceil(Math.random()*num);
divdx = main.getElementsByTagName("div")[dx];
//是否贴墙
if_wall = wall(dx);
if(divdx.style.background == snakey_color || if_wall == 't0')
{
first_dx();
}
divdx.style.background = snakey_color;
dx_num1 = dx;
dx_arr[dx_count] = dx;
dx_count++;
}
//生成非第一个食物
function other_dx()
{
dx = Math.ceil(Math.random()*num);
divdx = main.getElementsByTagName("div")[dx];
//是否贴墙
if_wall = wall(dx);
if(divdx.style.background == snakey_color || if_wall == 't0')
{
other_dx();
}
else
{
divdx.style.background = snakey_color;
dx_num2 = dx;
document.getElementById("dx_num_span").innerHTML = dx_arr.length;
}
}
//开始运行定时器
function start_eat()
{
loa();
clearInterval(cdx);
other_dx();
valtime();
}
function valtime(code)
{
cols = (main.offsetWidth-2)/10;
number = 0;
dalen = dx_arr.length;
rate = 120-dalen;
if(rate<10)
rate=10;
if(document.getElementById("speed_sel").value!=0)
{
rate=document.getElementById("speed_sel").value;
}
document.getElementById("time_speed").innerHTML = rate;
//键盘事件监听，下边判断表示：当键盘按钮监听到方向事件时。
if(code == 37)
{
//蛇头向左运行
code_save = code;
number = -1;
}
else if(code == 38)
{
//蛇头向上运行
code_save = code;
number = cols*(-1);
}
else if(code == 39)
{
//蛇头向右运行
code_save = code;
number = 1;
}
else if(code == 40)
{
//蛇头向下运行
code_save = code;
number = cols;
}
if(number==0)
{
number=1;
code=39;
}
//根据number的数字判别方向，number=1则向右，-1则向左，=cols则向下，=cols*(-1)则向上
//贪吃蛇定时器运行
cdx = setInterval(function (){
dx_num1 += number;
if(dx_num1==dx_num2)
{
dx_arr.unshift(dx_num1);
other_dx();
}
else
{
//如果蛇头向左(<——)运行
if(code==37)
{
//如果编号+1的结果 对行区块个数取余为0，则结束游戏
if((dx_num1+1)%cols==0)
{
close_play();
}
}
//如果蛇头向上(∧)运行
if(code==38)
{
//如果编号<0 则结束游戏
if(dx_num1<0)
{
close_play();
}
}
//如果蛇头向右(——>)运行
if(code==39)
{
//如果编号 对行区块个数取余为0，则结束游戏
if((dx_num1)%cols==0)
{
close_play();
}
}
//如果蛇头向下(∨)运行
if(code==40)
{
//如果编号 >对区块总数+1，则结束游戏
if(dx_num1>(num-1))
{
close_play();
}
}
//获取当前下标的对象
divdx2 = main.getElementsByTagName("div")[dx_num1];
//如果运行过程中遇到自身的绿色区块，则游戏结束
if(divdx2.style.background == snakey_color)
{
close_play();
}
else
{
//将新下标插入数组第一个位置
dx_arr.unshift(dx_num1);
//将该下标的区块变为红色
divdx2.style.background = snakey_color;
//删除并获取数组最后一个区块下标
last = dx_arr.pop();
//将数组最后一个下标代表的区块变为灰色背景色
divdx3 = main.getElementsByTagName("div")[last];
divdx3.style.background = "";
}
}
},rate);
}
function close_play()
{
alert('游戏结束!');
clearInterval(cdx);//关闭定时器
window.location="?";
}
</script>
这是几年前用js写的，有时间用jquery重写一遍。
以下是注意事项：
1、代码需在php环境下才能运行
2、背景图片：
背景图片请大家自己收集，建一个文件夹（与snakey.php同目录）命名：img
img下新建文件夹：small
img下保存图片为：1.jpg、2.jpg......26.jpg。图片大小无限制。
small下保存图片为：1.jpg、2.jpg......26.jpg。图片大小30 x 30。
3、图片鉴赏：
扫一扫
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
