Question

我正在 javascript / HTML5 （画布中的）创建游戏，其中包含两种类型的对象（让我们称它们为对象类型A和对象类型B ）从画布上方开始落下。

播放器用于在物体掉落时对其进行滑动，以使物体不会落入屏幕底部。

我想创建一个水平线，程序会在其上选择一个随机点来生成一个对象。

程序还必须决定每个对象产生它是否是A或B类型的对象。

我究竟如何创建代码来生成对象以考虑这两种独立概率？

我假设涉及Math.random，但我在javascript中非常不熟悉并且不知道如何编码。

此外，在产生物体时，我会用什么来控制产卵率和产卵率随时间的变化？

我听说 Unity可以帮助产生，但是有没有一种有效的方法来实现它而不是团结？

Answer 1

是的，您描述的游戏可以在没有Unity的情况下完成

演示：http://jsfiddle.net/m1erickson/RCLtR/

enter image description here

这是一个很好的评论代码，可以帮助您入门。

此代码生成随机对象并在屏幕上设置动画。

此代码未经过优化且无法处理游戏事件，但它将开始您的学习体验！

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // get a refrence to the canvas and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // newly spawned objects start at Y=25
    var spawnLineY=25;

    // spawn a new object every 1500ms
    var spawnRate=1500;

    // set how fast the objects will fall
    var spawnRateOfDescent=0.50;

    // when was the last object spawned
    var lastSpawn=-1;

    // this array holds all spawned object
    var objects=[];

    // save the starting time (used to calc elapsed time)
    var startTime=Date.now();

    // start animating
    animate();


    function spawnRandomObject(){

        // select a random type for this new object
        var t;

        // About Math.random()
        // Math.random() generates a semi-random number
        // between 0-1. So to randomly decide if the next object
        // will be A or B, we say if the random# is 0-.49 we
        // create A and if the random# is .50-1.00 we create B

        if(Math.random()<0.50){t="red";}else{t="blue";}

        // create the new object
        var object={
            // set this objects type
            type:t, 
            // set x randomly but at least 15px off the canvas edges
            x:Math.random()*(canvas.width-30)+15,
            // set y to start on the line where objects are spawned
            y:spawnLineY,
        }

        // add the new object to the objects[] array
        objects.push(object);
    }



    function animate(){

        // get the elapsed time
        var time=Date.now();

        // see if its time to spawn a new object
        if(time>(lastSpawn+spawnRate)){
            lastSpawn=time;
            spawnRandomObject();
        }

        // request another animation frame
        requestAnimationFrame(animate);

        // clear the canvas so all objects can be 
        // redrawn in new positions
        ctx.clearRect(0,0,canvas.width,canvas.height);

        // draw the line where new objects are spawned
        ctx.beginPath();
        ctx.moveTo(0,spawnLineY);
        ctx.lineTo(canvas.width,spawnLineY);
        ctx.stroke();

        // move each object down the canvas
        for(var i=0;i<objects.length;i++){
            var object=objects[i];
            object.y+=spawnRateOfDescent;
            ctx.beginPath();
            ctx.arc(object.x,object.y,8,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle=object.type;
            ctx.fill();
        }

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

如何使用javascript / HTML5在一行上随机生成对象？

1 个答案: