Fatal编程技术网
  • javascript/
  • 用javascript编写2D游戏物理，而不是平地和旋转

用javascript编写2D游戏物理，而不是平地和旋转

javascript

用javascript编写2D游戏物理，而不是平地和旋转,javascript,2d,game-physics,Javascript,2d,Game Physics,我在我的网络编程课程中有一个小项目，我应该用javascript制作一个小游戏。这就是游戏：两门大炮固定在 游戏空间的两端。大炮轮流相互射击，玩家将大炮倾斜到一定程度，并选择一种力量来射击炮弹。如果有时间的话，我还想添加一些其他的东西 我找到了一个很好的网站，让我开始学习2d物理，我做了一些测试，请参阅下面的代码。然而，我确实有两个大问题： 非平坦地板/地面 旋转 现在脚本只检查floorDiv的style.top值，因此框将始终“着陆”在这一行像素上。如果我想 可变高度地形，这是不够的。你们对

我在我的网络编程课程中有一个小项目，我应该用javascript制作一个小游戏。这就是游戏：两门大炮固定在 游戏空间的两端。大炮轮流相互射击，玩家将大炮倾斜到一定程度，并选择一种力量来射击炮弹。如果有时间的话，我还想添加一些其他的东西

我找到了一个很好的网站，让我开始学习2d物理，我做了一些测试，请参阅下面的代码。然而，我确实有两个大问题：

  • 非平坦地板/地面
  • 旋转 现在脚本只检查floorDiv的style.top值，因此框将始终“着陆”在这一行像素上。如果我想 可变高度地形，这是不够的。你们对如何实现这一目标有什么想法吗？是否仍要检查特定像素处的颜色？如果是这样，我可以检查非天空或地面颜色的像素，并将其作为着陆标准

    我需要旋转大炮，这样玩家可以调整他们的目标！我想我会制作两个不同的加农炮物体，加农炮“底座”和炮管。当玩家按下一个键时，我可以旋转炮管。不幸的是，在网络编程中，轮换似乎很困难。我在上找到了这个jquery插件，但我并没有让它像我希望的那样工作。即使我已经确定炮弹在图片中居中，也有一些平移，而不仅仅是旋转。 我想这可能是因为图片没有围绕中心旋转？请参阅下面的旋转测试代码（您必须下载 旋转插件（如果您想尝试代码）。 我想我可以只为每个角度画一张照片，但那似乎有点浪费 因为加农炮没有实际的视觉变化

    另外，如果我想同时设置多个对象的动画，你认为我应该在同一个gameloop函数中更改所有对象吗？ 有什么想法吗

    以下是物理测试的代码

    CSS文件

    #moveDiv {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#000;
}

#floorDiv {
    position:absolute;
    width:800px;
    height:1px;
    background-color:#2E2;
}

table {
text-align:right;

}
table input {
    width:35px;
}
    HTML文件

    <script type="text/javascript">
//global vars
var gravity = 0.5;
var friction = 0.5;
var moving = false;
var moveDiv;
var floorDiv;
var yPos;
var xPos;
var floorPos;
var velocity_y = 0;
var velocity_x = 0;
</script>
</head>

<body onload="initialize();">
<input type="button" value="fall" onclick="fall();"></button>
<input type="button" value="Push" onclick="push();"></button>
<input type="button" value="reset" onclick="reset();"></button>

<table>
<tr>
<td>Angle: <input type="text" value="45" id="angle" /></td>
<td>Speed: <input type="text" value="10" id="speed"/></td>
</tr>
<tr>
<td>Gravity: <input type="text" value="0.5" id="gravity" /></td>
<td>Friction: <input type="text" value="0.5" id="friction" /></td>
</table>

