实现京东狗下落的动画

    点击屏幕任意位置，出现京东狗，京东狗从点击的位置开始下落。京东狗掉下来的时候不断的变小，回弹的时候不断的变大，直至能量耗尽。

<!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>

实现京东狗下落的动画相关推荐

手把手教你solidworks重力下落物体动画制作
手把手教你solidworks重力下落物体动画制作 1.首先建立装配体,导入圆柱和圆弧面. 2.对它们进行装配,配合方式为相切,配合的面为圆柱的圆弧面和绿色零件的弧面.然后再用宽度配合,宽度选择为圆柱 ...
css3小狗滑滑梯动画js特效
下载地址 css3代码实现的小狗滑滑梯动画特效 dd:
74行代码实现浪漫的红心下落的动画效果
七夕节快到了,让我们使用 74 行的纯 HTML/JavaScript 代码,实现一个浪漫的红心下落的动画效果吧. 将下列代码粘贴到一个空白的 html 文件里,用浏览器本地打开即可. <htm ...
模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）
接着上篇微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现京东新闻上下动画实现想着 ...
CSS小球下落回弹动画效果
视频被横向拉伸了,实际效果小球是圆的!鼠标放在 tube 区域中时小球运动,划出时运动暂停,点击重新开始运动. 屏幕录制2022-05-04 14.22.09 <template>< ...
买粮油也能玩出新花样？京东超市携手金龙鱼带来狗年礼盒！
转眼间,离过年只有一个月了! 不知道大家回家的票都抢到了吗?口袋里的钱够不够发红包?答应带回家的女朋友有着落了吗? 其实,回家本身就是一种幸福.不管在外面过得是好是坏,回家吃一顿团圆饭,和家人们在一起 ...
react-native 金币彩带雨下落动画
日常项目中,经常遇到一些表情雨/金币雨/彩带雨等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在onDraw里绘制下落的过程,具体可以看下我的这篇github地 ...
android金币下落动画,react-native 金币彩带雨下落动画
日常项目中,经常遇到一些表情雨/金币雨/彩带雨等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在onDraw里绘制下落的过程,具体可以看下我的这篇github地 ...
青铜到王者，京东数科这个AI机器人组织有多野？
文 | 文岚人物 | 京东数科智能机器人产品部图 | 段雅婧提供这样与世无争.共建共享共荣的牧歌式关系,就需要一群心底善良又疯狂的爸爸,每天耳提面命地对自己机器人儿子授以多行好事且莫作恶的教诲. ...

实现京东狗下落的动画

实现京东狗下落的动画相关推荐

最新文章

热门文章