AI Showdown Google Bard vs. OpenAI GPT4 vs. AI21 Jurassic-2: Coding Round 1

1 of the hot topic came along OpenAI in the end of 2022 is, can AI write the code better then human being, or can AI replace a real human programmer?

AI can generate code without a doubt, but how good it is?

We shall try it out, by asking AI to write a classic space invader game based on HTML5, and we will see how it is doing straight from the result, without having us to modify:

  1. Write a simple space invade game based on HTML5

We tested with 3 AI engines, and here are the results:

  1. Google Bard: Nope, the code can’t run, as it included an invalid library.
  2. OpenAI GPT4: The code able to run, and we able to fire the missile by using keyboard, although it can’t destroy the target. Not perfect, but good enough.
  3. AI21 Jurassic-2 Jumbo: The code don’t seems like space invader to me… and it keep flickering…

My pick: OpenAI GPT4, and my conclusion, maybe AI can’t take over real programmer job at the moment, it certainly able to ease some task of programmers.

Tools

Google Bard

<!DOCTYPE html>
<html>
<head>
<title>Space Invaders</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.12.0/p5.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Create the player ship
var player = {
  x: 250,
  y: 400,
  width: 50,
  height: 50
};
// Create the aliens
var aliens = [];
for (var i = 0; i < 10; i++) {
  aliens.push({
    x: i * 50,
    y: 0,
    width: 50,
    height: 50
  });
}
// Draw the game objects
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Draw the player ship
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);
  // Draw the aliens
  for (var i = 0; i < aliens.length; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(aliens[i].x, aliens[i].y, aliens[i].width, aliens[i].height);
  }
}
// Handle keyboard input
document.addEventListener("keydown", function(event) {
  switch (event.keyCode) {
    case 37: // Left arrow key
      player.x -= 50;
      break;
    case 39: // Right arrow key
      player.x += 50;
      break;
  }
});
// Update the game state
function update() {
  // Move the aliens down
  for (var i = 0; i < aliens.length; i++) {
    aliens[i].y += 10;
  }
  // Check if any aliens have reached the bottom of the screen
  for (var i = 0; i < aliens.length; i++) {
    if (aliens[i].y > canvas.height) {
      // Game over!
      alert("You lose!");
    }
  }
  // Check if the player has been hit by an alien
  for (var i = 0; i < aliens.length; i++) {
    if (aliens[i].x > player.x - player.width &&
        aliens[i].x < player.x + player.width &&
        aliens[i].y > player.y - player.height &&
        aliens[i].y < player.y + player.height) {
      // Player hit!
      alert("You lose!");
    }
  }
  // Fire a bullet if the spacebar is pressed
  if (window.event && window.event.keyCode == 32) {
    var bullet = {
      x: player.x + player.width / 2,
      y: player.y - 25,
      width: 10,
      height: 10
    };
    // Check if the bullet has hit an alien
    for (var i = 0; i < aliens.length; i++) {
      if (bullet.x > aliens[i].x - bullet.width &&
          bullet.x < aliens[i].x + bullet.width &&
          bullet.y > aliens[i].y - bullet.height &&
          bullet.y < aliens[i].y + bullet.height) {
        // Alien hit!
        aliens.splice(i, 1);
      }
    }
  }
}
// Start the game loop
requestAnimationFrame(update);
</script>
</body>
</html>

OpenAI GPT4

<!DOCTYPE html>
<html>
<head>
    <style>
        #gameZone { position:relative; width:600px; height:600px; background:black; }
        .player, .alien { position:absolute; width:30px; height:30px; }
        .player { background:green; }
        .alien { background:red; }
        .missile { position:absolute; width:10px; height:20px; background:yellow; }
    </style>
