ChatGPT4.0 first touch

Posted on

ChatGPT4.0 最终游戏体验(用QAOL进行操作)
ChatGPT4.0 发布了，今天第一次接触，截图如下：

先热身一下： 1

然后开始做小游戏： 2

然后优化： 3

游戏截图： 4

代码flappy_bird.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flappy Bird</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        display: block;
        background-color: #add8e6;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="640"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      let birdY = canvas.height / 2;
      let velocity = 0;
      let gravity = 1;
      let jumpHeight = 15;

      function drawStar(x, y, radius, color) {
        const angle = Math.PI / 5;
        ctx.save();
        ctx.beginPath();
        ctx.translate(x, y);
        ctx.rotate(Math.PI / 2);
        ctx.fillStyle = color;
        for (let i = 0; i < 10; i++) {
          ctx.lineTo(0, 0 - (i % 2 === 0 ? radius : radius / 2));
          ctx.rotate(angle);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }

      function drawBird() {
        drawStar(60, birdY, 10, "red");
      }

      function updateBird() {
        velocity += gravity;
        birdY += velocity;
      }

      function jump() {
        velocity = -jumpHeight;
      }

      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        updateBird();
        drawBird();
        requestAnimationFrame(gameLoop);
      }

      canvas.addEventListener("click", jump);
      gameLoop();
    </script>
  </body>
</html>

更复杂的游戏： 5

优化: 6

在优化： 7 由于浏览器无法直接生成音频，所以自己找了音频文件，放到html同文件夹即可。

游戏截图，体验效果炸裂！ 8

代码pingpang.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pong Game</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        display: block;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <audio id="springSound" src="spring.mp3" preload="auto"></audio>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const springSound = document.getElementById("springSound");

      const paddleHeight = 100;
      const paddleWidth = 20;
      let paddleA_Y = (canvas.height - paddleHeight) / 2;
      let paddleB_Y = (canvas.height - paddleHeight) / 2;
      const starRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height / 2;
      let ballSpeedX = 5;
      let ballSpeedY = 3;

      let scoreA = 0;
      let scoreB = 0;

      let keys = {}; // 记录按下的键

      let cloudX1 = 50;
      let cloudX2 = 400;

      function drawPaddle(x, y) {
        ctx.fillStyle = "#fff";
        ctx.fillRect(x, y, paddleWidth, paddleHeight);
      }

      function drawStar(x, y, radius, color) {
        const angle = Math.PI / 5;
        ctx.save();
        ctx.beginPath();
        ctx.translate(x, y);
        ctx.rotate(Math.PI / 2);
        ctx.fillStyle = color;
        for (let i = 0; i < 10; i++) {
          ctx.lineTo(0, 0 - (i % 2 === 0 ? radius : radius / 2));
          ctx.rotate(angle);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }

      function drawBall(x, y) {
        drawStar(x, y, starRadius, "yellow");
      }

      function drawScore() {
        ctx.fillStyle = "#fff";
        ctx.font = "30px Arial";
        ctx.fillText(scoreA, canvas.width / 4, 50);
        ctx.fillText(scoreB, (canvas.width * 3) / 4, 50);
      }

      function drawCloud(x, y) {
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(x, y, 25, 0, Math.PI * 2, true);
        ctx.arc(x + 50, y, 25, 0, Math.PI * 2, true);
        ctx.arc(x + 25, y - 25, 25, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
      }

      function update() {
        ballX += ballSpeedX;
        ballY += ballSpeedY;

        if (keys["q"]) paddleA_Y -= 20;
        if (keys["a"]) paddleA_Y += 20;
        if (keys["o"]) paddleB_Y -= 20;
        if (keys["l"]) paddleB_Y += 20;

        checkPaddleBounds();

        if (ballY < 0 || ballY + starRadius * 2 > canvas.height) {
          ballSpeedY = -ballSpeedY;
        }

        if (
          ballX < paddleWidth &&
          ballY + starRadius * 2 > paddleA_Y &&
          ballY < paddleA_Y + paddleHeight
        ) {
          ballSpeedX = -ballSpeedX;
          springSound.play();
        } else if (
          ballX + starRadius * 2 > canvas.width - paddleWidth &&
          ballY + starRadius * 2 > paddleB_Y &&
          ballY < paddleB_Y + paddleHeight
        ) {
          ballSpeedX = -ballSpeedX;
          springSound.play();
        }

        if (ballX < 0) {
          scoreB++;
          resetBall();
        } else if (ballX + starRadius * 2 > canvas.width) {
          scoreA++;
          resetBall();
        }

        cloudX1 -= 1;
        cloudX2 -= 1;

        if (cloudX1 + 75 < 0) cloudX1 = canvas.width;
        if (cloudX2 + 75 < 0) cloudX2 = canvas.width;
      }

      function resetBall() {
        ballX = canvas.width / 2;
        ballY = canvas.height / 2;
        ballSpeedX = -ballSpeedX;
      }

      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        update();
        drawPaddle(0, paddleA_Y);
        drawPaddle(canvas.width - paddleWidth, paddleB_Y);
        drawBall(ballX, ballY);
        drawScore();
        drawCloud(cloudX1, 100);
        drawCloud(cloudX2, 200);
        requestAnimationFrame(gameLoop);
      }

      function movePaddle(e) {
        keys[e.key] = e.type === "keydown";
      }

      function checkPaddleBounds() {
        if (paddleA_Y < 0) {
          paddleA_Y = 0;
        } else if (paddleA_Y + paddleHeight > canvas.height) {
          paddleA_Y = canvas.height - paddleHeight;
        }

        if (paddleB_Y < 0) {
          paddleB_Y = 0;
        } else if (paddleB_Y + paddleHeight > canvas.height) {
          paddleB_Y = canvas.height - paddleHeight;
        }
      }

      document.addEventListener("keydown", movePaddle);
      document.addEventListener("keyup", movePaddle);
      gameLoop();
    </script>
  </body>
</html>