HTML5를 사용하여 포탄의 자유낙하를 구현하는 예제 코드 공유

html5대포탄의 자유낙하 모방

모두가 html5의 매력에 익숙하리라 믿습니다. 하루빨리 모든 브라우저에서 이 기능을 지원하길 바라며, 먼저 불평합니다. jquery의 슬라이딩, show(1000) 및 hide(1000)와 같은 간단한 애니메이션이 작동하지 않고 여전히 작동하지 않습니다. 일.QQ 브라우저의 핵심, QQ 브라우저,,, 잊어버리고 먼저 진정하겠습니다. . . .

그리고 며칠 전에 본 이거! ! !

지지하지 않는다면 왜 그 사람을 원하시나요? ? ? ? ?

테마 대포로 돌아가기

전체적인 아이디어는 발사된 각 대포알을 객체로 처리하고 해당 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();
                }
             };

대포알의 개체에는 벡터 계산이 포함됩니다. 각 메서드를 직접 캡슐화했습니다.js이지만 너무 무겁다고 생각합니다(우리 백엔드의 경우 프런트엔드에서 템플릿이 필요하지 않고 너무 무겁다고 말할 때마다 우리는 조용히 당신의 여동생을 생각합니다. 하하하) 매우 간단하고 간단하게 구현할 수 있습니다. 대형 게임에서는 기성품을 사용하는 것이 좋습니다. <… ( ; 이러한 작업을 수행하기 위해 캔버스 메서드를 사용하면 실제로는 전체 캔버스에 대해 작업을 수행하게 되며 캔버스의 모든 요소가 영향을 받게 되므로 작업 전에 canvas.save()를 호출하여 현재 캔버스를 저장합니다.

상태

작업 후 이전에 저장한 상태를 빼므로 다른 요소에 영향을 주지 않습니다

모든 코드

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 '(' + vec.vx.toFixed(3) + ',' + vec.vy.toFixed(3) + ')' ;
        }
    };
    return vec;
};

결론실제 프론트엔드는 확실히 UI가 아니며, 프론트엔드 게임 엔지니어는 확실히 수학자입니다.

[관련 추천]

1.

무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5를 사용하여 포탄의 자유낙하를 구현하는 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!