刚自学js在线求帮助为什么 setInterval()之后显示 mybul is not define呢。就是发射子弹啊

zhangqiuqiu1993 2015-08-27 12:02:05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<body onkeydown="do_something(event)">
<div id="game" style="background:pink;width:560px;height:560px;position:absolute;left:0px;top:0px">
<div id="tank" style="position:absolute;top:0px;left:0px;background-position:0px 0px;width:28px;height:28px;background:url('img/player1.bmp')">
</div>
</div>
</body>
<script type="text/javascript">

function getStyle(obj)
{
if(obj.currentStyle)
{
return obj.currentStyle;
}
else
{
return getComputedStyle(obj,false);
}
}

var tk=document.getElementById("tank");
function tank(x,y,direct)
{
this.t_x=x;
this.t_y=y;
this.direct=direct;

tk.style.left=this.t_x+"px";
tk.style.top=this.t_y+"px";
this.speed=14;
this.move=function move(e){
var key=e.keyCode;

switch(key){
//up 1 left 2 right 4 down 3
case 65:tk.style.backgroundPosition="0px 28px";//left
this.direct=2;
this.t_x-=this.speed;
break;
case 37:tk.style.backgroundPosition="0px 28px";
this.direct=2;
this.t_x-=this.speed;
break;
case 83:tk.style.backgroundPosition="0px 56px";//down
this.direct=3;
this.t_y+=this.speed;
break;
case 40:tk.style.backgroundPosition="0px 56px";
this.direct=3;
this.t_y+=this.speed;
break;
case 68:tk.style.backgroundPosition="0px 84px";//right
this.direct=4;
this.t_x+=this.speed;
break;
case 39:tk.style.backgroundPosition="0px 84px";
this.direct=4;
this.t_x+=this.speed;
break;
case 87:tk.style.backgroundPosition="0px 0px";//up
this.direct=1;
this.t_y-=this.speed;
break;
case 38:tk.style.backgroundPosition="0px 0px";
this.direct=1;
this.t_y-=this.speed;
break;
}

};
this.continue_move=function continue_move(){

var gm=document.getElementById("game");
var gmstyle=getStyle(gm);
var left=gmstyle.left;
left = parseInt(left.substr(0,left.length-2));
var top=gmstyle.top;
top = parseInt(top.substr(0,top.length-2));
var width=gmstyle.width;
width = parseInt(width.substr(0,width.length-2));
var height=gmstyle.height;
height = parseInt(height.substr(0,height.length-2));

var tx_max=left+width-28;
var tx_min=left;
var ty_min=top;
var ty_max=top+height-28;
if (this.t_x<=tx_max && this.t_x>=tx_min && this.t_y<=ty_max &&this.t_y>=ty_min) {

if (this.t_x<tx_max && this.t_x>tx_min &&this.t_y<=ty_max&&this.t_y>=ty_min) {
if (this.direct == 4 ) {
this.t_x+=this.speed;
} else if (this.direct==2) {
this.t_x-=this.speed;
};
}

if (this.t_y<ty_max && this.t_y>ty_min && this.t_x <=tx_max&&this.t_x>=tx_min) {
if (this.direct == 1) {
this.t_y-=this.speed;
}else if (this.direct == 3) {
this.t_y+=this.speed;
};
}
tk.style.left=this.t_x+"px";
tk.style.top=this.t_y+"px";
}
};
this.shoot= function shoot(){
var mybul=new bullet();
mybul.creat_bullet(this.t_x,this.t_y,this.direct);
setInterval("mybul.bullet_move()",200);
};
}

