【第22期】观点:IT 行业加班,到底有没有价值?

贪吃蛇游戏

原创 2015年11月20日 15:13:26

以下是: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 onload="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');" 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>



这是几年前用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、图片鉴赏:




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

简单的贪吃蛇游戏实现

贪吃蛇功能实现: (1)定义贪吃蛇游戏棋盘图 (2)初始化棋盘 (3)输出棋盘所在信息 (3)选择游戏难度 (4)随机产生食物 (5)更新游戏动态 (6)设置游戏相应的操作 (...

【Android手机游戏】贪吃蛇(1)

【Android手机游戏】贪吃蛇 引言 自从一个月之前开始学习android手机应用开发,看书,coding,逛论坛(主要是www.eoeandroid.com),发帖,回帖,积累了一点小小的经验,熟悉了一些最为基本的控件用法和基本android开发思路。 在eoe的论坛上发表过几个帖子...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

Javascript实现贪吃蛇小游戏

HTML代码 贪吃蛇游戏
  • 微博
    微信
    QQ
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)