jQuery实现小球点击发射动画

今天花了两个小时使用jQuery写了一个小动画游戏，如下图所示，通过鼠标点击，发射球。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #main {
                width: 500px;
                height: 650px;
                border: 3px solid #efefef;
                margin: 30px auto;
                position: relative;
            }

            #fireSpace {
                width: 100%;
                height: 400px;
                position: absolute;
                top: 0;
                left: 0;

            }

            #gun {
                display: block;
                width: 60px;
                height: 60px;
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translate(-50%, 0);
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="fireSpace">

            </div>
            <img src="./gun.png" id="gun">
        </div>
    </body>
</html>

<script src="./jquery.js"></script>
<script>
    let initX = 0,
        initY = 300,
        initDeg = 90,
        thenDeg, gunX, gunY, boo, x = 0,
        y = 300,
        nx, ny, dg = 90,
        ndg, rdg, isLeft0, isLeft;
    document.getElementById("fireSpace").onmousemove = function(e) {
        if (e.offsetX - 220 >= 0) {
            // nx = e.offsetX - 220;
            // ny = 600-e.offsetY;
            gunX = e.offsetX - 220;
            isLeft = false;
        } else if (e.offsetX - 220 <= 0) {
            gunX = 220 - e.offsetX;
            isLeft = true;
        }
        gunY = 650 - e.offsetY;
        if (e.offsetX - 220 == 0) {
            thenDeg = 90;
        } else {
            thenDeg = gunY - gunX >= 0 ? (90 - Math.asin(gunX / gunY) * 180 / Math.PI) : (Math.asin(gunY / gunX) *
                180 / Math.PI);
            // thenDeg = Math.asin(gunY / gunX) * 180 / Math.PI;
        }
        if (initX - 220 == 0) {
            initDeg = 90;
        } else {
            initDeg = initY - initX >= 0 ? (90 - Math.asin(initX / initY) * 180 / Math.PI) : (Math.asin(initY /
                    initX) *
                180 / Math.PI);
        }
        if (initY <= 3) {
            initDeg = 0;
        }
        if (gunY <= 3) {
            thenDeg = 0;
        }
        if (!isLeft0 && isLeft) {
            rdg = -(180 - initDeg - thenDeg);
        } else if (isLeft0 && !isLeft) {
            rdg = 180 - initDeg - thenDeg;
        } else if (isLeft0 && isLeft) {
            rdg = (thenDeg - initDeg)
        } else if (!isLeft0 && !isLeft) {
            rdg = (initDeg - thenDeg)
        }
        document.getElementById("gun").style.transform = "translate(-50%, 0) rotate(" + rdg + "deg)";
        x = nx;
        y = ny;
        isLeft0 = isLeft;
    }
    let fireX,fireY,iX=0,iY=0
    document.getElementById("fireSpace").onclick = function(e) {
        fireX = e.offsetX;
        fireY = e.offsetY;
        let boll = document.createElement("img");
        boll.style.width = "50px";
        boll.style.height = "50px";
        boll.setAttribute("src", "./boll.png");
        boll.style.position = "absolute";
        boll.style.bottom = "0";
        boll.style.left = "50%";
        boll.style.transform = "translate(-40%,0)";
        boll.style.zIndex = "-1";
        document.getElementById("main").appendChild(boll);
        $(boll).animate({
            top: fireY,
            left: fireX
        }, 1000);
        setTimeout(function() {
            boll.parentNode.removeChild(boll);
        }, 1000);
    }
</script>

图片素材：

感兴趣的的小伙伴可以去试试。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用jQuery的动画函数animate实现豌豆发射效果

    利用jQuery的动画函数animate实现豌豆发射效果

    先来看看效果图 豌豆射手,草坪还有子弹都是现成的图片, 1. jQuery是库还是框架? jQuery可以说是现在最流行的一个js类库,而非框架. 之前在知乎上看到有人说了这样一句话: You call library. Framework calls you. 我深以为然,字面意思大概就是你可以无约束地使用类库,却需要在各种限制条件下使用一个框架. 我私以为,js 库指的是直接和document文档元素交互的一个API,你可以直接引用库,让它为你服务.而框架是偏向于架构的层次,你如果想要使用框

  • jQuery实现小球点击发射动画

    jQuery实现小球点击发射动画

    今天花了两个小时使用jQuery写了一个小动画游戏,如下图所示,通过鼠标点击,发射球. 代码: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <style>             #main {                 width: 500px;

  • jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

    jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

    本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • jQuery实现的背景颜色渐变动画效果示例

    本文实例讲述了jQuery实现的背景颜色渐变动画效果.分享给大家供大家参考,具体如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c

  • 利用原生JS与jQuery实现数字线性变化的动画

    前言 大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据.于是有了下文. 在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件. 数字线性变化的原理很简单,就是让数字增量变化,并循环动画. 原生JS版 首先获取DOM元素.为了兼容到IE6,兼容性方法如下: var domUtil = { // 获取DOM元素 get: function(query) { var _this = this; if(

  • jQuery实现菜单感应鼠标滑动动画效果的方法

    本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • 原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

    原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

    本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果.分享给大家供大家参考,具体如下: 实现方法: 每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style type

  • jQuery实现的鼠标响应缓冲动画效果示例

    jQuery实现的鼠标响应缓冲动画效果示例

    本文实例讲述了jQuery实现的鼠标响应缓冲动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js&q

  • jQuery实现碰到边缘反弹的动画效果

    先上效果图: 录出来有点卡顿的赶脚,实际上还是挺顺畅的. 1.HTML: <div class="box"></div> 2.CSS: body{ background:skyblue } .box{ position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background: white; } 3.JS: $(function(){ var obj=$(".bo

  • jQuery实现的模仿雨滴下落动画效果

    jQuery实现的模仿雨滴下落动画效果

    本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/ } .com{ border-radius: 0 50% 50% 50%; background: skyblue; transform: rotate(45deg); position: absolute; top: 0

  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

随机推荐