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>

图片素材:

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

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

时间: 2022-01-11

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

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

jQuery自定义动画函数实例详解(附demo源码)

本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d

利用JQuery的load函数动态加载其它页面的内容的实现代码

在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JQuery - Load</title> <link rel="stylesheet" media="al

分享一些常用的jQuery动画事件和动画函数

部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa

jQuery学习笔记之jQuery的动画

一.系统预定义的动画函数 1.显示隐藏函数 show(); //显示元素(同时增加宽.高.不透明度) hide(); //隐藏元素 执行hide()隐藏界面元素,相当于将css样式中的display:none. 我们也可以在函数中加入参数,具体如下: show("slow"); 除了slow取值外,还可以设置为normal,fast,分别代表时间为600,400,200毫秒 我们也可以加如具体时间取值.具体如下: slow(1000); 这样代表时间完全显示出元素的时间间隔为1000毫

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

深入理解jquery自定义动画animate()

在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1

利用jquery动画特效和css打造的侧边弹出垂直导航

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

CSS3结合jQuery实现动画效果及回调函数的实例

写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部. 他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了. 听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果.仅供参考: 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8

利用jQuery的$.event.fix函数统一浏览器event事件处理

比如得到触发事件的元素引用在IE浏览器下是:event.srcElement,在FF浏览器下则是:event.target,另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX,而IE浏览器下的处理方式又是不一样的,当然还有一些像"阻止事件冒泡"以及"取消浏览器默认行为"等,不同浏览器也有不同的处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断处理.现在jQuery为我们提供了统一兼容处理函数$.even