点击屏幕任意位置，出现京东狗，京东狗从点击的位置开始下落。京东狗掉下来的时候不断的变小，回弹的时候不断的变大，直至能量耗尽。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>京东狗掉下来的时候不断的变小，回弹的时候不断的变大</title>
</head>
<body onload="start()">
<div id="box" style="margin: auto;width: 850px;height: 600px;background-color: #cccccc"></div>
</body>
<script>//1,获得游戏盒子var box = document.getElementById('box');//2,创建一个狗的数组var dogBox=[];box.onclick=function (ev) {//1,鼠标点击后，创建一个狗的对象var dog = new Dog();//2,数据初始化dog.init(box,ev.clientX,ev.clientY);dogBox.push(dog);}function Dog() {var JUMP_UP = 0;var JUMP_DOWN = JUMP_UP+1;var state = JUMP_DOWN;var widthDog = 80;var heightDog = 80;//设置狗的坐标var dogX;var dogY;//狗的图片var dog;//狗跳下去的时间var time=0;this.init=function (box,x,y) {dogX = x;dogY = y;//1，创建一个图片元素dog = document.createElement('img');//2,设置图片元素的来源dog.src='../00images/02-1.png';//3,设置图片元素的大小dog.style.width=widthDog+"px";dog.style.height=heightDog+"px";//4,设置图片的坐标dog.style.position="absolute";dog.style.left=dogX+"px";dog.style.top=dogY+"px";//5,把当前的图片元素添加到boxbox.appendChild(dog);}this.run=function () {switch (state) {case JUMP_DOWN:time++;//1,不断的更改狗的纵坐标dogY = dogY + 1 / 2 * 10 * time * time;widthDog = widthDog-5;heightDog = heightDog-5;dog.style.width=widthDog+"px";dog.style.height=heightDog+"px";if (dogY > 600) {//设置纵坐标dogY = 550;dog.style.top = dogY + "px";//更改运动状态if(time<=4){state = -1;}else {state = JUMP_UP;}//能量损耗time = time -1;}else {dog.style.top = dogY + "px";}break;case JUMP_UP:time --;dogY = dogY - 1 / 2 * 10 * time * time;widthDog = widthDog+5;heightDog = heightDog+5;dog.style.width=widthDog+"px";dog.style.height=heightDog+"px";if(time<=0) {state = JUMP_DOWN;}dog.style.top = dogY + "px";break;}}}function start() {setInterval('run()',100);}function run() {//1,获得狗dogBox.forEach(function (dog) {dog.run();})}</script>
</html>