js 贪吃蛇

最新推荐文章于 2024-01-28 17:49:34 发布

Bai1997_

最新推荐文章于 2024-01-28 17:49:34 发布

阅读量111

点赞数

分类专栏： js 文章标签： js 贪吃蛇

本文链接：https://blog.csdn.net/qq_44904804/article/details/99882223

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js 贪吃蛇代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 500px;
				height: 500px;
				border: 1px solid black;
				margin: 50px auto;
			}
			
			.kuai {
				height: 20px;
				width: 20px;
				border: 1px solid lightgreen;
				box-sizing: border-box;
				float: left;
			}
			
			.she_b {
				background-color: lightsalmon;
			}
			
			.food {
				background-color: limegreen;
			}
			
			.tou {
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div class="wrap"></div>
	</body>
	<script type="text/javascript">
		var wrap = document.querySelector(".wrap")
		var row_num = 25
		var she = {
			body: [],
			dire: "left"
		}
		var game_time = ""
		var is_in = false
		var new_p
		var tmp_xy
		for(var i = 0; i < row_num * row_num; i++) {
			var kuai = document.createElement("div")
			kuai.className = "kuai"
			wrap.appendChild(kuai)
		}
		var all_child = document.querySelectorAll(".wrap .kuai")
		//随机函数
		function my_random(m, n) {
			return parseInt(Math.random() * (n - m + 1)) + m
		}

		var ran_x = my_random(5, 18)
		var ran_y = my_random(5, 18)
		she.body.push({
			x: ran_x,
			y: ran_y
		}, {
			x: ran_x + 1,
			y: ran_y
		}, {
			x: ran_x + 2,
			y: ran_y
		})
		//{x:ran_x,y:ran_y}--->下标
		function point_to_index(p) {
			return p.y * row_num + p.x
		}
		//键盘事件
		document.addEventListener("keydown", function() {
			switch(event.keyCode) {
				case 37:
					if(she.dire == "right") {

					} else {
						she.dire = "left"
					}
					break;
				case 38:
					if(she.dire == "down") {

					} else {
						she.dire = "up"
					}
					break;
				case 39:
					if(she.dire == "left") {

					} else {
						she.dire = "right"
					}
					break;
				case 40:
					if(she.dire == "up") {

					} else {
						she.dire = "down"
					}
					break;
				default:
					break;
			}
		})
		//画红色
		function hua_red() {
			for(var i = 0; i < she.body.length; i++) {
				var tmp_index = point_to_index(she.body[i])
				if(she.body[i] == she.body[0]) {
					if(all_child[tmp_index]){
					all_child[tmp_index].className = "kuai she_b tou"
					all_child[tmp_index].innerText = "?"	
					}
				} else {
					all_child[tmp_index].className = "kuai she_b"
				}
			}
		}
		hua_red()
		//画白色
		function hua_bai() {
			for(var i = 0; i < she.body.length; i++) {
				var tmp_index = point_to_index(she.body[i])
				if(all_child[tmp_index]){
				all_child[tmp_index].className = "kuai"
				all_child[tmp_index].innerText = ""	
				}
			}
		}
		//创建食物
		function cr_food() {
			is_in = true
			while(is_in) {
				var ran_x = my_random(0, 24)
				var ran_y = my_random(0, 24)
				tmp_xy = {
					x: ran_x,
					y: ran_y
				}
				var tmp_index = point_to_index(tmp_xy)

				for(var i = 0; i < she.body.length; i++) {
					if(she.body[i] == tmp_xy) {

					} else {
						all_child[tmp_index].className = "kuai food"
						is_in = false
					}
				}
			}
		}
		//增加长度
		function add_body() {
			var last_she = she.body[she.body.length - 1]
			var la_er_she = she.body[she.body.length - 2]
			var new_she = {
				x: 0,
				y: 0
			}
			if(last_she.x < la_er_she.x) {
				new_she = {
					x: last_she.x - 1,
					y: last_she.y
				}
			} else {
				new_she = {
					x: last_she.x + 1,
					y: last_she.y
				}
			}
			if(last_she.y < la_er_she.y) {
				new_she = {
					x: last_she.x,
					y: last_she.y - 1
				}
			} else {
				new_she = {
					x: last_she.x,
					y: last_she.y + 1
				}
			}
			she.body.push(new_she)
			cr_food()
		}
		//改变?的移动
		function change_she_body() {
			var tmp_arr = []
			for(var i = 0; i < she.body.length; i++) {
				if(i == 0) {
					if(she.dire == "left") {
						new_p = {
							x: she.body[i].x - 1,
							y: she.body[i].y
						}
						if(new_p.x == tmp_xy.x && new_p.y == tmp_xy.y) {
							add_body()
						}
						tmp_arr.push(new_p)

					} else if(she.dire == "right") {
						new_p = {
							x: she.body[i].x + 1,
							y: she.body[i].y
						}
						if(new_p.x == tmp_xy.x && new_p.y == tmp_xy.y) {
							add_body()
						}
						tmp_arr.push(new_p)

					} else if(she.dire == "up") {
						new_p = {
							x: she.body[i].x,
							y: she.body[i].y - 1
						}
						if(new_p.x == tmp_xy.x && new_p.y == tmp_xy.y) {
							add_body()
						}
						tmp_arr.push(new_p)
					} else if(she.dire == "down") {
						new_p = {
							x: she.body[i].x,
							y: she.body[i].y+1
						}
						if(new_p.x == tmp_xy.x && new_p.y == tmp_xy.y) {
							add_body()
						}
						tmp_arr.push(new_p)
					}

				} else {
					tmp_arr.push(she.body[i - 1])
				}
			}

			if(she.body[0].x < 0 || she.body[0].x > 24 || she.body[0].y < 0 || she.body[0].y > 24) {
				return
			}
			she.body = tmp_arr
		}

		//游戏定时器
		game_time = setInterval(function() {
			//画白色
			hua_bai()
			//改变?身体的数组
			change_she_body()
			//画红色
			hua_red()
		}, 200)
		cr_food()
	</script>

</html>

Bai1997_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 贪吃蛇

js 贪吃蛇代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { width: 500px; height: 500px...
复制链接

扫一扫