在画布上产卵随机图像在JavaScript [英] spawn random images in canvas in javascript
问题描述
好日子所有，我试图让使用画布的JavaScript游戏。我想产卵随机敌人的对象。到目前为止，我发现这是一个产卵例如：的jsfiddle演示
我如何加载图像（S），而不是球？任何帮助将是巨大的。 TNX。
//获得refrence到画布及其上下文
VAR帆布=的document.getElementById（画布上）;
变种CTX = canvas.getContext（2D）;//新生成的对象开始在y = 25
VAR spawnLineY = 25;//生成一个新的对象，每1500毫秒
VAR spawnRate = 1500;//设置对象将如何快速回落
VAR spawnRateOfDescent = 0.50;//当最后催生对象
变种lastSpawn = -1;//这个数组保存了所有衍生对象
变种对象= [];//保存起始时间（用于calc下经过的时间）
VAR STARTTIME = Date.now（）;//启动动画
动画（）;
功能spawnRandomObject（）{//选择这个新对象随机型
VAR吨;//公司的Math.random（）
//的Math.random（）生成的半随机数
// 0-1之间。所以随机决定是否下一个对象
//将A或B，我们说如果随机＃为0，0.49我们
//创建一个，如果随机＃是.50-1.00我们创造乙如果（的Math.random（）＆所述; 0.50）{
T =红;
}其他{
T =蓝色;
}//创建新对象
VAR对象= {
//设置此类型的对象
类型：T，
//集合X随机但至少15px的了画布边缘
X：的Math.random（）*（canvas.width - 30）+ 15，
//设置Y键开始在哪里对象催生行
Y：spawnLineY，
}//新对象添加到对象[]数组
objects.push（对象）;
}功能动画（）{//获取经过时间
无功时间= Date.now（）;//看看它的时间来产生一个新的对象
如果（时间＆gt;（lastSpawn + spawnRate））{
lastSpawn =时间;
spawnRandomObject（）;
}//请求另一个动画帧
requestAnimationFrame（动画）;//清除画布，因此所有的对象可以是
//重绘在新的职位
ctx.clearRect（0，0，canvas.width，canvas.height）;//绘制，其中新对象催生行
ctx.beginPath（）;
ctx.moveTo（0，spawnLineY）;
ctx.lineTo（canvas.width，spawnLineY）;
ctx.stroke（）;//每个对象下移画布
对于（VAR I = 0; I＆LT; objects.length;我++）{
VAR对象=对象[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（）;
}}
一个方法是有加载的图像的全局数组：
VAR图像= [IMG1，IMG2，...];
当一个对象被创建它的随机分配到图片阵列的图像之一。然后，我们可以得出它的使用 ctx.drawImage 方法图像： ctx.drawImage（object.image，...））。现在，要记住，你需要加载所有的图像是重要的，像这样：
VAR IMG1 =新的图像（）;
img.src =...;
和被加载时，一切都只能运行动画，我们可以使用的onload ：
的window.onload =函数（）{
动画（）;
}
下面是我们添加obj.image属性来创造我们的对象的。这是选择从我们的图像随机图像阵列。
VAR对象= {
...
//给随机图像
图片：图片[Math.floor（的Math.random（）* images.length）
}
任何终于可以删除电弧绘制功能和借鉴，并使用 object.image 绘制：
为（VAR I = 0; I＆LT; objects.length;我++）{
VAR对象=对象[I]
object.y + = spawnRateOfDescent;
ctx.drawImage（object.image，object.x，object.y，30，30）;
}
Good day all, I'm trying to make a javascript game using canvas. I want to spawn random enemy objects. So far I found this as a spawning example: JSFiddle Demo
How can I load image(s) instead of balls? Any help would be great. Tnx.
// 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();
}
}
One way would be to have an global array of loaded images:
var images = [img1, img2, ... ];
When an object is created it's assigned randomly to one of the images in the images array. Then we can draw it's image using the ctx.drawImage method: ctx.drawImage(object.image,...)) . Now it's important to remember you need to load all your images first like so:
var img1 = new Image();
img.src = "...";
And to only run animate when everything is loaded, we can use onload:
window.onload = function() {
animate();
}
Here is the obj.image property we add to the creation of our object. This is selecting a random image from our images array.
var object = {
...
// give random image
image: images[Math.floor(Math.random()*images.length)]
}
Any finally we can remove the arc draw functions and draw, and use object.image to draw:
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
object.y += spawnRateOfDescent;
ctx.drawImage(object.image, object.x, object.y, 30, 30);
}
这篇关于在画布上产卵随机图像在JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
