我正在使用 Javascript/HTML5(在 Canvas 中)创建一个游戏，其中涉及两种类型的对象(我们称它们为对象类型 A 和对象类型B) 从 Canvas 上方开始落下。
玩家需要在物体下落时滑动它们，这样物体就不会从屏幕底部掉落。
我想创建一条水平线，程序会在该水平线上选择一个随机点来生成对象。
程序还必须为每个生成的对象决定它是类型 A 还是类型 B 的对象。
我究竟应该如何创建代码来生成对象以考虑这两个独立的概率？
我假设涉及 Math.random，但我对 Javascript 经验不足，不知道如何编写代码。
此外，在生成对象时，我将使用什么来控制生成速率和生成速率随时间的变化？
我听说 Unity 有助于生成，但是没有 Unity 是否有有效的方法？
最佳答案
是的，你描述的游戏不用Unity也可以完成
演示:http://jsfiddle.net/m1erickson/RCLtR/
这里有注释很好的代码，可以帮助您入门。
此代码会生成随机对象并使它们沿着屏幕移动。
此代码未优化且不处理游戏事件，但它会让您开始学习体验!
<!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 - 如何使用 Javascript/HTML5 在一行中随机生成对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22592773/