0

私は JavaScript で簡単なゲームを書いていますが、プレイヤーと世界のオブジェクトの間の衝突を処理する最善の方法は何だろうと思っています。

<script>

var isJumping = false;
var isFalling = false; 
var w = 1;
var recwidth = 400;
var recheight = 400;
var xpos = 50;
var ypos = 279;
window.onload = function() {
    var FPS = 30;
    var ground = new myObject();
    setInterval(function() {
        clear();
        draw();
        ground.draw(0, 325);
        ground.draw(125,325)
    },     1000/FPS);
};

function myObject(){ 
    this.draw = function drawground(groundx, groundy){
        var canvas = document.getElementById('canvas')
        var  context = canvas.getContext('2d');
        //context.fillRect(xpos,ypos,100,100);
        var img=new Image()
        img.src="ground.png"
        img.onload = function() { 
        context.drawImage(img,groundx,groundy)}

    }

};




function jump()
{
    var t=.1;
    isJumping=true;

    var jumpint= setInterval(function() {
        yup = 12*t-(5*t*t);
        ypos= ypos - yup;
        t = t + .1
        if(yup < 0)
        {
            isJumping = false;
            isFalling = true;
            clearInterval(jumpint);
            jumpint = 0;
            fall();
            return;
        }

    }, 20);

}

function fall()
{
    t=.10
    var fallint= setInterval(function() {
        ydown = (5*t*t);
        ypos= ypos + ydown;
        t = t + .1
        if(ypos > 275)
        {
            isFalling == false;
            clearInterval(fallint);
            fallint = 0;
            return;
        }

    }, 20);

}



function changex(x){
    xpos = xpos + (x);
    //clear();
    //draw();
}
function changey(y){
    ypos = ypos + (y);
    //clear();
    //draw();
}



function draw(){
    var canvas = document.getElementById('canvas')
    var  context = canvas.getContext('2d');

    var img=new Image()
    img.src="character.png"
    img.onload = function() { 
        context.drawImage(img,xpos,ypos)}

}

function clear(){
    var canvas = document.getElementById('canvas')
    var  context = canvas.getContext('2d');
    context.clearRect(0,0, canvas.width, canvas.height);
}


document.onkeydown = function(event) {
    var keyCode; 

    if(event == null)
    {
        keyCode = window.event.keyCode; 
    }
    else 
    {
         keyCode = event.keyCode; 
    }

    switch(keyCode)
    {
    // left 
    case 37:
        //left
        changex(-5);
        break; 

    // up 
    case 38:
        // action when pressing up key
        jump();
        break; 

    // right 
    case 39:
        // action when pressing right key
        changex(5);
        break; 

    // down
    case 40:
        // action when pressing down key
        changey(5);
        break; 

    default: 
        break; 
    } 
}
</script>

ご覧のとおり、これまでに 2 つのオブジェクトを作成しており、プレイヤーは任意のポイントで落下を停止しています。この段階では衝突はそれほど難しくないと思いますが、追加を開始すると、より困難になると感じます。オブジェクトのインスタンスごとに同じ画像を持つオブジェクトのインスタンスを使用するつもりはないので、ある時点で myobject 関数を変更して、画像をパラメーターとして受け入れることができるようにします。衝突のチェックはもう少しトリッキーになります。また、これを横スクロールにすることも計画しているため、マップの端に到達すると次のエリアに移動するため、パフォーマンスの問題が発生します。ゲーム全体のすべてのオブジェクトの衝突を間隔ごとにチェックすると、処理が遅くなると思います。チェックされる衝突の数を制限する最良の方法は何ですか? 明らかに、オブジェクトが画面上にない場合はチェックする必要はありませんが、それを制限する方法はありますか。ゲームのフレームごとに配列を作成し、その配列にオブジェクトを入力することを考えています。次に、プレーヤーが現在いるフレームの配列のみを確認します。これは実行可能ですか、それともまだ多くの問題を引き起こしますか? どんな助けでも大歓迎です。これは実現可能ですか、それともまだ多くの問題を引き起こしますか? どんな助けでも大歓迎です。これは実現可能ですか、それともまだ多くの問題を引き起こしますか? どんな助けでも大歓迎です。

4

0 に答える 0