JavaScript中的弹球
Bounce ball in JavaScript
本文关键字:JavaScript 更新时间:2023-09-26
弹跳球不会停止弹跳
每次我这样做,我都会遇到一个非常烦人的问题——球一直在底部反弹。
请在下面找到我的jsfiddle代码链接
http://jsfiddle.net/elankeeran/xe5wJ/
(function(){
var bounceBall = {} || bounceBall;
bounceBall = {
container: {
obj : null,
width : 0,
height : 0,
interval : 0
},
ball : {
obj : null,
top : 0,
left : 0,
height : 0,
width : 0,
maxWidth : 0,
maxHeight : 0,
dx : 10,
dy : 30,
stopBall : false,
moveRight : true,
moveDown : true,
counter : 0
},
init: function(){
console.log("BounceBall Init");
var self = this;
var myContainer
if(document.getElementById('container'))
myContainer = document.getElementById('container');
myContainer.addEventListener('click', self.handleClick, false);
self.setBall(myContainer);
self.ball.width = self.ball.obj.clientWidth;
self.ball.height = self.ball.obj.clientHeight;
},
setBall : function(myContainer){
var ballDiv = document.createElement("div");
this.container.obj = myContainer;
this.container.width = myContainer.clientWidth;
this.container.height =myContainer.clientHeight;
ballDiv.className= "ball";
this.ball.obj = ballDiv;
myContainer.appendChild(ballDiv);
},
handleClick : function(event){
console.log(bounceBall.container.height + " " + event.y);
bounceBall.ball.top = bounceBall.container.height;
bounceBall.ball.maxHeight = event.y;
bounceBall.ball.maxWidth = event.x;
bounceBall.ball.obj.style.top = bounceBall.ball.maxHeight + 'px';
bounceBall.ball.obj.style.left = bounceBall.ball.maxWidth + 'px';
bounceBall.container.interval = setInterval(function(){bounceBall.move(); },100);
},
move : function(){
if (this.ball.top >= this.ball.maxHeight){
this.ball.moveDown = false;
}
if (this.ball.top <= 0){
this.ball.moveDown = true;
this.ball.maxHeight = this.ball.maxHeight -20;
}
if (this.ball.moveDown){
this.ball.top = this.ball.top + this.ball.dy;
} else {
this.ball.top = this.ball.top - this.ball.dy;
}
this.ball.obj.style.top = this.container.height - this.ball.top + 'px';
}
};
bounceBall.init();
})();
如果有人能指出我的错误,我将不胜感激。
以下代码不考虑球的高度:
if (this.ball.top <= 0){
如果你把它改成这个-它应该工作:
if ((this.ball.top - 20) <= 0){
这是我编辑代码的链接
if (this.ball.top >= this.ball.maxHeight){
this.ball.moveDown = false;
}
if ((this.ball.top - 20) <= 0){
this.ball.moveDown = true;
this.ball.maxHeight = this.ball.maxHeight -20;
}
if (this.ball.moveDown){
this.ball.top = this.ball.top + this.ball.dy;
clearInterval(bounceBall.container.interval);
} else {
this.ball.top = this.ball.top - this.ball.dy;
}
this.ball.obj.style.top = this.container.height - this.ball.top + 'px';
更改此代码。
请检查一下http://jsfiddle.net/xe5wJ/16/
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在Javascript中将JSon对象转换为数组
- Javascript生成的表单未提交
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量