如何连接两个JavaScript项目

时间：2019-05-08 15:26:14

标签： javascript html

我正在用JavaScript编写一个项目。我将其分离为两个文件，但现在很难将它们彼此连接起来。.我不太了解JavaScript。

第一个项目是“太空”和几圈“行星” 

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');

var colorArray = [
  '#80ff00',
  '#bf80ff',
  '#005c99',
  '#006600',
  '#e6e600',
  '#b30059',
  '#adad85',
  
];


//.............................PLANET.................................................................

function Planet(x, y, dx, dy, radius){
 this.x = x;
 this.y = y;
 this.dx = dx;
 this.dy = dy;
 this.radius = radius;
 this.color = colorArray[Math.floor(Math.random()*colorArray.length)];

  this.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI *2, false);
   // ctx.strokeStyle = "brown";
    ctx.stroke();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  this.update = function(){

    if(this.x + this.radius> innerWidth || this.x - this.radius < 0)
    {
        this.dx=-this.dx;
    }
    this.x+= this.dx;

    if(this.y + this.radius> innerHeight || this.y - this.radius < 0)
    {
        this.dy=-this.dy;
    }
    this.x+= this.dx;
    this.y+= this.dy;
    this.draw();
  }
}
//.......................................END PLANET.........................................................


var circleArray = [];
for( var i = 0; i < 10; i++){
  var radius = 70;
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius *2) + radius;  
  var dx = (Math.random() - 0.5);
  var dy = (Math.random() - 0.5);
 
  circleArray.push(new Planet(x, y, dx, dy, radius));
}


 function animate()
 {
     requestAnimationFrame(animate);
     ctx.clearRect(0,0,innerWidth, innerHeight);
     for(var i = 0; i < circleArray.length; i++){
        circleArray[i].update();
     } 

}

animate();
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project </title>
</head>
<style>
canvas{
    border: 1px solid black;
	
}
body{
    margin: 0;
    padding: 0;
    overflow: hidden;
	background-image: url("https://wallpaperplay.com/walls/full/9/d/f/104426.jpg");

}
</style>
<body>
    <p align="center">
        <canvas width="800" height="600">
                <script src="scriptYT.js"></script>
                
         
    </p>
</body>
</html>

第二个项目

var context;
var backgroundColor = "#CCCCCC";
var myCanvas, myVar, x0, y0, myRadius;
var myAngle = 0;
var myCircle, myColor, myRadius;
var myAlpha;
var myRx, myRy;
var myCircles = [];
//=================================================================================================

function updateCanvas() {
    myCanvas = document.getElementById( "myCanvas" );
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    context = myCanvas.getContext( "2d" );

    context.fillStyle = backgroundColor;
    context.fillRect( 0, 0, myCanvas.width, myCanvas.height );
//=======================================TŁO PLANETY================================================

    myColor = "blue";
    myRadius = 40;
    myRx = 400;
    myRy = 300
    myAlpha = Math.floor( Math.random() * 360 );
    myCircle = new Circle( myColor, myRadius, myRx, myRy, myAlpha );
    myCircles.push( myCircle );
//=================================================================================================

//=======================================CONTENT PLANETY================================================
      myColor = "green";
      myRadius = 15;
      myRx = 425;
      myRy = 300;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 10;
      myRx = 429;
      myRy = 310;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 10;
      myRx = 380;
      myRy = 285;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 8;
      myRx = 390;
      myRy = 270;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 8;
      myRx = 390;
      myRy = 275;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 7;
      myRx = 390;
      myRy = 295;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );
      
      myColor = "green";
      myRadius = 10;
      myRx = 380;
      myRy = 295;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );
//=================================================================================================
    
    myVar = setTimeout( nextFrame, 100 );
}
//=================================================================================================

