Javascrip贪吃蛇设计_javascrip在键盘上随机输入学生的成绩分数，程序输出学生成绩的等-优快云博客

本文介绍了如何利用JavaScript创建贪吃蛇游戏。通过JS代码，实现了食物在地图上的随机移动，详细步骤可在给出的博客链接中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用js来创建贪吃蛇对象

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#map{
			width: 600px;
			height: 600px;
			background-color: black;
			margin: 20px auto;
			position: relative;
		}
	</style>
</head>
<body>
	<!-- 我的地图 -->
	<div id="map"></div>
<script type="text/javascript">
	//目前先设计随机数对象以及随机食物盒子对象
	//1.随机数对象,采用函数的自调用
	(function (){
		//第一步先创建随机数的构造函数,但因为随机数并没有属性,所以创建的是一个空的构造函数
		function Random(){}
		//第二步为自己的构造函数创建可以共享的方法,其中我需要得到的是一个区间中的随机数,所以我需要给函数最小值和最大值的形参
		Random.prototype.getRandom = function (min,max){
			//这个方法主要是获取一个随机数,这里获取的是min——(max-1)中间的随机数
			return Math.floor(Math.random()*(max-min)+min);
		}
		//然后创建一个实例化对象,那么我创建的对象就能够访问我的这个方法,但由于我是在函数内部创建的变量,所以我需要创建的是一个全局变量,也就是早window对象下添加一个属性
		window.random = new Random();
		//这样我就可以在外部访问我的random了
	})();
	//2.创建我的随机食物方块对象,同样采用函数的自调用
	(function (){
		//第一步也是创建构造函数,其中食物小盒子有,width,height,top,left,backgroundColor以及要创建一盒食物小方块的盒子
		function Food(width,height,color){
			//其中this指向的是我实例化的对象
			//当我没有传输一个实参的时候就会取后面一个值
			this.width = width || 20;
			this.height = height || 20;
			this.color = color || "white";
			//创建一个键名  element,top,left,并将他们给与一个值
			this.element = document.createElement("div");
			this.top = 0;
			this.left = 0;
		}
		//第二步就是创建一个初始化盒子的方法,并且是可以共享的方法
		Food.prototype.box = function (){
			//将我传输的实参将我创建的盒子初始化
			//其中this.width和this。element都是我的属性
			this.element.style.width = this.width+"px";
			this.element.style.height = this.height+"px";
			this.element.style.backgroundColor = this.color;
			this.element.style.top = this.top ;
			this.element.style.left = this.left;
			this.element.style.position = "absolute";
			//然后将我创建的食物小盒子加入到我的map中
			document.getElementById("map").appendChild(this.element);
			//在我的一个方法中可以调用我的另一个方法
			this.move();
		}
		//第三步就是创建盒子随即移动的方法,当然这也是一个要被共享访问的函数
		Food.prototype.move = function (){
			//将我已经初始化的盒子以及产生的随机来让我的盒子随机移动
			//首先确定我的随机数的范围
			// 先获取我的map的大小,然后在获取我的盒子的大小,因为我的盒子需要在规定的网格中运动,所以产生的随机数一定要是我小盒子的宽度的倍数
			//其中我的最小值是零,最大值是我的map最大宽度减去一个小盒子的宽度
			var maxX = document.getElementById("map").offsetWidth;
			var maxY = document.getElementById("map").offsetHeight;
			var randomX = random.getRandom(0,maxX/this.width)*this.width;
			var randomY = random.getRandom(0,maxY/this.height)*this.height;
			//然后就是将我产生的随机数赋值给我的小盒子
			this.element.style.left = randomX+"px";
			this.element.style.top  = randomY+"px";
		}
		//然后也是实例化一个我的随机盒子对象,同样是我的window对象下创建
		window.food = new Food();
	})();
	//最后就是调用我的这个方法
	food.box();
</script>
</body>
</html>