点击屏幕任意位置,出现京东狗,京东狗从点击的位置开始下落。京东狗掉下来的时候不断的变小,回弹的时候不断的变大,直至能量耗尽。
<!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,把当前的图片元素添加到box
box.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>