分享一个用html5实现炮弹自由落体的实例代码-H5教程-PHP中文网

首页

web前端

H5教程

分享一个用html5实现炮弹自由落体的实例代码

零下一度

May 06, 2017 am 11:51 AM

html5仿大炮炮弹的自由落体实现

html5的魅力相信大家不会陌生，希望各位大大浏览器们早点支持这个特性哦，，还有先吐槽一句，微信的那个broser简直弱爆了就简单的动画，比如滑动，就jquery的show(1000)，hide(1000)都卡的不行，还是qq浏览器的内核，qq浏览器，，，算了，，我先冷静下。。。。

还有就是前几天看到的这个！！！

分享一个用html5实现炮弹自由落体的实例代码

都不支持要他干嘛？？？？？

回归主题大炮

整体思路就是将每个打出来的炮弹看做一个对象，他的x，y转换成canvas的x，y,其中vecior就是个控制力度的一个选项后文会提到。

var cannonBall = function (x,y,vector){
        var gravity=0,
        that={
            x: x,
            y: y,
            removeMe:false,
            move: function (){
                vector.vy += gravity;
                gravity += 0.1;
                //模拟加速度
                that.x+=vector.vx;
                that.y+=vector.vy;
                if(that.y > canvas.height -150){
                    that.removeMe=true;
                }
            },
            draw: function (){
                ctx.beginPath();
                ctx.arc(that.x,that.y,5,0,Math.PI * 2);
                ctx.fill();
                ctx.closePath();
                }
             };

其中大炮炮弹的对象势必涉及到了向量计算，自己封装了个个方法，，有现成的Vector.js,但觉得太重（对于我们后端每次前端说不用模板，说太重，我们心里都默想重你妹呀，，哈哈哈），很简单，实现简单功能可以，大型游戏强烈建议使用现成的。

var vector2d= function (x,y){
    var vec={
        vx:x,
        vy:y,
        scale: function (scale){
            vec.vx*=scale;
            vec.vy*=scale;
        },
        add:function (vec2){
            vec.vx+=vec2.vx;
            vec.vy+=vec2.vy;
        },
        sub:function (vec2){
            vec.vx-=vec2.vx;
            vec.vy-=vec2.vy;
        },
        negate: function(){
            vec.vx=-vec.vx;
            vec.vy=-vec.vy;
        },
        length:function (){
            return Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy);
        },
        normalize:function (){
            var len=this.length();
            if(len){
                vec.vx /=len;
                vec.vy /=len;
            }
            return len;
        },
        rotate:function (angle){
            var vx = vec.vx;
            var vy = vec.vy;
            vec.vx = vx * Math.cos(angle) - vy * Math.sin(angle)
            vec.vy = vx * Math.sin(angle) + vy * Math.cos(angle);
        },
        toString:function(){
            return &#39;(&#39; + vec.vx.toFixed(3) + &#39;,&#39; + vec.vy.toFixed(3) + &#39;)&#39; ;
        }
    };
    return vec;
};

好了，接着就是个计算角度再加上setInterval了，，其他没啥说的，这里我着重说下canvas.save();和canvas.restore();这里稍微解释一下，
当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响

全部代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta author=&#39;gongbangwei&#39;>
    <title>大炮</title>
</head>
<body>
    <p id=&#39;lidu&#39;>
        <span>选择大炮的</span>
        <input type="radio" checked=&#39;checked&#39; value=&#39;25&#39;>大
        <input type="radio"  value=&#39;20&#39;>中
        <input type="radio"  value=&#39;15&#39;>小
    </p>

    <canvas id=&#39;can&#39; width="640" height="480" style=" border:2px solid">no support html5</canvas>
    <script src=&#39;vector2d.js&#39;></script>
    <script src=&#39;jquery/jquery-1.7.2.min.js&#39;></script>
    <script>
    var gameObj=[],
    canvas=document.getElementById(&#39;can&#39;),
    ctx=canvas.getContext(&#39;2d&#39;);

    var cannonBall = function (x,y,vector){
        var gravity=0,
        that={
            x: x,
            y: y,
            removeMe:false,
            move: function (){
                vector.vy += gravity;
                gravity += 0.1;
                //模拟加速度
                that.x+=vector.vx;
                that.y+=vector.vy;
                if(that.y > canvas.height -150){
                    that.removeMe=true;
                }
            },
            draw: function (){
                ctx.beginPath();
                ctx.arc(that.x,that.y,8,0,Math.PI * 2);
                ctx.fill();
                ctx.closePath();
                }
             };

        return that;
    }
    var cannon= function (x,y,lidu){
        var mx=0,
        my=0,
        angle=0,
        that={
            x: x,
            y: y,
            lidu:lidu,
            angle:0,
            removeMe:false,
            move:function (){
                angle=Math.atan2(my-that.y,mx-that.x);
            },
            draw:function(){
                ctx.save();
                ctx.lineWidth=2;
                ctx.translate(that.x,that.y);
                //平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）
                ctx.rotate(angle);
                //画布旋转
                ctx.strokeRect(0,-5,50,10);
                ctx.moveTo(0,0);
                ctx.beginPath();
                ctx.arc(0,0,15,0,Math.PI * 2 );
                ctx.fill();
                ctx.closePath();
                ctx.restore();
            }
        };//end that
        canvas.onmousedown = function(){
            //在这里调用向量的那个js
            var vec = vector2d(mx-that.x,my-that.y);
            vec.normalize();
            //console.log(lidu);
            vec.scale(lidu);
            gameObj.push(cannonBall(that.x,that.y,vec));
        }
        canvas.onmousemove = function (event){
            var bb= canvas.getBoundingClientRect();
            mx=(event.clientX - bb.left);
            my=(event.clientY - bb.top);
        };
        return that;
    };
    //画蓝田和草地
    var drawSkyAndGrass = function (){
        ctx.save();
        ctx.globalAlpha= 0.4;
        var linGrad=ctx.createLinearGradient(0,0,0,canvas.height);
        linGrad.addColorStop(0,&#39;#00BFFF&#39;);
        linGrad.addColorStop(0.5,&#39;white&#39;);
        linGrad.addColorStop(0.5,&#39;#55dd00&#39;);
        linGrad.addColorStop(1,&#39;white&#39;);
        ctx.fillStyle=linGrad;
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.restore();

    }
    ///////main/////////////
    var lidu=$(&#39;#lidu&#39;).find("input:checked").val();
    gameObj.push(cannon(50,canvas.height-150,lidu));
    $(&#39;#lidu&#39;).click(function (event){
        var cl=event.target;
        $(this).find(&#39;input&#39;).each(function(){
            $(this).attr(&#39;checked&#39;,false)
        });
        $(cl).attr(&#39;checked&#39;,true);
        lidu=$(cl).val();
        gameObj.splice(0,gameObj.length);
        gameObj.push(cannon(50,canvas.height-150,lidu));
    })

    setInterval( function (){
        drawSkyAndGrass();
        var gameObj_fresh=[];
        for (var i = 0; i < gameObj.length; i++) {
            gameObj[i].move();
            gameObj[i].draw();
            if(gameObj[i].removeMe === false){
                gameObj_fresh.push(gameObj[i]);
            }
        }
        gameObj=gameObj_fresh;
    },50);
    </script>
</body>
</html>

结束语

一个真正的前端绝不是ui，一个前端游戏工程师也绝对是个数学家。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上是分享一个用html5实现炮弹自由落体的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

See all articles