<div id="moveDiv"></div>
<div id="floorDiv"></div>
</body>
</html>

    
//全局变量
var重力=0.5；
var摩擦=0.5；
var=false；
var-moveDiv；
var floorDiv；
var-yPos；
var-xPos；
var floorPos；
var速度_y=0；
var速度_x=0；
角度：
速度：
重力：
摩擦：
    js文件

    function initialize() {
    moveDiv = document.getElementById('moveDiv');
    floorDiv = document.getElementById('floorDiv'); 

    moveDiv.style.left=400;
    moveDiv.style.top=50;

    floorDiv.style.left=200;
    floorDiv.style.top=400;
}//end initialize

function fall() 
{
    moving=true;
    var angle = 275;
    var rad = angle / (Math.pi * 2);
    var scale_x = Math.cos(rad);
    var scale_y = Math.sin(rad);

    var moveDivSpeed = 0;

    gameLoop();

}//end fall

function push() 
{
    moving=true;
    var angle = document.getElementById('angle').value;
    var rad = angle / (Math.PI * 2);
    var scale_x = Math.cos(rad);
    var scale_y = Math.sin(rad);
    var moveDivSpeed = document.getElementById('speed').value;
    friction = document.getElementById('friction').value;
    gravity = document.getElementById('gravity').value;
    velocity_x = moveDivSpeed*scale_x;
    console.log("original velocity_x is " + velocity_x);
    velocity_y = moveDivSpeed*scale_y;
    gameLoop();
}

function gameLoop () {
    //console.log("gameLoop start");
    var len = moveDiv.style.top.length;
    var presentTop = parseInt(moveDiv.style.top.substr(0, len-2));

    var lenX = moveDiv.style.left.length;
    var presentLeft = parseInt(moveDiv.style.left.substr(0, lenX-2));

    var len2 = floorDiv.style.top.length;
    var floorTop = parseInt(floorDiv.style.top.substr(0, len2-2));

    if (moving == true) 
    {
        velocity_y -= gravity;

        if ((presentTop+100) - velocity_y < floorTop) 
        { //if moveDiv hasn't hit the floor yet...
            moveDiv.style.top = presentTop - velocity_y;
            moveDiv.style.left = presentLeft + velocity_x;
        }
        else if (presentTop + 100 == floorTop) //if moveDiv is ON the floor
        {
            velocity_x = velocity_x*(1-friction);
            moveDiv.style.left = presentLeft + velocity_x;
            console.log("on the floor");
            console.log("friction is " + friction);
            console.log(" and velocity_x is " + velocity_x);
            console.log("moveDiv.style.left is " +moveDiv.style.left);

            if (velocity_x <= 1)
            {
                console.log("stopped moving");
                moving = false;
            }

        }
        else //if moveDiv will hit the floor/go through the floor this time
        {
            var diff = floorTop - (presentTop + 100);
            moveDiv.style.top = presentTop + diff;
            moveDiv.style.left = presentLeft + velocity_x;
        }
    }
    else if (moving == false) 
    {
        clearTimeout(runAgain);
        console.log("else if moving == false");
        return false;
    }

    var runAgain = setTimeout("gameLoop()", 5);
    //console.log("end of gameLoop");
    return false;
}//end gameLoop

