如何用js使小球来回弹动

JavaScript024

如何用js使小球来回弹动,第1张

你好，

可以通过判断小球边缘和窗口高度来实现

例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。

来回弹动关键在于 对边缘的判断，和速度方向的判断和计算

新建html复制黏贴运行即可

<html>

<head>

<title>鼠标跟随效果</title>

<style type="text/css">

html {

overflow: hidden

}

body {

position: absolute

height: 100%

width: 100%

margin:0

padding:0

}

#screen {

background:#000

position: absolute

width: 100%

height: 100%

}

#screen span {

background: #fff

font-size: 0

overflow: hidden

width: 2px

height: 2px

}

</style>

<script type="text/javascript">

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m

var init = function (id, config) {

this.config = config || {}

this.obj = $(id)

sp = this.config.speed || 4

rs = this.config.animR || 1

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5}

this.setXY()

this.start()

}

init.prototype = {

setXY : function () {

var _this = this

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event

m.x = e.clientX

m.y = e.clientY

})

},

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn

OBJ[N++] = OO = new CObj(null, 0, 0)

for(var i=0i<360i+=20){

var O = OO

for(var j=10j<35j+=1){

var x = fn(i, j).x,

y = fn(i, j).y

OBJ[N++] = o = new CObj(O , x, y)

O = o

}

}

setInterval(function() {

for (var i = 0i <Ni++) OBJ[i].run()

}, 16)

}

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span")

this.css = obj.style

this.css.position = "absolute"

this.css.left = "-1000px"

this.css.zIndex = 1000 - N

document.getElementById("screen").appendChild(obj)

this.ddx = 0

this.ddy = 0

this.PX = 0

this.PY = 0

this.x = 0

this.y = 0

this.x0 = 0

this.y0 = 0

this.cx = cx

this.cy = cy

this.parent = p

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x

this.y0 = m.y

} else {

this.x0 = this.parent.x

this.y0 = this.parent.y

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp

this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp

this.css.left = Math.round(this.x) + 'px'

this.css.top = Math.round(this.y) + 'px'

}

return init

}()

</script></head>

<body>

<div id="screen"></div>

<script type="text/javascript">

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

</script></body>

</html>

帮你改了一下，能跑起来了。嗯.......你这个有一些语法问题和拼写不仔细的地方，估计太着急，有些粗心了~

<!DOCTYPE html>

<html>

<head>

<title>canvas</title>

<style>

*{

padding: 0

margin: 0

}

#container{

height: 80vh

width: 80vw

margin-top: 10vh

margin-left: 10vw

border: 1px solid #aaff66

}

</style>

</head>

<body>

<div id="container">

<canvas id="canvas"></canvas>

</div>

</body>

<script type="text/javascript">

window.onload = function() {

var ctx = document.getElementById('canvas').getContext('2d')

var circle = function(x, y, radius, fillCircle) {

ctx.beginPath()

ctx.arc(x, y, radius, 0, Math.PI * 2, false)

ctx.closePath()

ctx.fillStyle="green"

if (fillCircle) {

ctx.fill()

} else {

ctx.stroke()

}

}

var width=canvas.width = document.getElementById('container').offsetWidth

var height=canvas.height = document.getElementById('container').offsetHeight

var Ball=function(){

this.x=width/2

this.y=height/2

this.xSpeed = 5

this.ySpeed=0

}

Ball.prototype.move=function(){

this.x+=this.xSpeed

this.y+=this.ySpeed

if(this.x<0){

this.x=width

}else if(this.x>width){

this.x=0

}else if(this.y<0){

this.y=height

}else if(this.y>height){

this.y=0

}

}

Ball.prototype.draw=function(){

circle(this.x,this.y,10,true)

}

var ball= new Ball()

setInterval(function(){

ctx.clearRect(0,0,width,height)

ball.draw()

ball.move()

},30)

}

</script>

</html>