Hej. Jag har en bakgrund samt en droppe som ska röra sig från övre delen av bilden ner och ut ur bilden. När droppen gått ur bilden så ska en ny droppe komma in och göra likadant fast random på x-axeln. Så långt har jag kommit.
Problemet är att jag vill ha flera droppar som kommer in och liknar ett regn. Alla droppar ska alltså inte komma in samtidigt utan vid olika tidpunkt. Någon kunnig som är vill hjälpa till och gärna förklara sin kod?
Så här långt har jag kommit. En droppe kommer in och loopar sig och kommer in random när den lämnat bilden.
Problemet är att jag vill ha flera droppar som kommer in och liknar ett regn. Alla droppar ska alltså inte komma in samtidigt utan vid olika tidpunkt. Någon kunnig som är vill hjälpa till och gärna förklara sin kod?
Så här långt har jag kommit. En droppe kommer in och loopar sig och kommer in random när den lämnat bilden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Regn</title>
<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 40;
function setup() {
var canvas = document.getElementById('canvasRegn');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval('draw();', 36);
imgBg = new Image();
imgBg.src = 'dimma.jpg';
imgDrops = new Image();
imgDrops.src = 'drop.png';
}
}
function draw() {
drawBackground();
<!--regndroppe-->
ctx.drawImage (imgDrops, x , y );
y += 5; //Snabbheten
if(y > 450){ //Kommer in igen är droppen går ur bilden
y = -50; //droppen börjar utanför bild
x = Math.random() * 450; //Gör att droppen kommer in random från x-axeln
}
}
function drawBackground(){
<!-- bakgrund -->
ctx.drawImage(imgBg, 0, 0);
}
</script>
</head>
<body onload="setup();">
<canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
</body>
</html>
<html lang="en">
<head>
<title>Canvas Regn</title>
<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 40;
function setup() {
var canvas = document.getElementById('canvasRegn');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval('draw();', 36);
imgBg = new Image();
imgBg.src = 'dimma.jpg';
imgDrops = new Image();
imgDrops.src = 'drop.png';
}
}
function draw() {
drawBackground();
<!--regndroppe-->
ctx.drawImage (imgDrops, x , y );
y += 5; //Snabbheten
if(y > 450){ //Kommer in igen är droppen går ur bilden
y = -50; //droppen börjar utanför bild
x = Math.random() * 450; //Gör att droppen kommer in random från x-axeln
}
}
function drawBackground(){
<!-- bakgrund -->
ctx.drawImage(imgBg, 0, 0);
}
</script>
</head>
<body onload="setup();">
<canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
</body>
</html>