function Circle( color, radius, rX, rY, alpha ) {
    this.X = 0;
    this.Y = 0;
    this.R = radius;
    this.Color = color;
    this.A = alpha;
    this.trX = rX;
    this.trY = rY;

    this.display = function() {
        context.fillStyle = this.Color;
        context.beginPath();
        context.arc( this.X, this.Y, this.R, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();

        
        context.fillStyle = "#E6DADA";
        context.beginPath();
        context.arc( 200, this.Y + this.R / 2, 70, 0, Math.PI * 2, true );
        context.closePath();
        context.fill(); 

        
    }
}
//=================================================================================================


//=================================================================================================

function Content( color, radius, rX, rY, alpha ) {
    this.X = 0;
    this.Y = 0;
    this.R = radius;
    this.Color = color;
    this.A = alpha;
    this.trX = rX;
    this.trY = rY;

    this.display = function() {
        context.fillStyle = this.Color;
        context.beginPath();
        context.arc( this.X, this.Y, this.R, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();
    }
}
//=================================================================================================

function nextFrame() {
    context = myCanvas.getContext( "2d" );

    context.fillStyle = backgroundColor;
    context.clearRect( 0, 0, myCanvas.width, myCanvas.height );

    myAngle += 1;
    myAngle %= 360;

    var maxRadius = myCircles[ 0 ].R;
    for ( var i = 1; i < myCircles.length; i ++ )
    {
        if ( myCircles[ i ].R > maxRadius ) maxRadius = myCircles[ i ].R;
    }

    for ( i = 0; i < myCircles.length; i ++ )
    {
        myCircle = myCircles[ i ];
        var sinA = Math.sin( ( myAngle + myCircle.A ) * Math.PI / 180.0 * maxRadius / myCircle.R );
        var cosA = Math.cos( ( myAngle + myCircle.A ) * Math.PI / 180.0 * maxRadius / myCircle.R );
        context.save();
            context.transform( cosA, sinA, -sinA, cosA, myCircle.trX, myCircle.trY );
            myCircle.display();
        context.restore();
    }

    myVar = setTimeout( nextFrame, 100 );
}
//=================================================================================================
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="script.js"></script>
        <title>Canvas Example</title>
        <style>
        body{
             margin: 0;
             padding: 0;
             overflow: hidden;
	         background-image: url("https://wallpaperplay.com/walls/full/9/d/f/104426.jpg");

}
        </style>
    </head>
    <body onLoad="updateCanvas();">
        <p align="center">
            <canvas id="myCanvas"/>
        </p>
    </body>
</html>

我尝试自己做，但仍然无法顺利进行...如何连接这两个项目？

1 个答案:

答案 0 :(得分：1)

像这样在HTML中使用脚本标签：

 <script src="myscripts.js"></script>

确保将所有JavaScript添加到要链接到的文件。全lesson。

将所有JavaScript代码放在一个位置。如果将其全部添加到单独的.js文件中，请不要使用脚本标签。仅在将其全部添加到HTML部分内时，才使用脚本标签：

<script>
var context;
var backgroundColor = "#CCCCCC";
var myCanvas, myVar, x0, y0, myRadius;
var myAngle = 0;
var myCircle, myColor, myRadius;
var myAlpha;
var myRx, myRy;
var myCircles = [];
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');//=================================================================================================

function updateCanvas() {
    myCanvas = document.getElementById( "myCanvas" );
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    context = myCanvas.getContext( "2d" );

    context.fillStyle = backgroundColor;
    context.fillRect( 0, 0, myCanvas.width, myCanvas.height );
//=======================================TŁO PLANETY================================================

    myColor = "blue";
    myRadius = 40;
    myRx = 400;
    myRy = 300
    myAlpha = Math.floor( Math.random() * 360 );
    myCircle = new Circle( myColor, myRadius, myRx, myRy, myAlpha );
    myCircles.push( myCircle );
//=================================================================================================

//=======================================CONTENT PLANETY================================================
      myColor = "green";
      myRadius = 15;
      myRx = 425;
      myRy = 300;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 10;
      myRx = 429;
      myRy = 310;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 10;
      myRx = 380;
      myRy = 285;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 8;
      myRx = 390;
      myRy = 270;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 8;
      myRx = 390;
      myRy = 275;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 7;
      myRx = 390;
      myRy = 295;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );

      myColor = "green";
      myRadius = 10;
      myRx = 380;
      myRy = 295;
      myAlpha = Math.floor( Math.random() * 360 );
      myCircle = new Content( myColor, myRadius, myRx, myRy, myAlpha );
      myCircles.push( myCircle );
//=================================================================================================

    myVar = setTimeout( nextFrame, 100 );
}
//=================================================================================================

function Circle( color, radius, rX, rY, alpha ) {
    this.X = 0;
    this.Y = 0;
    this.R = radius;
    this.Color = color;
    this.A = alpha;
    this.trX = rX;
    this.trY = rY;

    this.display = function() {
        context.fillStyle = this.Color;
        context.beginPath();
        context.arc( this.X, this.Y, this.R, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();


        context.fillStyle = "#E6DADA";
        context.beginPath();
        context.arc( 200, this.Y + this.R / 2, 70, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();


    }
}
//=================================================================================================


//=================================================================================================

function Content( color, radius, rX, rY, alpha ) {
    this.X = 0;
    this.Y = 0;
    this.R = radius;
    this.Color = color;
    this.A = alpha;
    this.trX = rX;
    this.trY = rY;

    this.display = function() {
        context.fillStyle = this.Color;
        context.beginPath();
        context.arc( this.X, this.Y, this.R, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();
    }
}
//=================================================================================================

function nextFrame() {
    context = myCanvas.getContext( "2d" );

    context.fillStyle = backgroundColor;
    context.clearRect( 0, 0, myCanvas.width, myCanvas.height );

    myAngle += 1;
    myAngle %= 360;

    var maxRadius = myCircles[ 0 ].R;
    for ( var i = 1; i < myCircles.length; i ++ )
    {
        if ( myCircles[ i ].R > maxRadius ) maxRadius = myCircles[ i ].R;
    }

    for ( i = 0; i < myCircles.length; i ++ )
    {
        myCircle = myCircles[ i ];
        var sinA = Math.sin( ( myAngle + myCircle.A ) * Math.PI / 180.0 * maxRadius / myCircle.R );
        var cosA = Math.cos( ( myAngle + myCircle.A ) * Math.PI / 180.0 * maxRadius / myCircle.R );
        context.save();
            context.transform( cosA, sinA, -sinA, cosA, myCircle.trX, myCircle.trY );
            myCircle.display();
        context.restore();
    }

    myVar = setTimeout( nextFrame, 100 );
}



var colorArray = [
  '#80ff00',
  '#bf80ff',
  '#005c99',
  '#006600',
  '#e6e600',
  '#b30059',
  '#adad85',

];


//.............................PLANET.................................................................

function Planet(x, y, dx, dy, radius){
 this.x = x;
 this.y = y;
 this.dx = dx;
 this.dy = dy;
 this.radius = radius;
 this.color = colorArray[Math.floor(Math.random()*colorArray.length)];

  this.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI *2, false);
   // ctx.strokeStyle = "brown";
    ctx.stroke();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  this.update = function(){

    if(this.x + this.radius> innerWidth || this.x - this.radius < 0)
    {
        this.dx=-this.dx;
    }
    this.x+= this.dx;

    if(this.y + this.radius> innerHeight || this.y - this.radius < 0)
    {
        this.dy=-this.dy;
    }
    this.x+= this.dx;
    this.y+= this.dy;
    this.draw();
  }
}
//.......................................END PLANET.........................................................


var circleArray = [];
for( var i = 0; i < 10; i++){
  var radius = 70;
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius *2) + radius;
  var dx = (Math.random() - 0.5);
  var dy = (Math.random() - 0.5);

  circleArray.push(new Planet(x, y, dx, dy, radius));
}


 function animate()
 {
     requestAnimationFrame(animate);
     ctx.clearRect(0,0,innerWidth, innerHeight);
     for(var i = 0; i < circleArray.length; i++){
        circleArray[i].update();
     }

}

animate();
</script>

相关问题
最新问题