贪吃蛇游戏

时间：2016-04-07 18:44:58 阅读：222 评论：0 收藏：0 [点我收藏+]

以下是：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:190px;
left:-120px;
}
#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 onload="start_but()">

<div id="set">
<div id="tit">
<span><b>贪吃蛇</b></span>
<br>
</div>
<div id="set_con">
<div id="speed">

<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‘);" onmouseover="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" onclick="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>