报错：Uncaught TypeError: Cannot read property 'length' of undefined

最新推荐文章于 2024-07-12 00:15:14 发布
最新推荐文章于 2024-07-12 00:15:14 发布
阅读量4.3k 收藏
点赞数 1
分类专栏： HTML CSS Javascript学习问题 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mimose421/article/details/79443753
版权

调试的时候出现这样的报错是怎么回事儿呢？

以下是代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0; padding: 0;}
		li { list-style: none; }
		#div1 { width: 800px; height: 600px; overflow: hidden;
		background: black; margin: 20px auto; position:relative; }
		#gameBtn { color: white; font-size: 20px; cursor: pointer; border: 1px #FFFFFF solid; width: 100px; height: 30px; line-height: 30px; text-align: center; position: absolute; top: 285px; left: 350px; }
		#score { color:#FFFFFF; font-size: 20px;}
		#bee { position: relative; }
		.enemyl { width: 40px; height: 28px; background: url(images/e1.png) no-repeat; float: left;  }
		.enemy2 { width: 40px; height: 28px; background: url(images/e2.png) no-repeat; float: left;  }
		.enemy3 { width: 40px; height: 28px; background: url(images/e3.png) no-repeat; float: left;  }
		.air { width: 50px; height: 65px; background: url(images/fj.png) no-repeat; position: absolute; }
		.bullet { width: 1px; overflow: hidden; height: 10px; background: white; position: absolute; }
	</style>
	<script>
	window.onload = function () {
		var oBtn = document.getElementById('gameBtn');
		oBtn.onclick = function () {
			this.style.display = 'none';
			Game.init('div1');   //游戏gogo!
		};
	};

	var Game = {

		oEnemy : {   //敌人的数据
			e1 : { style : 'enemy1',blood : 1 , speed : 5 , score : 1},
			e2 : { style : 'enemy2',blood : 2 , speed : 7 , score : 3},
			e3 : { style : 'enemy3',blood : 3 , speed : 10 , score : 5}

		},

		gk : [     //关卡的数据、
			{
				eMap : [
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
					'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
					'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
					
				],
				colNum : 10,
				iSpeedX : 10,
				iSpeedY : 10,
				times : 2000
			},
			{	eMap : [
					'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
					'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
					'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
					
				],
				colNum : 10,
				iSpeedX : 10,
				iSpeedY : 10,
				times : 2000
			}
		],
		air : {   //飞机的数据
			style : 'air',
			bulletStyle : 'bullet'
		},

		init : function(id){    //初始化
			this.oParent = document.getElementById(id);
			this.createScore();
			this.createEnemy(0);
			this.createAir();


		},
		createScore : function(){   //积分的创造
			var oS = document.createElement('div');
			oS.id = 'score';
			oS.innerHTML = '积分:<span>0</span>';
			this.oParent.appendChild(oS);
			this.oSNum = oS.getElementsByTagName('span')[0];
		},
		createEnemy : function(iNow){    //创建敌人
			var gk = this.gk[iNow];
			var oUl = document.createElement('ul');
			oUl.id = 'bee';
			oUl.style.width = gk.colNum * 40 + 'px';
			this.oParent.appendChild(oUl);
			oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + 'px';
			this.oUl = oUl;

			for (var i=0;i<gk.eMap.length;i++){
				var oLi = document.createElement('li');
				oLi.className = this.oEnemy[ gk.eMap[i] ].style;
				
				oLi.blood = this.oEnemy[ gk.eMap[i] ].blood;
				oLi.speed = this.oEnemy[ gk.eMap[i] ].speed;
				oLi.score = this.oEnemy[ gk.eMap[i] ].score;
				
				oUl.appendChild(oLi);

			}

			this.aLi = oUl.getElementsByTagName('li');

			this.runEnemy(gk);
		},
		runEnemy : function(gk){    //移动敌人
			var This = this;
			var L = 0;
			var R = this.oParent.offsetWidth - this.oUl.offsetWidth;
			setInterval(function(){
				if(This.oUl.offsetLeft > R) {
					gk.iSpeedX *= -1;
					This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY + 'px';
				}
				else if(This.oUl.offsetLeft < L){
					gk.iSpeedX *=-1;
					This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY + 'px';
				}

				This.oUl.style.left = This.oUl.offsetLeft + gk.iSpeedX + 'px';

			},200);
		},
		createAir : function(){   //创建飞机
			var oA = document.createElement('div');
			oA.className = this.air.style;
			this.oA = oA;
			this.oParent.appendChild( oA );
			oA.style.left = (this.oParent.offsetWidth - oA.offsetWidth)/2 + 'px';
			oA.style.top = (this.oParent.offsetHeight - oA.offsetHeight) + 'px';
			this.bindAir();
		},
		bindAir : function(){  //操作飞机
			var timer = null;
			var iNum = 0;
			var This = this;
			document.onkeydown = function(ev){
				var ev = ev || window.event;
				if(!timer){
					timer = setInterval(show,30);
				}
				
				if(ev.keyCode==37){
					iNum = 1;
				}
				else if(ev.keyCode==39){
					iNum = 2;
				}
			};

			document.onkeyup = function(){
				var ev = ev || window.event;
				clearInterval(timer);
				timer = null;
				iNum = 0;

				if(ev.keyCode==32){
					This.createBullet();
				}
			};

			function show(){
				if(iNum==1){
					This.oA.style.left = This.oA.offsetLeft - 10 + 'px';
				}
				else if(iNum==2){
					This.oA.style.left = This.oA.offsetLeft + 10 + 'px';
				}
			}
		},
		createBullet : function(){    //子弹的创建
			var oB = document.createElement('div');
			oB.className = this.air.bulletStyle;
			this.oParent.appendChild( oB );
			oB.style.left = this.oA.offsetLeft + this.oA.offsetWidth/2 + 'px';
			oB.style.top = this.oA.offsetTop - 10 + 'px';
			this.runBullet(oB);
		},
		runBullet : function(oB){   //子弹的运动
			var This = this;
			oB.timer = setInterval(function(){
				if (oB.offsetTop < -10) {
					clearInterval(oB.timer);
					This.oParent.removeChild(oB);
				}
				else{

					oB.style.top = oB.offsetTop - 10 + 'px';

				}

				for(var i=0;i<this.aLi.length;i++){
					if( This.pz(oB,This.aLi[i]) ){
						This.oUl.removeChild(This.aLi[i]);
					}
				}
				
			},30);
		},
		pz : function(obj1,obj2){   //碰撞检测
			
			var L1 = obj1.offsetLeft;
			var R1 = obj1.offsetLeft + obj1.offsetWidth;
			var T1 = obj1.offsetTop;
			var B1 = obj1.offsetTop + obj1.offsetHeight;
		 
			var L2 = obj2.offsetLeft + obj2.parentNode.offsetLeft;
			var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;
			var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;
			var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;

			if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){

				return false;
			}
			else{
				return true;
			}



		}


	};

	</script>