</head>
<body>
    <div id="gameZone">
        <div id="player" class="player"></div>
    </div>
    <script>
        var player = document.getElementById('player'),
            gameZone = document.getElementById('gameZone'),
            aliens = [],
            missiles = [],
            playerSpeed = 5;
        player.style.left = '285px';
        player.style.bottom = '0px';
        for (let i = 0; i < 10; i++) {
            var alien = document.createElement('div');
            alien.classList.add('alien');
            alien.style.left = (i * 60) + 'px';
            alien.style.bottom = '570px';
            gameZone.appendChild(alien);
            aliens.push(alien);
        }
        window.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowLeft':
                    player.style.left = parseInt(player.style.left) - playerSpeed + 'px';
                    break;
                case 'ArrowRight':
                    player.style.left = parseInt(player.style.left) + playerSpeed + 'px';
                    break;
                case ' ':
                    var missile = document.createElement('div');
                    missile.classList.add('missile');
                    missile.style.left = parseInt(player.style.left) + 10 + 'px';
                    missile.style.bottom = '30px';
                    gameZone.appendChild(missile);
                    missiles.push(missile);
                    break;
            }
        });
        setInterval(function () {
            for (let i = 0; i < missiles.length; i++) {
                var pos = parseInt(missiles[i].style.bottom);
                if (pos >= 600) {
                    missiles[i].parentNode.removeChild(missiles[i]);
                    missiles.splice(i, 1);
                } else {
                    missiles[i].style.bottom = pos + 5 + 'px';
                }
            }
            for (let i = 0; i < aliens.length; i++) {
                for (let j = 0; j < missiles.length; j++) {
                    if (missiles[j].style.left === aliens[i].style.left &&
                        missiles[j].style.bottom === aliens[i].style.bottom) {
                        missiles[j].parentNode.removeChild(missiles[j]);
                        missiles.splice(j, 1);
                        aliens[i].parentNode.removeChild(aliens[i]);
                        aliens.splice(i, 1);
                    }
                }
            }
        }, 50);
    </script>
</body>
</html>

AI21 Jurassic Model 2

<!DOCTYPE html>
<html>
  <head>
    <title>Space Invaders</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #game {
        width: 400px;
        height: 400px;
        border: 1px solid black;
      }
      #player {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 50px;
        height: 50px;
        background-color: black;
        border-radius: 50%;
      }
      #enemy {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="player"></div>
      <div id="enemy"></div>
    </div>
    <script>
      const player = document.getElementById('player');
      const enemy = document.getElementById('enemy');
      let score = 0;
      let lives = 3;
      function update() {
        // Update player position
        player.style.left = Math.floor(Math.random() * 400) + 'px';
        player.style.top = Math.floor(Math.random() * 400) + 'px';
        // Update enemy position
        enemy.style.left = Math.floor(Math.random() * 400) + 'px';
        enemy.style.top = Math.floor(Math.random() * 400) + 'px';
        // Check for collision
        if (player.offsetWidth + player.offsetLeft > enemy.offsetWidth + enemy.offsetLeft &&
          player.offsetTop + player.offsetHeight > enemy.offsetTop + enemy.offsetHeight) {
          lives--;
          if (lives === 0) {
            alert('You lose!');
            score = 0;
          }
        }
      }
      function shoot() {
        player.style.left = Math.floor(Math.random() * 400) + 'px';
        player.style.top = Math.floor(Math.random() * 400) + 'px';
      }
      setInterval(update, 100);
      setInterval(shoot, 1000);
    </script>
  </body>
</html>
Leave a Reply

Your email address will not be published. Required fields are marked *

Prev
AI Showdown Google Bard vs. OpenAI GPT4 vs. AI21 Jurassic-2: Language Round 1

AI Showdown Google Bard vs. OpenAI GPT4 vs. AI21 Jurassic-2: Language Round 1

So how well the 3 AI engines able to do with language?

Next
AI Showdown Google Bard vs. OpenAI GPT4 vs. AI21 Jurassic-2: Language Round 2

AI Showdown Google Bard vs. OpenAI GPT4 vs. AI21 Jurassic-2: Language Round 2

Today let's test the language capability for the 3 AI engine again: Google Bard,

You May Also Like
Total
0
Share