js实现贪吃蛇

最新推荐文章于 2024-01-10 11:55:29 发布

两个人的幸福online

最新推荐文章于 2024-01-10 11:55:29 发布

阅读量250

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_42249565/article/details/100707454

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用js实现了贪吃蛇，希望对大家的学习有益

你也可以查看我其他开源项目https://github.com/lizhilicctv
下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				background: #fff;
				width: 600px;
				height: 600px;
				margin: 0 auto;
				position: relative;
			}
			.box2 {
				position: absolute;
				width: 50px;
				height: 50px;
				background: #999;
			}
			.boxs {
				position: absolute;
				width: 10px;
				height: 10px;
				background: #f00;
			}
		</style>
	</head>
	<body style="background: #ccc;">
		<h1 style="text-align: center;margin: 35px;">简易版贪吃蛇</h1>
		<div class="box">
			<div class="box2"></div>
			<div class="boxs"></div>
		</div>
	</body>
</html>
<script>
	var spder = 100,
		fenshu = 0;
	$(function() {
		var top = parseInt(Math.random() * 500),
			left = parseInt(Math.random() * 500);
		$(".box2").css("top", top).css("left", left);
		$(document).keydown(function(event) {
			clearInterval(window.rightl);
			clearInterval(window.topl);
			clearInterval(window.leftl);
			clearInterval(window.bottoml);
			if (event.which == 40) {
				bottomShow()
			} else if (event.which == 39) {
				rightShow()
			} else if (event.which == 38) {
				topShow()
			} else if (event.which == 37) {
				leftShow()
			}
		});
	})

	function smallbox() {
		var top = parseInt(Math.random() * 500),
			left = parseInt(Math.random() * 500);
		if (parseInt($(".box2").css("left")) > left && parseInt($(".box2").css("left")) + 50 < left) {
			smallbox()
			return
		}
		if (parseInt($(".box2").css("top")) > top && parseInt($(".box2").css("top")) + 50 < top) {
			smallbox()
			return
		}
		$(".boxs").css("top", top).css("left", left).show();
	}
	smallbox()

	function bottomShow() {
		window.bottoml = setInterval(function() {
			eat()
			if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 550 || parseInt($(".box2").css(
					"left")) <= 0 || parseInt($(".box2").css("left")) >= 550) {
				return
			}
			$(".box2").css("top", parseInt($(".box2").css("top")) + 10)
		}, spder);
	}

	function rightShow() {
		window.rightl = setInterval(function() {
			eat()
			if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 550 || parseInt($(".box2").css(
					"left")) <= 0 || parseInt($(".box2").css("left")) >= 550) {
				over()
				return
			}
			$(".box2").css("left", parseInt($(".box2").css("left")) + 10)
		}, spder);
	}

	function topShow() {
		window.topl = setInterval(function() {
			eat()
			if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 500 || parseInt($(".box2").css(
					"left")) <= 0 || parseInt($(".box2").css("left")) >= 500) {
				over()
				return
			}
			$(".box2").css("top", parseInt($(".box2").css("top")) - 10)
		}, spder);
	}

	function leftShow() {
		window.leftl = setInterval(function() {

			eat()
			if (parseInt($(".box2").css("top")) <= 0 || parseInt($(".box2").css("top")) >= 500 || parseInt($(".box2").css(
					"left")) <= 0 || parseInt($(".box2").css("left")) >= 500) {
				over()
				return
			}
			$(".box2").css("left", parseInt($(".box2").css("left")) - 10)
		}, spder);

	}

	function over() {
		clearInterval(window.rightl);
		clearInterval(window.topl);
		clearInterval(window.leftl);
		clearInterval(window.bottoml);
		if (fenshu < 1000) {
			alert('大侠的技术不行啊，分数为：' + fenshu)
		} else if (fenshu >= 1000 && fenshu < 2000) {
			alert('大侠咱们切磋一下吧，分数为：' + fenshu)
		} else {
			alert('大侠请收下我的膝盖，分数为：' + fenshu)
		}
		location.reload();
		return
	}

	function eat() {
		if (parseInt($(".box2").css("top")) + 50 >= parseInt($(".boxs").css("top")) &&
			parseInt($(".box2").css("top")) - 10 <= parseInt($(".boxs").css("top")) &&
			parseInt($(".box2").css("left")) + 50 >= parseInt($(".boxs").css("left")) &&
			parseInt($(".box2").css("left")) - 10 <= parseInt($(".boxs").css("left"))) {
			spder -= 1
			fenshu += 5 * (100 - spder)
			$(".box2").css('background', 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' +
				parseInt(Math.random() * 255) + ')');

			if (!$(".boxs").is(":hidden")) {
				setTimeout(smallbox, 500);
				$(".boxs").hide()
			}
		}
	}
</script>