如何使对象落在javascript中？
我正在努力做这个游戏，你不应该碰撞掉下来的物体。我有物体落下，我有我的黑色方块，但当我运行它时它会闪烁，我不知道当两个物体碰撞在一起时如何使代码停止。 这是我到目前为止的代码如何使对象落在javascript中？,javascript,Javascript,我正在努力做这个游戏，你不应该碰撞掉下来的物体。我有物体落下，我有我的黑色方块，但当我运行它时它会闪烁，我不知道当两个物体碰撞在一起时如何使代码停止。 这是我到目前为止的代码 <html> <body> <canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas> <script> va
<html>
<body>
<canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
<script>
var ctx;
var imgBg;
var imgDrops;
var noOfDrops = 50;
var fallingDrops = [];
function drawBackground(){
ctx.drawImage(imgBg, 0, 0); //Background
}
function draw() {
drawBackground();
for (var i=0; i< noOfDrops; i++)
{
ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop
fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
if (fallingDrops[i].y > 480) { //Repeat the raindrop when it falls out of view
fallingDrops[i].y = -25 //Account for the image size
fallingDrops[i].x = Math.random() * 800; //Make it appear randomly along the width
}
}
}
function setup() {
var canvas = document.getElementById('canvasRegn');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
imgBg = new Image();
imgBg.src = "http://www.hamdancommunications.com/HComm/img/wite%20square.png";
setInterval(draw, 36);
for (var i = 0; i < noOfDrops; i++) {
var fallingDr = new Object();
fallingDr["image"] = new Image();
fallingDr.image.src = 'http://s18.postimg.org/o6jpmdf9x/Line1.jpg';
fallingDr["x"] = Math.random() * 800;
fallingDr["y"] = Math.random() * 5;
fallingDr["speed"] = 3 + Math.random() * 5;
fallingDrops.push(fallingDr);
anotherGame();
}
}
}
setup();
function anotherGame(){
var canvas = document.getElementById("canvasRegn");
var ctx = canvas.getContext('2d');
canvas.addEventListener("mousedown", clicked);
canvas.addEventListener("mousemove", moved);
canvas.addEventListener("mouseup", released);
var isclicked = 0;
var square = new Object();
square.color = "black";
square.x = 100;
square.y = 100;
square.w = 50;
square.h = 50;
var offX = 0;
var offY = 0;
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = square.color;
ctx.fillRect(square.x,square.y,square.w,square.h);
}
function game(){
}
function clicked(e){
var x = e.offsetX;
var y = e.offsetY;
if(x >= square.x && x <= square.x + square.w &&
y >= square.y && y <= square.y + square.h){
isclicked = 1;
offX = x - square.x;
offY = y - square.y;
}
}
function moved(e){
if(isclicked == 1){
var x = e.offsetX;
var y = e.offsetY;
square.x = x - offX;
square.y = y - offY;
}
}
function released(e){
var x = e.offsetX;
var y = e.offsetY;
isclicked = 0;
}
var drawtimer = setInterval(draw, 1000/30);
var gametimer = setInterval(game, 1000/10);
}
</script>
</body>
</html>
var-ctx；
var-imgBg；
var-imgDrops；
var noOfDrops=50；
var fallingDrops=[]；
函数background（）{
ctx.drawImage（imgBg，0，0）；//背景
}
函数绘图（）{
牵引杆接地（）；
对于（变量i=0；i480）{//当雨滴落下时，重复雨滴
fallingDrops[i].y=-25//说明图像大小
fallingDrops[i].x=Math.random（）*800；//使其沿宽度随机显示
}
}
}
函数设置（）{
var canvas=document.getElementById（'canvasRegn'）；
if（canvas.getContext）{
ctx=canvas.getContext（'2d'）；
imgBg=新图像（）；
imgBg.src=”http://www.hamdancommunications.com/HComm/img/wite%20square.png";
设定间隔（图36）；
对于（变量i=0；i