Question

我正在用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>

所以，你可以看到我到目前为止创造了两个物体，并且玩家在任意点停止下降。我认为在这个阶段碰撞不会太困难，但是一旦我开始添加更多，我觉得它会变得更加困难。我不会为对象的每个实例使用具有相同图像的对象实例，因此在某些时候我将更改myobject函数以便能够接受图像作为参数，然后检查碰撞会有点棘手。我还打算将它变成一个侧面滚动条，所以一旦一个地图被点击，它就会变成下一个区域，这将导致性能问题。如果我在整个游戏中检查每个对象上的碰撞，我想每件事情都会变慢。什么是限制检查碰撞次数的最佳方法？显然，如果对象不在屏幕上，则无需检查它，但有没有办法限制它。我正在考虑为游戏的每一帧制作一个数组，并用它的对象填充该数组。然后，只检查播放器当前所在帧的阵列。这是否可行或仍会导致太多问题？任何帮助是极大的赞赏。

简单的JavaScript游戏中的碰撞

0 个答案: