Student infor: Joe Smith JS456 PLEASE ONLY USE JQUERY FOR ALL SCRIPTS. \"Snowing
ID: 3864175 • Letter: S
Question
Student infor:
Joe Smith
JS456
PLEASE ONLY USE JQUERY FOR ALL SCRIPTS.
"Snowing" 1. Create a webpage that include your student information at the top. 2. Delimit a space on the webpage where snow occurs. 3. Add two buttons. One is to start snowing, and the other one is to stop snowing. 4. When snow starts, snowflakes are generated at random positions on the top, and then fall down to the bottom, and then melt after few seconds. 5. Enrich the design, e.g. snowflakes in different size and style, accumulation of snowflakes etc. Suggested Functions click(), on(), setTimeout(), setlnterval(), clearlnterval(), attr(), css() append(), delay(), animateQ, remove(), Math.random()? Math.round()Explanation / Answer
1) copy the below content to snowing.js
function startSnowing(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Width = 1024;
var Height = 800;
canvas.width = Width;
canvas.height = Height;
var maxSize = 25;
var particles = [];
for(var i = 0; i < maxSize; i++)
{
particles.push({
x: Math.random()*Width,
y: Math.random()*Height,
r: Math.random()*4+1,
d: Math.random()*maxSize
})
}
//This method will draw the flakes
function draw()
{
ctx.clearRect(0, 0, Width, Height);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < maxSize; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
//this Function will move the snowflakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < maxSize; i++)
{
var p = particles[i];
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
if(p.x > Width+5 || p.x < -5 || p.y > Height)
{
if(i%3 > 0)
{
particles[i] = {x: Math.random()*Width, y: -10, r: p.r, d: p.d};
}
else
{
if(Math.sin(angle) > 0)
{
particles[i] = {x: -5, y: Math.random()*Height, r: p.r, d: p.d};
}
else
{
particles[i] = {x: Width+5, y: Math.random()*Height, r: p.r, d: p.d};
}
}
}
}
}
setInterval(draw, 33);
}
function stopSnowing(){
location.reload();
}
1) copy the below content to Snowing.html
<html>
<head>
<script src="snowing.js"></script>
<style>
body {
background: #6b92b9;
}
canvas {
display: block;
}
</style>
</head>
<body >
<div>
Name: john smith<br/>
Id: js123
</div>
<table>
<tr>
<td><input type="button" Value="Start Snowing"/></td>
<td><input type="button" Value="Stop Snowing" /></td>
</tr>
</table>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>
and run the html file