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:
- Write a simple space invade game based on HTML5
We tested with 3 AI engines, and here are the results:
- Google Bard: Nope, the code can’t run, as it included an invalid library.
- 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.
- 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>
