我是新来的，是信息学学位课程的学生。我下周将对我的一个项目的某些部分遇到麻烦。我们被要求做一个包含所有这些要求的项目。
所以我选择做某种烟花表演，其中一定数量的不同尺寸的球将从画布页面的底部进入并从顶部飞向大约1/3然后他们会拼接出来，爆炸同时发生。当圆圈爆炸时，将在画布的底部生成一个新的圆圈，它将继续等等。
所以我需要帮助进行爆炸（当他们达到顶部的1/3并且过早地添加鼠标事件/触摸事件时，创建从圆圈中心射出的微小圆圈消失（爆炸））让圈子爆炸。任何帮助都会非常感谢。
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>basic_canvas</title>
<style>
#mycanvas {
margin: 0 auto;
background-color: black;
}
body {
margin: 0
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
//global variables
var mycanvas;
var ctx;
//make an array of balls shooting from the bottom of the page to the middle of the page
var Balls = [];
var fireworks = [];
//make a ready handler for our page to tirgger my javascript
$(document).ready(function () {
mycanvas = document.getElementById('mycanvas');
// mycanvas = $('#mycanvas');
ctx = mycanvas.getContext('2d');
mycanvas.width = window.innerWidth;
mycanvas.height = window.innerHeight;
setInterval(draw, 33);
//make the balls here
for (var i = 0; i < 30; i++) {
Balls[i] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height, getRandomFloat(20, 70), getRandomFloat(0.1, 1));
}
// event listeners here
});
function draw() {
ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
for (var i = 0; i < Balls.length; i++) {
Balls[i].makeCirc();
Balls[i].moveCirc();
}
}
function degToRad(deg) {
radians = (deg * Math.PI / 180) - Math.PI / 2;
return radians;
}
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//make my flying balls here
//ball(x start value, y start value, radius, speed)
function Ball(xin, yin, radin, spin) {
//make all the variables for the Ball
var x = xin;
var y = yin;
var r = radin;
var sp = spin;
//generating random colors for the circles
var c = 'rgb(' +
getRandomInt(0, 255) +
',' +
getRandomInt(0, 255) +
',' +
getRandomInt(0, 255) +
')';
//draw the circle
this.makeCirc = function () {
ctx.fillStyle = c;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
this.moveCirc = function () {
y -= sp;
if (y + r < mycanvas.height / 3) {
// fireworks[fireworks.length] = new Fireworks(x,y,2);
Balls.splice(Balls.indexOf(this), 1);
}
}
}
// function Firework(xin,yin,rin){
// var x = xin;
// var y = yin;
// var r = rin;
//
// }
</script>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
</html>
答案 0 :(得分：0)
所以我能够修复我的项目。以防其他人需要类似的东西我发布固定代码。
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>Balloon_Fireworks</title>
<style>
#mycanvas {
margin: 0 auto;
background-color: black;
}
body {
margin: 0
}
#score_card {
position:absolute;
top:25px;
left:25px;
padding-top:25px;
padding-left:25px;
width:100px;
height:75px;
background-color: rgb(112,200,112);
color:rgba(50,50,50,0.5);
font-size:50px;
font-family: sans-serif;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
//global variables
var mycanvas;
var ctx;
//make an array of balls shooting from the bottom of the page to the middle of the page
var Balls = [];
var Fireworks = [];
//global keep track of where i click
var mouseX;
var mouseY;
//Counts the number of fireworks popped
var point_counter = 0;
//make a ready handler for our page to tirgger my javascript
$(document).ready(function () {
mycanvas = document.getElementById('mycanvas');
// mycanvas = $('#mycanvas');
ctx = mycanvas.getContext('2d');
mycanvas.width = window.innerWidth;
mycanvas.height = window.innerHeight;
mycanvas.addEventListener('mousedown', explodeThis);
mycanvas.addEventListener('touchstart', explodeThis);
setInterval(draw, 33);
//make the balls here
//new Ball( x, y, rad, speedx, speedy);
for (var i = 0; i < 30; i++) {
Balls[i] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height, getRandomFloat(50, 70), getRandomFloat(-3, -1));
}
// event listeners here
});
function draw() {
ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
for (var i = 0; i < Balls.length; i++) {
Balls[i].makeCirc();
Balls[i].moveCirc();
}
for (var i = 0; i< Fireworks.length; i++){
Fireworks[i].drawFire();
Fireworks[i].moveFire();
}
}
function explodeThis(e){
e.preventDefault();
mouseX = e.pageX || e.targetTouches[0].pageX;
mouseY = e.pageY || e.targetTouches[0].pageY;
for (var i = 0; i< Balls.length; i++){
Balls[i].hit();
}
}
function degToRad(deg) {
radians = (deg * Math.PI / 180) - Math.PI / 2;
return radians;
}
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//make my flying balls here
//ball(x start value, y start value, radius, speed)
function Ball(xin, yin, radin, spyin, spxin, cin){
//make all the variables for the Ball
var x = xin;
var y = yin;
var r = radin;
var spy = spyin;
var spx = spxin || 0;
//make a gravity for me
var g = getRandomFloat(.0001,.05);
//generating random colors for the circles
var c = cin || 'rgb(' +
getRandomInt(0, 255) +
',' +
getRandomInt(0, 255) +
',' +
getRandomInt(0, 255) +
')';
//draw the circle
this.makeCirc = function () {
ctx.fillStyle = c;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.fill();
};
this.moveCirc = function () {
y += spy;
x += spx;
// At 1/3 from the top the balls will explode
if (y+r < mycanvas.height/3) {
}
};
this.gravityMe = function () {
spy += g;
};
this.hit = function () {
var d = Math.sqrt( (x-mouseX)*(x-mouseX) + (y-mouseY)*(y-mouseY) );
if (d < r){
//when it hits
spy = 0;
//make a new set of fireworks using the last place
Fireworks[Fireworks.length] = new Firework (x, y, r, c);
//access that last one you just made, and add in particles
Fireworks[Fireworks.length-1].makeFire();
c = 'rgba(255,255,255,0)';
r = 0;
point_counter ++;
// console.log(point_counter);
document.getElementById('score_card').innerHTML = point_counter;
//make a new one
Balls[Balls.length] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height+70, getRandomFloat(50, 70), getRandomFloat(-5, -2));
}
};
}
// make the circles that explode out
//firework(x value, y value, radius)
function Firework(xin,yin,rin, cin){
var x = xin;
var y = yin;
var r = rin;
var color = cin;
//make an array
var particles = new Array(getRandomInt(10,30));
this.makeFire = function () {
for ( var i = 0; i < particles.length; i++){
particles[i] = new Ball(getRandomFloat(x-r,x+r), getRandomFloat(y-r, y+r), getRandomInt(2,10), getRandomFloat(-1,1), getRandomFloat(-3, 3), color);
}
};
this.drawFire = function () {
for ( var i = 0; i < particles.length; i++){
particles[i].makeCirc();
}
};
this.moveFire = function () {
for ( var i = 0; i < particles.length; i++){
particles[i].moveCirc();
particles[i].gravityMe();
}
};
}
</script>
</head>
<body>
<canvas id="mycanvas"></canvas>
<div id = "score_card"></div>
</body>
</html>