function bullet(){//子弹
this.speed=30;
var game=$("game");
this.b_element=document.createElement("div");

this.creat_bullet=function creat_bullet(parent_x,parent_y,parent_dict){
clearInterval(parent_y);
this.direct=parent_dict;
if (this.direct==1) {//up
this.t_x=parent_x+10;
this.t_y=parent_y-8;
this.position="0px 0px";
}else if (this.direct==2) {//left
this.t_x=parent_x-8;
this.t_y=parent_y+10;
this.position="16px 0px";
}
else if (this.direct==3) {//down
this.t_x=parent_x+10;
this.t_y=parent_y+28;
this.position="12px 0px";
}else if (this.direct==4) {//right
this.t_x=parent_x+28;
this.t_y=parent_y+10;
this.position="8px 0px";
};
this.b_element.style.backgroundImage="url(img/bullet.png)";
this.b_element.style.backgroundPosition=this.position;
this.b_element.style.position="absolute";
this.b_element.style.background="yellow";
this.b_element.style.left=this.t_x+"px";
this.b_element.style.top=this.t_y+"px";
this.b_element.style.width="8px";
this.b_element.style.height="8px";
this.b_element.id="1";
this.child =game.appendChild(this.b_element);

};

this.bullet_move=function bullet_move(){
alert(this.b_element.id);
if (this.direct==1) {//up
this.t_y-=this.speed;
}
else if (this.direct==2) {//left
this.t_x-=this.speed;
}else if (this.direct==3) {//down
this.t_y+=this.speed
}else if (this.direct==4) {//right
this.t_x+=this.speed
};
this.b_element.style.left==this.t_x+"px";
this.b_element.style.top=this.t_y+"px";
};
}

function $(id){
return document.getElementById(id);
}

function do_something(event){

if (event.keyCode==65||event.keyCode==83||event.keyCode==68||event.keyCode==87||event.keyCode==37||event.keyCode==40||event.keyCode==39||event.keyCode==38) {
mytank.move(event);//移动
}
else if (event.keyCode==32) {
alert(event.keyCode);
mytank.shoot();//发射子弹
};
}

var mytank=new tank(140,140,1);

var tt=setInterval("mytank.continue_move()",200);

</script>
</html>

...全文

244 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhangqiuqiu1993 2015-08-28

打赏
举报

zhangqiuqiu1993 2015-08-27

打赏
举报

哪位大牛帮我看下。我才刚学JS。求指导～

zhangqiuqiu1993 2015-08-27

打赏
举报

然后为什么我做的子弹创建一个 element 设置背景色设置上了。背景图片却没显示。

zhangqiuqiu1993 2015-08-27

打赏
举报

引用 4 楼 jslang 的回复:

[quote=引用 2 楼 zhangqiuqiu1993 的回复:] 然后为什么我做的子弹创建一个 element 设置背景色设置上了。背景图片却没显示。

this.b_element.style.background 属性是可以同时设置背景图片和背景色。这就把前面设置的 backgroundImage 属性给覆盖了要单独设置背景色应该是 this.b_element.style.backgroundColor = "yellow"; [/quote]好了哦。谢谢。

zhangqiuqiu1993 2015-08-27

打赏
举报

引用 4 楼 jslang 的回复:

[quote=引用 2 楼 zhangqiuqiu1993 的回复:] 然后为什么我做的子弹创建一个 element 设置背景色设置上了。背景图片却没显示。

this.b_element.style.background 属性是可以同时设置背景图片和背景色。这就把前面设置的 backgroundImage 属性给覆盖了要单独设置背景色应该是 this.b_element.style.backgroundColor = "yellow"; [/quote] 单独设置的时候图片也没出来啊。就是没出来才设置背景色的

天际的海浪 2015-08-27

打赏
举报

引用 2 楼 zhangqiuqiu1993 的回复:

然后为什么我做的子弹创建一个 element 设置背景色设置上了。背景图片却没显示。

this.b_element.style.background 属性是可以同时设置背景图片和背景色。这就把前面设置的 backgroundImage 属性给覆盖了要单独设置背景色应该是 this.b_element.style.backgroundColor = "yellow";

天际的海浪 2015-08-27

打赏
举报


	this.shoot = function shoot() {
		var mybul = new bullet();
		mybul.creat_bullet(this.t_x, this.t_y, this.direct);
		setInterval(function() {
			mybul.bullet_move();
		}, 200);
	};

网页特效在IT行业中是Web前端开发的重要组成部分，主要通过JavaScript、Flash等技术实现。这个压缩包文件名为"60个网页特效(js+flash)"，显然包含了许多实用的网页交互效果，旨在提升用户体验和网站视觉吸引力。 ...

JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来实现连续播放。VCD包装盒个性幻灯片实例源码是一个基于JavaScript实现的图片轮播组件，它可能包含自定义样式和交互...

js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法

但是前端一直报错：change is not defined可以看到定时器被调用了，但是没找到change。

为什么第一种情况容易出错呢？我们知道，setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中，写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向...