I'm trying to generate a flower with different sizes from an Array, Currently when clicking it adds a new flower but changes all the current flower sizes as well, id like to add a flower and it be a different size to each other flower, heres the code...
document.body.onload=setupCanvas();
function setupCanvas(){
var canvas = document.getElementById("garden");
var xPositions;
var yPositions;
var colours;
var speed;
var size;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
xPositions = [];
yPositions = [];
colours = [];
speed = [];
size = randomSize();
for(var i = 0; i < 20; i++){
xPositions.push(Math.random() * 500);
yPositions.push(Math.random() * 500);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
}
window.setInterval(draw, 50);
}
function randomColour(){
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
function randomSpeed(){
return Math.floor(Math.random() * 8 + 1);
}
function randomSize(){
return Math.floor(Math.random() * 30 + 5);
}
function draw(x, y, s){
ctx.fillStyle = "rgb(210, 200, 255)";
ctx.rect(1, 1, 500, 500,);
ctx.fill();
for(var i = 0; i < xPositions.length; i++){
ctx.fillStyle = colours[i];
ctx.beginPath();
ctx.arc(xPositions[i] - size, yPositions[i] - size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] - size, yPositions[i] + size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] + size, yPositions[i] - size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] + size, yPositions[i] + size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colours[i+1];
ctx.arc(xPositions[i], yPositions[i], size, 0, Math.PI * 2, false);
ctx.fill();
if(yPositions[i] > 600){
yPositions[i] = Math.random() * - 350;
}else{
yPositions[i] += speed[i];
}
}
}
document.getElementById("garden").addEventListener("click", addFlower);
function addFlower(e){
size = randomSize();
xPositions.push(e.offsetX);
yPositions.push(e.offsetY);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
}
document.getElementById("remove").addEventListener("click", removeFlower);
function removeFlower(){
xPositions.splice(0, 1);
yPositions.splice(0, 1);
colours.splice(0, 1);
speed.splice(0, 1);
}
}
and the HMTL Code:
<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<div id="container">
<h1 id="firstHeading" class="blueTxt">Arrays</h1>
<canvas id="garden" width="500" height="500">
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a> canvas feature.</p>
</canvas>
<form>
<input type="button" id="remove" onclick="" value="Remove Flower"/>
</form>
<br />
</div>
<script src="../js/flower_script.js"></script>
</body>
</html>
Thanks so much in advanced, please forgive me for my sloppy & ugly code
Aucun commentaire:
Enregistrer un commentaire