</head>

<body>

	<div id="div1">
		<div id="gameBtn">开始游戏</div>
	</div>

</body>
</html>

Harju
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
js报错：Uncaught TypeError: Cannot read property 'length' of undefined
weixin_43623808的博客
10-15 3万+
当js报：Uncaught TypeError: Cannot read property ‘length’ of undefined。 首先要明白这是什么意思：“无法读取未定义的属性length”。意思是你的js代码可能有某个地方使用a.length或者说你并没有使用length但是某个方法执行过程中使用了length属性，而a是undefined未定义的。 这个错误麻烦在不会告诉你，js代码...
Uncaught TypeError: Cannot read property 'length' of null
君当自强
10-22 1万+
前端页面不显示，console中报错：Uncaught TypeError: Cannot read property 'length' of null 代码如下： <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <!DOCTYPE html&gt...
【JavaScript】解决 JavaScript 语言报错：Uncaught TypeError: Cannot read property ‘X‘ of undefined
最新发布
Easonmax的博客
07-12 2257
在 JavaScript 编程中，“Uncaught TypeError: Cannot read property ‘X’ of undefined” 是一种非常常见的运行时错误。这个错误通常发生在尝试访问一个未定义或未初始化对象的属性时。函数getUser返回未定义的值，访问其name属性自然会报错。// 错误代码let data;// 修正代码。
Uncaught TypeError: Cannot read property ‘length‘ of undefined at eval 报错解决
jxjianghailan的博客
09-14 951
在用uniaapp写公众号页面上拉加载的时候遇到这个问题，如下图: 会一直这样加载中，解决办法：在后面加一个.catch((e) => {})来接收错误信息就不再报了
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length‘ of null
yxm_136452789的博客
11-03 2179
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length’ of null。 报错 报错原因 v-model绑定的值在定义的时候有问题，多选框类型应该定义为数组，之前是checkList:null。 <el-checkbox-group v-model="checkList" :disabled="disabled" @change="handleChange($event, re
ERROR TypeError: Cannot read property ‘length‘ of undefined
qq_36557846的博客
05-24 6037
angular常见报错： ERROR TypeError: Cannot read property ‘length’ of undefined 问题描述： 获取的数据不为空时没有这个错误，当获取的数据为空时报这个错误 解决方法： 定义变量data的同时赋值为空 data = []; ...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
小程序报错: Uncaught TypeError: Converting circular structure to JSON
03-29
今天把最近一直在开发的小程序放安卓手机上测试一下，结果某个页面就一直报错： Uncaught TypeError: Converting circular structure to JSON 先说一下基本的环境： 系统：Android 6.0.1 手机：小米4 微信版本：...
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
10-24
然而，在使用jQuery过程中，开发者有时会遇到JavaScript控制台抛出“Uncaught TypeError: Illegal invocation”错误。这个错误通常不是由jQuery自身引起的，而是与JavaScript作用域及上下文有关。 当我们进行Ajax...
TypeError: Cannot read property ‘length‘ of undefined
刘鑫磊
03-12 1万+
文章目录： 1.问题代码 2.出现的问题 3.问题分析 4.解决办法 1.问题代码 //判断有没有需要上传的图片数组 if(chooseImgs.length != 0){ // if (chooseImages!=0) { chooseImgs.forEach((v,i)=>{ wx.uploadFile({ url: 'ht.
深入理解并解决Uncaught TypeError: Cannot read properties of undefined技术文章
热门推荐
奇妙的Bug之旅
11-10 9万+
Uncaught TypeError: Cannot read properties of undefined 是一个 JavaScript 运行时错误，它表示你试图访问一个未定义（undefined）对象的属性。这通常是因为你尝试访问一个不存在的变量或者对象的属性。在访问对象的属性之前，你应该先检查该对象是否已经定义。你可以使用typeof操作符来检查一个变量是否已定义。// 访问 myVariable 的属性。
TypeError: Cannot read property ‘length‘ of null
imkaifan的博客
08-14 2308
参考如下代码讲解： 在请求回调里将请求返回的值进行一个赋值操作，如果我们的后台不规范，当数据为空的时候，给前端返回了一个null，而不是一个空数组。而且此时可以看到我们在代码中其实是用到了这个值进行了一个判断渲染，null上面怎么会有length属性呢。 所以不妨看一看后台接口返回的是个什么鬼。 <sn-container left="74.3" top="4.25" :show="Boolean(annunciator.data.length)"> <sn-figure
Uncaught TypeError: Cannot read property ‘length‘ of null解决经验贴
weixin_36466834的博客
12-11 5013
这是因为length属性不能测null的长度，所以在使用length属性前可以先判断一下某个字段是否可能为null。例： if( result != null) { if (0 != result.length) //操作; }
问题解决问题 Uncaught TypeError Cannot read property length of undefined
Zzj
05-16 8077
问题如下： 解决思路如下： 1、Uncaught TypeError: Cannot read property 'length' of undefined， 首先你要明白这个错误提示是什么意思，无法对一个没有复定义的值中获取一个length 属性 2、if (data == '' || data == undefined ||data == null || data.length < 1) 在这里你用了 length，那么就是说这个 data 值是制不存在的， 没有值或者没...
碰撞检测
weixin_30791095的博客
07-23 70
碰撞检测: function collTest(obj1,obj2){//由于if判断条件是对称的,obj1,obj2谁在前无所谓 //用于获取四条边的相对距离 var l1=obj1.of...
关于 Cannot read property 'length' of null 报错的解决办法
李光 未来科技
06-16 8万+
最近在搞前端的时候突然报了Cannot read property ‘length’ of null的错,一开始都是在前端调试错,发现解决不了问题,后来发现如果你所查找的数据条数为0的时候,后端返回给前端是null,此时必然报错Cannot read property ‘length’ of null. 解决办法: 如果后端的返回值为null,就需要我们在后端返回一个空的list数组 本人错误的后...
JS原生编写飞机大战小蜜蜂游戏
南舟
09-14 6508
javascript设计模式之单体模式--飞机大战小蜜蜂游戏 单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。 单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。 单体模式的特点： 1，可以用来划分命名空间，从而清除全局变量所带来的危险。 2，利用分支技术来封装浏览器直接的差异。 3，可以把
js: Uncaught TypeError: Cannot read property '0' of undefined
12-27
具体来说，错误信息"Cannot read property '0' of undefined"表示你尝试读取一个未定义对象的索引为0的属性。 解决这个问题的方法有几种，具体取决于你的代码和使用情况。以下是一些常见的解决方法： 1. 检查变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值