网页游戏--贪吃蛇游戏

最新推荐文章于 2024-07-30 10:31:44 发布

hlinghoney

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量1k

点赞数

分类专栏： web前端开发文章标签： HTML 网页游戏贪吃蛇 CSS Javascript

本文链接：https://blog.csdn.net/hlinghling/article/details/9107573

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

     还有一些问题没有解决，能简单的实现。但是没有实现升级的问题以及一些设置和背景画面等，最大的问题是在IE下运行成功，但是google和360浏览器都不能实现，其他的浏览器还没有测试。先贴在这里，具体的分析过程和总结等解决此问题后全部给出，具体解决方案还没想好。希望大神提供问题的解决方案！

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Untitled Document</title>
	</head>
	<style type="text/css">
		#t{
		width:450px;
		height:450px;
		border:1px red solid;
	}
	</style>
	<script type="text/javascript">
		var sss;//
		function jie(x,y)
		{
			this.x=x;
			this.y=y;
		}
		var jie1=new jie(4,6);
		var jie2=new jie(4,5);
		var jie3=new jie(4,4);
		var jies=[jie1,jie2,jie3];
		//显示地图
		function kaishi()
		{
			var tt=document.createElement("<table id='t'></table>");
			document.body.appendChild(tt);
			//document.write("<table id='t' border='1'></table>");
			for(var i =0;i<=30;i++)
			{
				var tr=t.insertRow(i);
				for(var j = 0;j<=30;j++)
				{
					var td=tr.insertCell(j);
					td.id="s"+i+"s"+j;
				}
			}
			 cjpg();
			//循环运行she方法
			aaaa=setInterval("she()",500);
		}
		var aaaa;//循环方法     方便游戏结束时关闭
		//定义蛇的位置
		function she(){
			 	weizhi();//定义蛇头位置
			 	pdd();//再蛇头下一步的位置没加入数组时对蛇头的下一步走向做检查
				//将原先的蛇隐藏
				for (var a in jies) 
				{
				
					var s = document.getElementById("s" + jies[a].x +"s"+ jies[a].y);
					
						s.style.backgroundColor = "";
					
				}
				jies.unshift(sss);//加蛇头
				jies.pop();//去蛇尾
				//判断是否撞到墙了
				if (jies[0].x > 30 || jies[0].y > 30 || jies[0].y < 0 || jies[0].x < 0) {
					alert("撞到墙了！游戏结束");
					window.location.reload(true);//刷新本页面
				}
				//显示蛇的位置
				for (var t = 0; t < jies.length; t++) 
				{
					var s = document.getElementById("s" + jies[t].x +"s"+ jies[t].y);
					window.status = jies[0].x+"+"+jies[0].y;
					s.style.backgroundColor = "red";
				}
				pd();//判断吃到苹果
		}
		var pg;//出现苹果
		//判断是否吃了苹果
		function pd()
		{
			if(jies[0].x==pg.x&&pg.y==jies[0].y)
			{
				var ind = jies.length;
				jies.unshift(sss);
				cjpg();//创建苹果
			}
		}
		document.οnkeydοwn=keystoke;//打开键盘输入
		var k =39;//默认蛇的走向
		function keystoke()
		{
			k = event.keyCode;//37右38上39左40下
		}
		function weizhi()
		{
				var m = jies[0].y;
				var n = jies[0].x;
				switch (k) {
					case 39:
						m = m + 1;
						break;
					case 40:
						n = n + 1;
						break;
					case 37:
						m = m - 1;
						break;
					case 38:
						n = n - 1;
						break;
				}
				sss = new jie(n, m);	//产生蛇头的下一步位置
		}
		//创造苹果
		function cjpg()
		{
			var px=Math.floor(Math.random()*30);//随机数
			var py=Math.floor(Math.random()*30);
			pg=new jie(px,py);//苹果对象
			var tr = document.getElementById("s" + px +"s" +py);//创建苹果
			tr.style.backgroundColor = "#00ff00";//上色
		}
		//判断是够咬到自己
		function pdd()
		{
			var tr = document.getElementById("s" +sss.x +"s"+ sss.y);//获取蛇头下一步的位置
			if(tr!=null)//判断是否存在  不存在为撞墙   存在再进行下步比较
			{
				if (tr.style.backgroundColor == "red") {//比较下一步的颜色和蛇身的颜色一致就是咬到自己了
					alert("咬到自己！游戏结束");
					window.location.reload(true);//刷新本页面
				}
			}
		}
	</script>
	<body>
		<input type="button" value="开始游戏" οnclick="kaishi()"><input type="text" value="0" id="fs" >
	</body>
</html>