BUG在冰属性豌豆射手上,运行代码,按"j"键,冰豌豆射手会发出子弹!
BUG1:连续按3次"j"键,会有1发子弹清除不了,并且定格在背景图片上
BUG2:射手往前走1格,发生子弹后,立即往上移动一格,会发现先前的子弹消失位置不对
BUG3:射手发射的子弹的移动速度,越到后面,速度自动在增加,感觉越快了
代码如下:
<!DOCTYPE html>
Stage1:KeyDown素材实验阶段
<script>
var id;
var zuo;
var shang;
function init(){
id = document.getElementById("snowPea");
alert(id);
}
function moving(key){
zuo = parseInt(id.currentStyle.left);
shang = parseInt(id.currentStyle.top);
//var useKey;
if(key.keyCode == 37 || key.keyCode == 65){
//alert(useKey);
zuo -= 10;
id.style.left = zuo +"px";
//alert(key.keyCode);
/*
if(left < 20){
id.style.left = 11 + "px";
}
if(left == 250){
alert(1);
}
*/
}else if(key.keyCode == 38 || key.keyCode == 87){
shang -= 10;
id.style.top = shang +"px";
//alert(key.keyCode);
/*
if(top < 20){
id.style.top = 16 + "px";
}
if(top == 560){
alert(3);
}
if(top == 120){
alert(4);
}
*/
}else if(key.keyCode == 39 || key.keyCode == 68){
zuo += 10;
id.style.left = zuo +"px";
//alert(key.keyCode);
/*
if(left > 560){
id.style.left = 559 + "px";
}
if(left == 200){
alert(7);
}
*/
}else if(key.keyCode == 40 || key.keyCode == 83){
shang += 10;
id.style.top = shang +"px";
//alert(key.keyCode);
/*
if(top > 560){
id.style.top = 564 + "px";
}
*/
}
}
//子弹的初始X轴位置
var bulletXing;
//子弹的初始Y轴位置
var bulletYing;
//当前界面中的子弹对象
var currBulleting;
var currBulled;
//当前子弹的计时器
var timering;
var timered;
//监测值
var jcz = false;
//取出背景图片的宽度值
var bgwidth;
//获取僵尸的纵坐标
var zomY;
function fire(keys){
//alert(20);
bgwidth = parseInt(document.getElementById("background").currentStyle.width);
//alert(bgwidth);
zomY = parseInt(document.getElementById("zombie").currentStyle.top);
bulletXing = parseInt(id.currentStyle.left) + 71;
bulletYing = parseInt(id.currentStyle.top);
//alert(bulletYing);
if(jcz){
//alert(30);
//jcz = false;
if(keys.keyCode == 106){
//alert(keys.keyCode);
//动态创建一个img元素来装子弹
currBulleting = document.createElement("img");
//设置标签SRC属性
currBulleting.src = "image/Plants/SnowPeashooterBullet.gif";
//设置元素位置
currBulleting.style.position = "absolute";
currBulleting.style.left = bulletXing + "px";
currBulleting.style.top = bulletYing + "px";
//插入到背景层里
document.getElementById("background").appendChild(currBulleting);
//设置计算器
timering = setInterval(function(){
//获取子弹当前位置
bulletXing = parseInt(currBulleting.style.left) + 10;
//移动子弹位置
currBulleting.style.left = bulletXing + "px";
//alert(10);
//判断是否碰到僵尸
if((bulletXing >= left && zomY <= bulletYing && bulletYing <= zomY + 140)||bulletXing >= bgwidth){ //140是僵尸图片的高度,也就是僵尸的高度!
//如果碰到,子弹消失
//如果子弹没碰到,但超出了背景图的范围,子弹也要消失
document.getElementById("background").removeChild(currBulleting);
clearInterval(timering);
//如果子弹没碰到,但按了第2发子弹,第1发子弹不发生变化
/* }else if(bulletXing >= 1400){
function seer(){
document.getElementById("background").removeChild(currBulleting);
clearInterval(timering);
jcz = true;
}
/ //如果子弹没碰到,但超出了背景图的范围,子弹也要消失
/ }else if(bulletXing >= bgwidth){
alert(1200);
document.getElementById("background").removeChild(currBulleting);
alert(1300);
clearInterval(timering); /
}
},48);
}
}else{
//alert(40);
//jcz = true;
if(keys.keyCode == 106){
//alert(keys.keyCode);
//动态创建一个img元素来装子弹
currBulled = document.createElement("img");
//设置标签SRC属性
currBulled.src = "image/Plants/SnowPeashooterBullet.gif";
//设置元素位置
currBulled.style.position = "absolute";
currBulled.style.left = bulletXing + "px";
currBulled.style.top = bulletYing + "px";
//插入到背景层里
document.getElementById("background").appendChild(currBulled);
//设置计算器
timered = setInterval(function(){
//获取子弹当前位置
bulletXing = parseInt(currBulled.style.left) + 10;
//移动子弹位置
currBulled.style.left = bulletXing + "px";
//alert(10);
//判断是否碰到僵尸
if((bulletXing >= left && zomY <= bulletYing && bulletYing <= zomY + 140) || bulletXing >= bgwidth){
//如果碰到,子弹消失
document.getElementById("background").removeChild(currBulled);
clearInterval(timered);
//如果子弹没碰到,但超出了背景图的范围,子弹也要消失
/ }else if(bulletXing >= bgwidth){
alert(1500);
document.getElementById("background").removeChild(currBulled);
alert(1600);
clearInterval(timered); */
}
},48);
}
}
jcz = !jcz;
}
<!--
//僵尸距离左顶点的位置
var left = 1050;
//僵尸距离上顶点的位置
var top = 10;
//步幅
var step = 5;
//植物距离左顶点位置
var plantLeft = 388;
//植物宽度
var plantWidth = 65;
//标识植物是否死亡
var plantIsDead = false;
//标识僵尸的状态,行走还是在吃
var isEating = false;
/*
var pos = 1050;
*/
var idNo;
function moved(){
//alert(1);
var zom = document.getElementById("zombie");
idNo = setInterval(function(){
if(!plantIsDead && left <= plantLeft + plantWidth){
//如果没有吃
//alert(2);
if(!isEating){
//alert(id);
//表示在吃植物,换背景
//zom.style.id = "zombieEat";
zom.src = "image/Zombies/Zombie/ZombieAttack.gif";
//alert(3)
}
}else{
left -= step;
zom.style.left = left + "px";
}
}
,500);
//alert(id);
}
/* var idNo;
function go(){
var zom = document.getElementById("zombie");
//判断是否遭遇植物
if(!plantIsDead && left <= plantLeft + plantWidth){
//如果没有在吃
if(!isEating){
//表示在吃植物,换背景
zom.src = "image/Zombies/Zombie/ZombieAttack.gif";
}
}else{
//移动
left -= step;
zom.style.left = left + "px";
}
//setInterval("go()",500);
idNo = setTimeout("go()",500);
}
*/
function stopd(){
clearInterval(idNo);
}
//子弹的初始X轴位置
var bulletX = 403;
//当前界面中的子弹对象
var currBullet;
//当前子弹的计时器
var timer;
function shoot(){
//动态创建一个img元素来装子弹
currBullet = document.createElement("img");
//设置标签SRC属性
currBullet.src = "image/Plants/PeashooterBullet.gif";
//设置元素位置
currBullet.style.position = "absolute";
currBullet.style.left = bulletX + "px";
currBullet.style.top = 105 + "px";
//插入到背景层里
document.getElementById("background").appendChild(currBullet);
//设置计算器
timer = setInterval("moveBullet()",48);
}
function moveBullet(){
//获取子弹当前位置
var bulletX = parseInt(currBullet.style.left) + 10;
//移动子弹位置
currBullet.style.left = bulletX + "px";
//判断是否碰到僵尸
if(bulletX >= left){
//如果碰到,子弹消失,停止计算器,重新调用shoot方法
document.getElementById("background").removeChild(currBullet);
clearInterval(timer);
shoot();
}
}
-->
</script>
<style type="text/css">
/*背景图*/
#background{
width:1400px;
height:600px;
/*通过滤镜拉伸图片*/
background:url("image/interface/background1.jpg");
}
#zombie{
/*
background-image:url('image/Zombies/Zombie/Zombie.gif');
*/
/*设置层的尺寸*/
width:85px;
height:140px;
/*设置僵尸的初始位置(绝对定位)*/
position:absolute;
top:10px;
left:1050px;
}
/*
#zombieEat{
background-image:url('image/Zombies/Zombie/ZombieAttack.gif');
}
*/
#wallNut{
/*设置这个层的背景图*/
background-image:url('image/Plants/WallNut/WallNut.gif');
/*设置层的尺寸*/
width:65px;
height:71px;
/*设置植物的初始位置(绝对定位)*/
position:absolute;
top:90px;
left:428px;
}
#peashooter{
/*设置这个层的背景图*/
background-image:url('image/Plants/Peashooter/Peashooter.gif');
/*设置层的尺寸*/
width:70px;
height:69px;
/*设置植物的初始位置(绝对定位)*/
position:absolute;
top:100px;
left:348px;
}
#snowPea{
/*设置这个层的背景图*/
background-image:url('image/Plants/SnowPea/SnowPea.gif');
/*设置层的尺寸*/
width:71px;
height:69px;
/*设置植物的初始位置(绝对定位)*/
position:absolute;
top:190px;
left:428px;
}
#threepeater{
/*设置这个层的背景图*/
background-image:url('image/Plants/Threepeater/Threepeater.gif');
/*设置层的尺寸*/
width:74px;
height:79px;
/*设置植物的初始位置(绝对定位)*/
position:absolute;
top:285px;
left:428px;
}
</style>
<!-- 背景层 -->
<!--
-->