javascript - 关于创建连续移动、随机生成的 "3d"星空-6ren

javascript - 关于创建连续移动、随机生成的 "3d"星空

转载作者：行者123 更新时间：2023-11-28 04:55:14

我正在通过在 HTML Canvas 上开发一个小空间游戏来学习 JS。我正在尝试从随机生成的星星阵列创建 3D 星空。我有一个由 12 颗星组成的数组，是从包含 34 颗星的较大星体数组的元素中随机生成的。当一颗星星离开屏幕的边界时，我想将其从较小的数组中删除，并用较大的星星数组中另一个随机生成的元素替换它，同时保持它在动画函数中不断移动。我尝试了几种方法，但我似乎找不到正确的语法......或者可能是解决问题的正确方法。任何帮助将不胜感激。代码如下:

<canvas id="myCanvas"  width="1024" height="768">
</canvas> 

<script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");        

    var starsArray; 
    var randStarsArray;        
    var numStars = 12;  


    // Star object
    var Star = function(x, y, width, height, velX, velY) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.velX = velX;
        this.velY = velY;
    }   

    // Create individual stars
    var star1 = new Star(myCanvas.width/2 + (150 * Math.cos(135*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(135*Math.PI/180)), 5, 5, -6, 6);     
    var star2 = new Star(myCanvas.width/2 + (135 * Math.cos(135*Math.PI/180)), myCanvas.height/2 + (135 * Math.sin(135*Math.PI/180)), 5, 5, -6, 6);     
    var star3 = new Star(myCanvas.width/2 + (150 * Math.cos(320*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(320*Math.PI/180)), 5, 5, 6, -6);
    var star4 = new Star(myCanvas.width/2 + (150 * Math.cos(310*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(310*Math.PI/180)), 5, 5, 6, -6);     
    var star5 = new Star(myCanvas.width/2 + (100 * Math.cos(270*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(270*Math.PI/180)), 5, 5, 0, -6);     
    var star6 = new Star(myCanvas.width/2 + (150 * Math.cos(0*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(0*Math.PI/180)), 5, 5, 6, 0);      
    var star7 = new Star(myCanvas.width/2 + (100 * Math.cos(90*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(90*Math.PI/180)), 5, 5, 0, 6);        
    var star8 = new Star(myCanvas.width/2 + (100 * Math.cos(180*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(180*Math.PI/180)), 5, 5, -6, 0);     
    var star9 = new Star(myCanvas.width/2 + (200 * Math.cos(270*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(270*Math.PI/180)), 5, 5, 0, -6);     
    var star10 = new Star(myCanvas.width/2 + (200 * Math.cos(0*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(0*Math.PI/180)), 5, 5, 6, 0);     
    var star11 = new Star(myCanvas.width/2 + (200 * Math.cos(90*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(90*Math.PI/180)), 5, 5, 0, 6);       
    var star12 = new Star(myCanvas.width/2 + (150 * Math.cos(60*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(60*Math.PI/180)), 5, 5, 3, 6);       
    var star13 = new Star(myCanvas.width/2 + (200 * Math.cos(45*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(45*Math.PI/180)), 5, 5, 6, 6);       
    var star14 = new Star(myCanvas.width/2 + (150 * Math.cos(210*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(210*Math.PI/180)), 5, 5, -6, -3);       
    var star15 = new Star(myCanvas.width/2 + (200 * Math.cos(225*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(225*Math.PI/180)), 5, 5, -6, -6);       
    var star16 = new Star(myCanvas.width/2 + (200 * Math.cos(150*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(150*Math.PI/180)), 5, 5, -6, 3);        
    var star17 = new Star(myCanvas.width/2 + (100 * Math.cos(150*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(150*Math.PI/180)), 5, 5, -6, 3);        
    var star18 = new Star(myCanvas.width/2 + (100 * Math.cos(30*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(30*Math.PI/180)), 5, 5, 6, 3);       
    var star19 = new Star(myCanvas.width/2 + (250 * Math.cos(180*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(180*Math.PI/180)), 5, 5, -6, 0);        
    var star20 = new Star(myCanvas.width/2 + (100 * Math.cos(330*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(330*Math.PI/180)), 5, 5, 6, -3);        
    var star21 = new Star(myCanvas.width/2 + (150 * Math.cos(300*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(300*Math.PI/180)), 5, 5, 3, -6);        
    var star22 = new Star(myCanvas.width/2 + (150 * Math.cos(240*Math.PI/180)), myCanvas.height/2 + (150 * Math.sin(240*Math.PI/180)), 5, 5, -3, -6);       
    var star23 = new Star(myCanvas.width/2 + (250 * Math.cos(240*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(240*Math.PI/180)), 5, 5, -3, -6);       
    var star24 = new Star(myCanvas.width/2 + (250 * Math.cos(330*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(330*Math.PI/180)), 5, 5, 6, -3);        
    var star25 = new Star(myCanvas.width/2 + (250 * Math.cos(30*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(30*Math.PI/180)), 5, 5, 6, 3);       
    var star26 = new Star(myCanvas.width/2 + (100 * Math.cos(120*Math.PI/180)), myCanvas.height/2 + (100 * Math.sin(120*Math.PI/180)), 5, 5, -3, 6);        
    var star27 = new Star(myCanvas.width/2 + (250 * Math.cos(135*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(135*Math.PI/180)), 5, 5, -6, 6);        
    var star28 = new Star(myCanvas.width/2 + (250 * Math.cos(120*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(120*Math.PI/180)), 5, 5, -3, 6);        
    var star29 = new Star(myCanvas.width/2 + (200 * Math.cos(210*Math.PI/180)), myCanvas.height/2 + (200 * Math.sin(210*Math.PI/180)), 5, 5, -6, -3);
    var star30 = new Star(myCanvas.width/2 + (250 * Math.cos(300*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(300*Math.PI/180)), 5, 5, 3, -6);        
    var star31 = new Star(myCanvas.width/2 + (25 * Math.cos(45*Math.PI/180)), myCanvas.height/2 + (25 * Math.sin(45*Math.PI/180)), 5, 5, 6, -6);
    var star32 = new Star(myCanvas.width/2 + (25 * Math.cos(225*Math.PI/180)), myCanvas.height/2 + (25 * Math.sin(225*Math.PI/180)), 5, 5, -6, -6);
    var star33 = new Star(myCanvas.width/2 + (250 * Math.cos(60*Math.PI/180)), myCanvas.height/2 + (250 * Math.sin(60*Math.PI/180)), 5, 5, 3, 6);
    var star34 = new Star(myCanvas.width/2 + (25 * Math.cos(315*Math.PI/180)), myCanvas.height/2 + (25 * Math.sin(315*Math.PI/180)), 5, 5, 6, -6);

    // Game initialization
    function init() {
        startGame();
    }

    // Start game
    function startGame(){

        // Game variables
        starsArray = new Array(); 
        randStarsArray = new Array();               

        // Push stars onto array
        starsArray.push(star1);
        starsArray.push(star2);
        starsArray.push(star3);
        starsArray.push(star4);
        starsArray.push(star5);
        starsArray.push(star6);
        starsArray.push(star7);
        starsArray.push(star8);
        starsArray.push(star9);
        starsArray.push(star10);
        starsArray.push(star11);
        starsArray.push(star12);
        starsArray.push(star13);
        starsArray.push(star14);
        starsArray.push(star15);
        starsArray.push(star16);
        starsArray.push(star17);
        starsArray.push(star18);
        starsArray.push(star19);
        starsArray.push(star20);
        starsArray.push(star21);
        starsArray.push(star22);
        starsArray.push(star23);
        starsArray.push(star24);
        starsArray.push(star25);
        starsArray.push(star26);
        starsArray.push(star27);
        starsArray.push(star28);
        starsArray.push(star29);
        starsArray.push(star30);
        starsArray.push(star31);
        starsArray.push(star32);
        starsArray.push(star33);
        starsArray.push(star34);            


        for(i = 0; i < numStars; i++){              
            randStarsArray[i] = starsArray[Math.floor(Math.random() * 34)]; 
        }                       

        animate();
    }


    function changeStar(){      
        var index = randStarsArray.indexOf(tempStar);

        if (index > -1) {
            //randStarsArray[index] = starsArray[Math.floor(Math.random() * 34)];
            randStarsArray.splice(index, 1);
            randStarsArray.push(starsArray[Math.floor(Math.random() * 34)]);                                
        }           
    }


    // Animation loop
    function animate(){

        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 

        for(i = 0; i < numStars; i++){  
            var tempStar = randStarsArray[i];
            ctx.fillStyle = "rgb(255, 255, 255)"; // white stars            
            ctx.fillRect(randStarsArray[i].x, randStarsArray[i].y, randStarsArray[i].width, randStarsArray[i].height);              

            tempStar.x += tempStar.velX;
            tempStar.y += tempStar.velY;                                


            if(tempStar.x + tempStar.width < 0 || tempStar.x > myCanvas.width || 
              tempStar.y + tempStar.height < 0 || tempStar.y > myCanvas.height){

                changeStar();
            }

        }


        setTimeout(animate, 33);
    }


    init();


</script>

最佳答案

<script>
    var Canvas = document.getElementById("Canvas");
    var ctx = Canvas.getContext("2d");
    var starsArray;
    var randStarsArray;
    var numStars = 12;
    // Star object
    var Star = function(x, y, width, height, velX, velY) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.velX = velX;
        this.velY = velY;
    }
    var M = [150, 135, 150, 150, 100, 150, 100, 100, 200, 200, 200, 150, 200, 150, 200, 200, 100, 100, 250, 100, 150, 150, 250, 250, 250, 100, 250, 250, 200, 250, 25, 25, 250, 25];
    var N = [135, 135, 320, 310, 270, 0, 90, 180, 270, 0, 90, 60, 45, 210, 225, 150, 150, 30, 180, 330, 300, 240, 240, 330, 30, 120, 135, 120, 210, 300, 45, 225, 60, 315];
    var Z = [-6, -6, 6, 6, 0, 6, 0, -6, 0, 6, 0, 3, 6, -6, -6, -6, -6, 6, -6, 6, 3, -3, -3, 6, 6, -3, -3 - 6, -3, -6, 6, -6, 3, 6];
    var K = [6, 6, -6, -6, -6, 0, 6, 0, -6, 0, 6, 6, 6, -3, -6, 3, 3, 3, 0, -3, -6, -6, -6, -3, 3, 6, 6, 6, -3, -6, -6, -6, 6, -6];
    var star = [];
    for (var i = 0; i <= 34; i++) {
        star[i] = new Star(Canvas.width / 2 + (M[i] * Math.cos(N[i] * Math.PI / 180)), Canvas.height / 2 + (M[i] * Math.sin(N[i] * Math.PI / 180)), 5, 5, Z[i], K[i]);
    }
    // Game initialization
    function init() {
        startGame();
    }
    // Start game
    function startGame() {
        // Game variables
        starsArray = [];
        randStarsArray = [];

        // Push stars onto array
        // 这是所有的star
        for (var i = 0; i < star.length; i++) {
            starsArray.push(star[i])
        }
        // console.dir(starsArray);//所有的星星
        var randomArray = []; //渲染的 星星
        // 判断数据是否为12个数据
        while (randomArray.length < numStars) {
            var random = Math.floor(Math.random() * 34);
            if (randomArray.indexOf(random) === -1) {
                randomArray.push(random);
            }
        }
        console.log(randomArray)

        for (var i = 0; i < randomArray.length; i++) {
            randStarsArray[i] = starsArray[randomArray[i]];
        }
        console.log(randStarsArray);
        animate();
    }

    // Animation loop
    function animate() {
        ctx.clearRect(0, 0, Canvas.width, Canvas.height);
        for (i = 0; i < numStars; i++) {
            var tempStar = randStarsArray[i];
            console.log(tempStar);
            ctx.fillStyle = "rgb(55, 100, 0)"; // white stars
            ctx.fillRect(tempStar.x, tempStar.y, tempStar.width, tempStar.height);


            tempStar.x += tempStar.velX;
            tempStar.y += tempStar.velY;
            if (tempStar.x + tempStar.width < 0 || tempStar.x > Canvas.width ||
                tempStar.y + tempStar.height < 0 || tempStar.y > Canvas.height) {

                changeStar(tempStar);
            }
        }
        setTimeout(animate, 300);
    }



    function changeStar(tempStar) {
        var index = randStarsArray.indexOf(tempStar);
        if (index > -1) {
            //randStarsArray[index] = starsArray[Math.floor(Math.random() * 34)];
            randStarsArray.splice(index, 1);
            randStarsArray.push(starsArray[Math.floor(Math.random() * 34)]);
        }
    }

    init();
    </script>`enter code here`

关于javascript - 关于创建连续移动、随机生成的 "3d"星空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42604727/

文章推荐： javascript - 从无序列表或有序列表中添加和删除数组元素

文章推荐： c++ - 使用用户输入停止倒数计时器

文章推荐： c# - c#中来自c++的unsigned char数组

文章推荐： c++ - 如何通过队列指针访问存储在节点中的类中的数据？

Python 随机随机
我让随机数低于之前的随机数。 if Airplane==1: while icounter0: print "You have enoph fuel to get to New
随机 BigFloats Julia
是否可以生成 BigFloat 的随机数？类型均匀分布在区间 [0,1)? 我的意思是，因为 rand(BigFloat)不可用，看来我们必须使用 BigFloat(rand())为了那个结局。然而，
random - 无法创建抽象类的实例(随机)
我正在尝试学习 Kotlin，所以我正在学习互联网上的教程，其中讲师编写了一个与他们配合良好的代码，但它给我带来了错误。这是错误 Error:(26, 17) Kotlin: Cannot crea
java - 随机/随机比较器
是否有任何方法可以模拟 Collections.shuffle 的行为，而不使比较器容易受到排序算法实现的影响，从而保证结果的安全？我的意思是不违反类似的契约(Contract)等.. 最佳答案在
Lua:随机:百分比
我正在创建一个游戏，目前必须处理一些math.random问题。我的Lua能力不是那么强，你觉得怎么样您能制定一个使用 math.random 和给定百分比的算法吗？我的意思是这样的函数: fu
java - 如何在JavaFX场景中定位按钮？ (随机)
我想以某种方式让按钮在按下按钮时随机改变位置。我有一个想法如何解决这个问题，其中一个我在下面突出显示，但我已经认为这不是我需要的。 import javafx.application.Applicat
java - 随机#猜谜游戏无限循环
对于我的 Java 类(class)，我应该制作一个随机猜数字游戏。我一直陷入过去几天创建的循环中。程序的输出总是无限循环，我不明白为什么。非常感谢任何帮助。 /* This program wi
java - 随机(？)ElementNotVisibleException
我已经查看了涉及该主题的一些其他问题，但我没有在任何地方看到这个特定问题。我有一个点击 Web 元素的测试。我尝试通过 ID 和 XPath 引用它，并使用 wait.until() 等待它变得可见。
c# - 随机 InvalidCastException
我在具有自定义类的字典和列表中遇到了该异常。示例: List dsa = (List)Session["Display"]; 当我使用 Session 时，转换工作了 10-20 次..然后它开始抛
javascript - 数字游戏 - 随机
需要帮助以了解如何执行以下操作: 每隔 2 秒，这两个数字将生成包含从 1 到 3 的整数值的随机数。按下“匹配”按钮后，如果两个数字相同，则绿色标签上的数字增加 1。按下“匹配”按钮后，如果两个
C 随机，有问题
void getS(char *fileName){ FILE *src; if((src = fopen(fileName, "r")) == NULL){ prin
PHP MySQL 随机
如果我有 2 个具有以下字段的 MySQL 数据库... RequestDB: - Username - Category DisplayDB: - Username - Category
postgresql 随机()错误？
我有以下语句 select random() * 999 + 111 from generate_series(1,10) 结果是: 690,046183290426 983,732229881454
php - 随机标签不会消失
我有一个使用 3x4 CSS 网格构建的简单网站。但出于某种原因，当我在 chrome“检查”中检查页面时，有一个奇怪的空白显然不在我的代码中的标签。它会导致网站上出现额外的一行，从而导致出现
javascript动画后不透明度有时会(随机)改变
我有两个动画，一个是“过渡”，它在悬停时缩小图像，另一个是 animation2，其中图像的不透明度以周期性间隔重复变化。我有 animation2 在图像上进行，当我将鼠标悬停在它上面时，anim
c++ - 解释这个c++随机
如图所示post在 C++ 中有几种生成随机 float 的方法。但是我不完全理解答案的第三个选项: float r3 = LO + static_cast (rand()) /( static_c
javascript - 随机.addClass到多个div而不重复
我正在尝试将类添加到具有相同类的三个 div，但我不希望任何被添加的类重复。我有一个脚本可以将一个类添加到同时显示的 1、2 或 3 个 div。期望的效果是将图像显示为背景图像，并且在我的样式表中
python - 嵌套列表中的唯一值 - 随机
我有一个基本上可以工作的程序，它创建由用户设置的大小的嵌套列表，并根据用户输入重复。但是，我希望各个集合仅包含唯一值，目前这是我的输出。 > python3 testv.py Size of you
C# 随机(长)
我正在尝试基于 C# 中的种子生成一个数字。唯一的问题是种子太大而不能成为 int32。有什么方法可以像种子一样使用 long 吗？是的，种子必须很长。最佳答案这是我移植的 Java.Util.
c - 随机 float
我写这个函数是为了得到一个介于 0 .. 1 之间的伪随机 float : float randomFloat() { float r = (float)rand()/(float)RAN

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 关于创建连续移动、随机生成的 "3d"星空