如何用GPT4和Midjourney复制一款当年热门小游戏愤怒的小鸟，3分钟内在你电脑上运行起来（附代码）

最新推荐文章于 2024-01-07 13:23:08 发布

明羊羊

最新推荐文章于 2024-01-07 13:23:08 发布

阅读量209

点赞数

分类专栏： chatgpt 文章标签： midjourney

本文链接：https://blog.csdn.net/witforeveryang/article/details/134058339

版权

chatgpt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

愤怒的小鸟Flappy Bird当年是一款非常热门的游戏，开发者因此赚了大钱，今天小编就教大家如何用GPT4和Midjourney制作一款小游戏，即使你不会写代码也没关系，只要按小编的步骤来，1分钟就能把愤怒的小鸟在您电脑上运行起来。

第一步：进入我们AI写稿专家公众号：

pc端可访问：https://www.promptspower.com

输入prompts咒语：

作为世界级的游戏开发商。我想做一个像flappybird这样的简单游戏，你能给我写html和javascript代码吗？谢谢。

GPT4生成代码结果

<!DOCTYPE html>
<html>
    <head>
        <title>Flappy Bird</title>
        <style>
            body { background: #222; color: white; }
            canvas { background: #000; display: block; margin: 20px auto; }
        </style>
    </head>
    <body>
        <canvas id="game" width="400" height="600"></canvas>
        <script>
            var cvs = document.getElementById("game");
            var ctx = cvs.getContext("2d");

            // 加载图像
            var bird = new Image();
            var bg = new Image();
            var fg = new Image();
            var pipeNorth = new Image();
            var pipeSouth = new Image();

            bird.src = "images/bird.png";  // 设置相应的图片路径
            bg.src = "images/bg.png";
            fg.src = "images/fg.png";
            pipeNorth.src = "images/pipeNorth.png";
            pipeSouth.src = "images/pipeSouth.png";

            // 管道之间的间隙
            var gap = 85;
            var constant;

            // 小鸟的初始位置
            var bX = 10;
            var bY = 150;

            // 重力加速度
            var gravity = 1.5;

            // 计分板
            var score = 0;

            // 构造管道数组，并且初始化
            var pipe = [];
            pipe[0] = {
                x : cvs.width,
                y : 0
            };

            // 检测碰撞
            function collision(bX, bY, pipe) {
                for(var i = 0; i < pipe.length; i++) {
                    if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width &&
                        (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant)
                        || bY + bird.height >= cvs.height - fg.height) {
                            return true;
                    }
                }
                return false;
            }

            // 鼠标点击事件
            document.addEventListener("keydown", moveUp);
            function moveUp(){
                bY -= 25;
            }

            // 在canvas上绘制图像
            function draw(){
                ctx.drawImage(bg, 0, 0);

                for(var i = 0; i < pipe.length; i++){
                    constant = pipeNorth.height+gap;
                    ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);
                    ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y+constant);

                    pipe[i].x--;

                    if(pipe[i].x == 125){
                        pipe.push({
                            x : cvs.width,
                            y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
                        });
                    }

                    if(collision(bX, bY, pipe)) {
                        location.reload(); // 当碰撞发生时，刷新页面重新开始游戏
                    }

                    if(pipe[i].x == 5){
                        score++;
                    }
                }

                ctx.drawImage(fg, 0, cvs.height - fg.height);
                ctx.drawImage(bird, bX, bY);

                bY += gravity;

                ctx.fillStyle = "#000";
                ctx.font = "20px Verdana";
                ctx.fillText("Score : "+score,10,cvs.height-20);

                requestAnimationFrame(draw);
            }

            draw();
        </script>
    </body>
</html>

第二步：将生成结果复制到你的文本编辑器里，名字命名为bird.html