贪吃蛇js

╰半橙微兮° 2022-05-16 15:55 279阅读 0赞

python都学不懂，c++又不会，只能写写js来维持生活了。555555

js：

window.onload = function() {
    	var wrap = document.getElementsByClassName("wrap")[0];
    	var uls = document.getElementsByClassName("sbody")[0];
    	var hand = document.getElementsByClassName("hand")[0];
    	var food = document.getElementsByClassName("food")[0]; //食物
    	var lis = document.getElementsByTagName("li");
    	var fens = document.getElementById("fens");
     
    	//让头部动起来
    	//判断方向的标志
    	var handT = false; //ture上false下
    	var handL = false; //ture左false右
     
    	//控制定时器频率的
    	var seep = 200;
     
    	//键盘方向标志
    	var handCt = false; //t被按f没有
     
    	var handTop = 180,
    		handLeft = 180; //初始值
    	var stime;
    	//本体和框架的宽高
    	var handW = 30,
    		handH = 30;
    	var wrapW = 900,
    		wrapH = 600;
    	hand.style.top = handTop + "px";
    	hand.style.left = handLeft + "px";
     
    	//食物闪动
    	setInterval(function() {
    			if(food.style.opacity == "1") {
    				food.style.opacity = "0.3";
    			} else {
    				food.style.opacity = "1";
    			}
    		}, 600)
    		//存储身体各位置数组
     
    	//存储位置数组
    	var arrL = [];
    	var arrT = [];
     
    	function handMove() {
    		stime = setInterval(function() {
     
    			foodPingk();
    			//-----sbody位置刷新函数,要写在hand位置获得之前才行
    			//不然会重叠，因为是每次头部最后再移动位移就会先跑到前面了
    			for(var i = lis.length - 1; i > 0; i--) {
    				lis[i].style.left = lis[i - 1].style.left;
    				lis[i].style.top = lis[i - 1].style.top;
    			}
    			//判断键盘上上下按键
    			if(handCt) {
     
    				if(handT) {
    					if(handTop <= 0) { //边缘碰撞检测
    						handTop = wrapH - handH;
    					} else {
    						handTop -= 30;
    					}
    				} else {
    					if(handTop >= (wrapH - handH)) {
     
    						handTop = 0;
    					} else {
    						handTop += 30;
    					}
    				}
    				//				console.log(handTop);
    				hand.style.top = handTop + "px";
    			} else {
     
    				if(handL) {
    					if(handLeft <= 0) {
    						handLeft = wrapW - handW;
    					} {
    						handLeft -= 30;
    					}
    				} else {
    					if(handLeft >= (wrapW - handW)) {
    						handLeft = 0;
    					} else {
    						handLeft += 30;
    					}
    				}
    				//				console.log(handLeft);
    				hand.style.left = handLeft + "px";
    			}
     
    			//存储位置数组
    			arrL = [];
    			arrT = [];
    			for(var i = 0; i < lis.length; i++) {
    				arrL.push(lis[i].style.left);
    				arrT.push(lis[i].style.top);
    			}
    			console.log(arrL);
    			console.log(arrT);
    			//是否自杀了
    			zisha();
     
    		}, seep)
    	}
     
    	//判断是否撞到自己的函数
    	function zisha() {
    		//如果数组头部第一个和arrT、arrL里其他重复就是是叠加了
    		for(var i = 1; i < arrT.length; i++) {
    			if(arrT[0] == arrT[i] && arrL[0] == arrL[i]) {
     
    				fens.innerHTML = "游戏结束：" + fen + "分<br/>点击任意键返回";
    				uls.style.zIndex = "0";
     
    				fen = 0;
    				fens.style.fontSize = "100px";
    				fens.style.lineHeight = "120px";
    				clearInterval(stime);
    				uls.style.opacity = "0.2";
     
    				document.addEventListener("keydown", function() {
    					//点击任意键返回
    					location.reload();
    				}, false)
     
    			}
    		}
     
    	}
     
    	//------随机产生的食物的位置
    	function getRandom(min, max) {
    		return Math.floor(Math.random() * (max - min) + min);
    	}
    	//宽度30个，高度20个
    	function foods() {
    		//		food.style.backgroundColor = "rgba(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ",1)";
    		var foodRandomT = getRandom(0, 20);
    		var foodRandomL = getRandom(0, 30);
    		//不把食物在身体上
    		for(var i = 0; i < arrT.length; i++) {
    			while(foodRandomT == arrT[i] && foodRandomL == arrL[i]) {
    				foodRandomT = getRandom(0, 20);
    				foodRandomL = getRandom(0, 30);
    				i = 0;
    			}
    		}
     
    		food.style.top = foodRandomT * 30 + "px";
    		food.style.left = foodRandomL * 30 + "px";
     
    	}
    	foods();
    	//-----本体碰撞框内检测
    	function sbodyPingk() {
     
    		//碰到上下检测
    		if(handTop <= 0) {
    			handTop = wrapH - handH;
    		} else if(handTop >= (wrapH - handH)) {
     
    			handTop = 0;
    		}
    		//碰到左右检测
    		if(handLeft <= 0) {
    			handLeft = wrapW - handW;
    		} else if(handLeft >= (wrapW - handW)) {
    			handLeft = 0;
    		}
    	}
    	//-----食物碰撞监测
    	var fen = 0;
     
    	function foodPingk() {
    		var foodW = 30,
    			foodH = 30;
    		var foodLeft = food.offsetLeft;
    		var foodTop = food.offsetTop;
    		var foodRight = foodLeft + foodW;
    		var foodBottom = foodTop + foodH;
    		//碰撞情况,完全重叠
     
    		if(foodLeft == handLeft && handTop == foodTop) {
    			shuaxin();
    		}
     
    	}
    	//刷新的函数
    	function shuaxin() {
    		foods();
     
    		if(fens.style.fontSize == "300px") {
    			fens.style.fontSize = "50px";
    		} else {
    			fens.style.fontSize = "300px";
    		}
    		fen += 1;
    		fens.innerHTML = fen;
    		//增加一个
    		var newLi = document.createElement("li");
    		uls.appendChild(newLi);
    	}
     
    	//-----同样的键值按两次不触发
    	var TkeyCode = true,
    		TkeyOld = 0;
     
    	//-----检测键盘
    	document.addEventListener("keydown", function(e) {
    		uls.style.opacity = "1";
    		fens.style.zIndex = "0";
    		fens.innerHTML = fen;
    		fens.style.fontSize = "300px";
     
    		var e = e || window.event;
    		var keyCode = e.keyCode || e.which;
     
    		if(TkeyOld == keyCode) {
    			TkeyCode = false;
    		} else {
    			TkeyCode = true;
    		}
    		if(TkeyCode == true) {
    			TkeyOld = keyCode;
    			//每次进入重置定时器
    			clearInterval(stime);
    			//加速
    			if(e.shiftKey) {
    				seep -= 40;
    				if(seep < 40) {
    					seep = 60;
    				}
    				//				alert(seep);
    			}
    			//开始运动
    			handMove();
    			//重新开始，刷新页面
    			if(e.altKey) {
    				location.reload();
    			}
    			//如果正在向左或右运动，左右键无效,反之同样
    			if(handCt == false) {
    				switch(keyCode) {
     
    					case 40: //下
    						handCt = true;
    						handT = false;
    						break;
    					case 38: //上
    						handCt = true;
    						handT = true;
    						break;
    				}
    			} else {
    				switch(keyCode) {
    					case 37: //左
    						handCt = false;
    						handL = true;
    						break;
    					case 39: //右
    						handCt = false;
    						handL = false;
    						break;
    				}
    			}
    		}
    	}, false)
     
    };

