原生射流研究…结合html5制作小飞龙的简易跳球

演示地址：http://runjs.cn/detail/yjpvqhal

超文本标记语言代码

超文本标记语言头元字符集='utf-8'/标题小飞龙的跳球/title/head body on load=' init()' canvas id=' game ' width=' 400 ' height=' 400 ' style=' border :1 px solid # C3 '你的游览器不支持html5的画布元素，请升级到IE9或使用火狐、铬这类高级的智能游览器！/canvas脚本var canvas=文档。getelementbyid(' game ')；var CTX=画布。get context(' 2d ')；var grad/盒子的起始位置和大小以及球的半径var box={x:20，y:20，w:350，h:350，r :20 }；//球的中心位置和偏移位置var inbox={//box内的限制范围bx:(box.w box.x-box.r)，by:(box.h box.y-box.r)，ix:box.x (box.r*2)，iy : box。y(方框。r * 2)}；//球的初始位置和变化位置var ball={x:50，y:50，vx:4，vy :8 }；var img=new Image()；img。src=' images/丘丘。png '；var hue=[[255，0，0]，[255，255，0]，[0，255，0]，[0，255，255]，[0，0，255]，[255，0，0]]；函数init(){ grad=CTX。createlinegradient(框。x，box.y，box.w，box。h)；for(var I=0；ihue.lengthi ){ var color='rgb('色相[i][0]'，'色相[i][1]'，'色相[一][二]')'；grad.addColorStop(i/hue.length，color)；} CTX。线宽=框。r；ctx.fillStyle='rgb(200，0，50)'；CTX . FillStyle=grad move ball()；setInterval(moveBall，50)；} //碰撞检测并重新确定球的位置函数moveBallendCheck(){ var NX=ball。x球。VX；var ny=ball。y球。vy；if(nx inbox.bx){//当前x大于上边框边界球。VX=-球。VX；//球的变化x坐标当前当前变化x坐标的负数NX=inbox.bx//当前位置为上边框的位置} if(nx inbox.ix){//当前位置小于下边框NX=inbox.ix//当前位置为下边框的x球。VX=-球。VX；//球的变化x坐标翻转取负} if(ny收件箱。by){ ny=收件箱。由；球。vy=-球。vy；} if(ny收件箱。iy){ ny=收件箱。iy；球。vy=-球。vy；} ball.x=nxball.y=ny}函数moveBall(){ ctx.clearRect(box.x，box.y，box.w，box。h)；moveBallendCheck()；CTX。begin path()；//控制台。圆木(球。x ' \ t '球。y ' t球。VX球。vy ' \ t '(球。x-box。r)' \ t '(球。y型箱。r))；ctx.drawImage(img)，(ball.x-box.r)，(ball。y型箱。r))；ctx.fillRect(box.x，box.y，box.r，box。h)；ctx.fillRect((box.x box.w-box.r)，box.y，box.r，box。h)；ctx.fillRect(box.x，box.y，box.w，box。r)；ctx.fillRect(box.x，(box.y box.h-box.r)，box.w，box。r)；CTX。close path()；CTX。fill()；}/脚本/正文/html演示图片

以上所述就是本文的全部代码，希望大家能够喜欢。