如何使用Javascript/HTML5在一条线上随机生成物体？

Question

如何使用Javascript/HTML5在一条线上随机生成物体？

javascripthtmlobjecthtml5-canvasdom-events

3

我正在使用Javascript/HTML5 (在canvas中) 制作一款涉及两种物体（我们称之为A型物体和B型物体）由画布上方掉落的游戏。玩家需要在物体掉落时横扫它们，以免它们从屏幕底部掉落。

我想在屏幕中创建一条水平线，程序会选择一个随机点从该线上产生物体。

对于每个物体的生成，程序还必须决定其是A型物体还是B型物体。

如何编写代码来同时考虑这两个独立的概率生成物体？我认为这需要使用Math.random，但我在Javascript方面缺乏经验，不知道怎么编码。

此外，在生成物体时，我可以使用什么来控制生成速率以及生成速率随时间的变化？我听说Unity可以帮助生成，但是否有一种不使用Unity也有效的方法呢？

- Thomas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

是的，您描述的游戏可以在不使用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>