html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>贪食蛇</title>
    </head>
    <script type="text/javascript" src="js/index.js">
    		
    	</script>
    <style type="text/css">
    *{
    	padding: 0;
    	margin: 0;
    }
    li{
    	list-style: none;
    }
    		.wrap{
    	position: relative;
    	width: 900px;
    	height: 600px;
    	margin: 100px auto 0;
    	border: 10px red solid;
    	background-color: rgba(0,0,0,0.7);
    	z-index: 1;
    }
    .sbody{
    	position: relative;
    	z-index: 3;
    	
    }
    .sbody li{
    	position: absolute;
    	height: 30px;
    	width: 30px;
    	background-color: aqua;
    	border-radius: 45%;
     
    	
    }
    .sbody li:last-child{
    	background-color: pink;
    }
    .wrap .sbody .hand{
    	
    	background-color: lawngreen;
    	border-radius: 5px;
    }
     
    .food{
    	position: absolute;
    	height: 30px;
    	width: 30px;
    	background-color: yellow;
    	border-radius: 50%;
    	
    	transition-duration: .6s;
    	
    }
    .fen{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }
    .fen #fens{
    	z-index: 2;
    	position: absolute;
    	top:50%;
    	transform: translateY(-50%);
    	display: block;
    	line-height: 70px;
    	transition-duration: .4s;
    	
    	width: 100%;
    	/*height: 100%;*/
    	font-size: 50px;
    	text-align: center;
    	/*color: lightpink;*/
    }
    /*#bg{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	
    }*/
    	</style>
    <body>
    
    <div class="wrap">
    	
    	<div class="fen">
    		<span id="fens" style="font-size: 50px;">点击任意键开始游戏<br />
    		按Shift加速<br />方向键控制移动<br />Alt键重新开始</span>
    	</div>
    	
    	
    	<div class="food" style="opacity: 1;"></div>
    	
    	<ul class="sbody">
    				
    		<li class="hand"></li>
    			</ul>
    </div>
     
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 贪吃蛇

<table> <thead> <tr> <th>诺基亚贪吃蛇</th> </tr> </thead> <tbody></tbody> </t

不念不忘少年蓝@/ 2022年12月04日 09:24/ 0 赞/ 133 阅读

相关贪吃蛇

/ 贪吃蛇小游戏。 / include<iostream> include<cstdio> include<

绝地灬酷狼/ 2022年08月23日 00:59/ 0 赞/ 271 阅读

相关 js小游戏贪吃蛇

介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢

蔚落/ 2022年05月27日 07:26/ 0 赞/ 308 阅读

相关贪吃蛇

include<stdio.h> include<windows.h>//基本型态定义。支援型态定义函数。使用者界面函数图形装置界面函数。 inclu

缺乏、安全感/ 2022年05月17日 09:20/ 0 赞/ 271 阅读

相关贪吃蛇js

python都学不懂，c++又不会，只能写写js来维持生活了。555555 js： window.onload = function() { var wr

╰半橙微兮°/ 2022年05月16日 15:55/ 0 赞/ 280 阅读

相关贪吃蛇

很多人都玩过贪吃蛇这个游戏，今天我们就来简单完成一个贪吃蛇的小游戏。首先，贪吃蛇有以下几个要求： 1. 只有一条蛇 2. 每次只出现一个食物 3. 蛇吃到食物长度会加1

àì夳堔傛蜴生んèń/ 2022年05月08日 09:34/ 0 赞/ 323 阅读

相关 js小游戏案例（贪吃蛇）

> 贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地

ゝ一世哀愁。/ 2022年03月18日 09:24/ 0 赞/ 499 阅读

相关 js-实现贪吃蛇项目

近来在学习JS进阶，便学习着做个网页版贪吃蛇项目。 index.html <!DOCTYPEtml <html lang="en"> <head>

╰半夏微凉°/ 2022年03月18日 06:51/ 0 赞/ 230 阅读

相关 js 贪吃蛇

> <!DOCTYPE html> > <html lang="zh-cn"> > <head> > <meta charset="UTF-8"> >

迈不过友情╰/ 2022年03月09日 02:56/ 0 赞/ 335 阅读

相关贪吃蛇

学号：2017035107112 姓名：马铭泽我的码云贪吃蛇项目仓库：[https://gitee.com/mmz0217/number\_1/blob/master/m

灰太狼/ 2022年01月07日 14:15/ 0 赞/ 388 阅读