function reset () {
    moving = false;

    moveDiv.style.left=400;
    moveDiv.style.top=50;

    floorDiv.style.left=200;
    floorDiv.style.top=400;
}//end reset

    函数初始化（）{
moveDiv=document.getElementById（'moveDiv'）；
floorDiv=document.getElementById（'floorDiv'）；
moveDiv.style.left=400；
moveDiv.style.top=50；
floorDiv.style.left=200；
floorDiv.style.top=400；
}//结束初始化
函数fall（）
{
移动=真；
var角=275；
var rad=角度/（数学pi*2）；
var scale_x=数学cos（rad）；
var scale_y=数学sin（rad）；
var-moveDivSpeed=0；
gameLoop（）；
}//落幕
函数push（）
{
移动=真；
var angle=document.getElementById（'angle'）。值；
var rad=角度/（数学PI*2）；
var scale_x=数学cos（rad）；
var scale_y=数学sin（rad）；
var moveDivSpeed=document.getElementById（'speed'）.value；
摩擦=document.getElementById（“摩擦”）.value；
重力=document.getElementById（'gravity'）。值；
速度x=移动速度*刻度x；
console.log（“原始速度_x为”+velocity_x）；
速度y=移动速度*比例y；
gameLoop（）；
}
函数gameLoop（）{
//log（“gameLoop启动”）；
var len=moveDiv.style.top.length；
var presentTop=parseInt（moveDiv.style.top.substr（0，len-2））；
var lenX=moveDiv.style.left.length；
var presenttleft=parseInt（moveDiv.style.left.substr（0，lenX-2））；
var len2=地板设计风格顶部长度；
var floorTop=parseInt（floorDiv.style.top.substr（0，len2-2））；
如果（移动==真）
{
速度_y-=重力；
如果（（当前顶部+100）-速度y
最简单（现在）的方法是使用：
    

    const angleInputElement=document.getElementById（'angle'）；
const degrees=angleInputElement.value；
const barrelElement=document.getElementById（'barrel'）；//但我在您的示例中没有看到这一点
barrelElement.style.transform=`rotate（${degrees}deg）`；

    
另外，如果我想同时设置多个对象的动画，你认为我应该在同一个gameloop函数中更改所有对象吗？有什么想法吗
    
对于这个简单的实现，应该可以很好地工作
    
我想我会制作两个不同的加农炮对象，加农炮“基地”和炮管。然后，当玩家按下一个键时，我可以旋转炮管。不幸的是，在网络编程中旋转似乎很困难
    
最简单（现在）的方法是使用：
    

    const angleInputElement=document.getElementById（'angle'）；
const degrees=angleInputElement.value；
const barrelElement=document.getElementById（'barrel'）；//但我在您的示例中没有看到这一点
barrelElement.style.transform=`rotate（${degrees}deg）`；

    
另外，如果我想同时设置多个对象的动画，您认为我应该只更改al吗

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rotate.1-1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#hide").click(function() {
            $("p").hide(500);
            $(".box").animate({height:300, opacity:0}, 1000);
        });

        $("#show").click(function() {
            $("p").show(500);
            $(".box").animate({height:100, opacity:100}, 1000);
        });

        $(".box").mouseenter(function() {
            $(".box").animate({height:300, opacity:0}, 500);
        });

        $(".box").mouseleave(function() {
            $(".box").animate({height:100, opacity:10}, 1000);
        });

        $("#move").click(function() {
            $("#grey").animate({left: -300, top: -100}, 1000)
            .animate({left: -600, top: 200}, 1000);
        });

        $("#cannonball").click(function() {
            $("#cannonball").animate({"left": "+=300", "top": "-=100"}, 500)
            .animate({"left": "+=300", "top": "+=100"}, 500);

        });

        $("p.fading").css("opacity","0.3");
        $("p.fading").hover(function() {
            $(this).stop().animate({opacity: 1.0}, "slow");}, 
                function () {
                $(this).stop().animate({opacity: 0.3}, "slow");
            });

        $("#rotateRight").click(function() {
            $("#cannonball").rotate(10);
        });

    }); //end jquery document.ready scripts

function initialize () {
    document.getElementById('box').style.top = 250;
}
</script>

<style type="text/css">
body {
    background-color: #ccc;
}

.box {
    background-color: #000;
    width:100px;
    height:100px;
    margin-left:300px;
}

.divMove {
    position:relative;
    top:350px;
    float:right;
    background-color: #ddd;
    width:100px;
    height:100px;
    margin-right:100px;
}   

#cannonball {
    position: relative;
}
</style>
</head>
<body onload="initialize();">
<p>Let's make this disappear and appear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="move">Move</button>
<button id="rotateRight">Rotate+</button>

<div id="box" class="box">
</div>


<div class="divMove" id="grey">
</div>

<img src="http://dl.dropbox.com/u/18833130/Webprogrammering/test/cannonball.png" id="cannonball" border="1" />
<p class="fading">This is a paragraph that fades. Let's see how it looks.</p>
</body>
</html>