rajilesh/my first game in open ai codex

## my first game in open ai codex

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var ship = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 20,
  height: 20,
  speed: 5,
  color: '#00ff00'
};

var keys = {
  up: false,
  down: false,
  left: false,
  right: false
};

var asteroids = [];

function drawShip() {
  ctx.fillStyle = ship.color;
  ctx.fillRect(ship.x, ship.y, ship.width, ship.height);
}

function drawAsteroids() {
  for (var i = 0; i < asteroids.length; i++) {
    ctx.fillStyle = asteroids[i].color;
    ctx.fillRect(asteroids[i].x, asteroids[i].y, asteroids[i].width, asteroids[i].height);
  }
}

function moveShip() {
  if (keys.up) {
    ship.y -= ship.speed;
  }
  if (keys.down) {
    ship.y += ship.speed;
  }
  if (keys.left) {
    ship.x -= ship.speed;
  }
  if (keys.right) {
    ship.x += ship.speed;
  }
}

function moveAsteroids() {
  for (var i = 0; i < asteroids.length; i++) {
    asteroids[i].y += asteroids[i].speed;
  }
}

function createAsteroid() {
  var asteroid = {
    x: Math.random() * canvas.width,
    y: 0,
    width: 20,
    height: 20,
    speed: 5,
    color: '#ff0000'
  };
  asteroids.push(asteroid);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawShip();
  drawAsteroids();
  moveShip();
  moveAsteroids();
  requestAnimationFrame(draw);
}

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 38) {
    keys.up = true;
  }
  if (e.keyCode === 40) {
    keys.down = true;
  }
  if (e.keyCode === 37) {
    keys.left = true;
  }
  if (e.keyCode === 39) {
    keys.right = true;
  }
});

document.addEventListener('keyup', function(e) {
  if (e.keyCode === 38) {
    keys.up = false;
  }
  if (e.keyCode === 40) {
    keys.down = false;
  }
  if (e.keyCode === 37) {
    keys.left = false;
  }
  if (e.keyCode === 39) {
    keys.right = false;
  }
});

setInterval(createAsteroid, 1000);

draw();
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
            <svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
            position: relative;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><defs><style>.cls-1{fill:#fff;}</style></defs><title>openai-symbol-flat-white</title><path class="cls-1" d="M617.24,354a126.36,126.36,0,0,0-10.86-103.79,127.8,127.8,0,0,0-137.65-61.32,126.36,126.36,0,0,0-95.31-42.49A127.81,127.81,0,0,0,251.5,234.89,126.4,126.4,0,0,0,167,296.19a127.82,127.82,0,0,0,15.72,149.86,126.36,126.36,0,0,0,10.86,103.79,127.81,127.81,0,0,0,137.65,61.32,126.36,126.36,0,0,0,95.31,42.49A127.81,127.81,0,0,0,548.5,565.11,126.4,126.4,0,0,0,633,503.81,127.82,127.82,0,0,0,617.24,354ZM426.58,620.49a94.79,94.79,0,0,1-60.85-22c.77-.42,2.12-1.16,3-1.7l101-58.34a16.42,16.42,0,0,0,8.3-14.37V381.69l42.69,24.65a1.52,1.52,0,0,1,.83,1.17V525.43A95.18,95.18,0,0,1,426.58,620.49ZM222.34,533.26A94.74,94.74,0,0,1,211,469.56c.75.45,2.06,1.25,3,1.79l101,58.34a16.44,16.44,0,0,0,16.59,0l123.31-71.2v49.3a1.53,1.53,0,0,1-.61,1.31L352.19,568.05A95.16,95.16,0,0,1,222.34,533.26ZM195.77,312.77a94.71,94.71,0,0,1,49.48-41.68c0,.87-.05,2.41-.05,3.48V391.25a16.41,16.41,0,0,0,8.29,14.36L376.8,476.8l-42.69,24.65a1.53,1.53,0,0,1-1.44.13l-102.11-59A95.16,95.16,0,0,1,195.77,312.77Zm350.74,81.62L423.2,323.19l42.69-24.64a1.53,1.53,0,0,1,1.44-.13l102.11,58.95a95.08,95.08,0,0,1-14.69,171.55c0-.88,0-2.42,0-3.49V408.75A16.4,16.4,0,0,0,546.51,394.39ZM589,330.44c-.75-.46-2.06-1.25-3-1.79L485,270.31a16.46,16.46,0,0,0-16.59,0l-123.31,71.2v-49.3a1.53,1.53,0,0,1,.61-1.31L447.81,232A95.07,95.07,0,0,1,589,330.44ZM321.89,418.31l-42.7-24.65a1.52,1.52,0,0,1-.83-1.17V274.57a95.07,95.07,0,0,1,155.9-73c-.77.42-2.11,1.16-3,1.7l-101,58.34a16.41,16.41,0,0,0-8.3,14.36Zm23.19-50L400,336.59l54.92,31.7v63.42L400,463.41l-54.92-31.7Z"/></svg>
            <div style="display: inline-block; color: white; vertical-align: top; margin-top: 4px; font-family: Helvetica, sans-serif;">
                Code generated by <a style="color: white; text-decoration: none; font-weight: bold;" href="https://openai.com/blog/openai-codex/">OpenAI Codex</a>
            </div>
        </div>
    </body>
</html>

	<html>
	<head>
	<script>
	document.addEventListener("DOMContentLoaded", function() {

	var canvas = document.createElement('canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	document.body.appendChild(canvas);
	var ctx = canvas.getContext('2d');

	var ship = {
	x: canvas.width / 2,
	y: canvas.height / 2,
	width: 20,
	height: 20,
	speed: 5,
	color: '#00ff00'
	};

	var keys = {
	up: false,
	down: false,
	left: false,
	right: false
	};

	var asteroids = [];

	function drawShip() {
	ctx.fillStyle = ship.color;
	ctx.fillRect(ship.x, ship.y, ship.width, ship.height);
	}

	function drawAsteroids() {
	for (var i = 0; i < asteroids.length; i++) {
	ctx.fillStyle = asteroids[i].color;
	ctx.fillRect(asteroids[i].x, asteroids[i].y, asteroids[i].width, asteroids[i].height);
	}
	}

	function moveShip() {
	if (keys.up) {
	ship.y -= ship.speed;
	}
	if (keys.down) {
	ship.y += ship.speed;
	}
	if (keys.left) {
	ship.x -= ship.speed;
	}
	if (keys.right) {
	ship.x += ship.speed;
	}
	}

	function moveAsteroids() {
	for (var i = 0; i < asteroids.length; i++) {
	asteroids[i].y += asteroids[i].speed;
	}
	}

	function createAsteroid() {
	var asteroid = {
	x: Math.random() * canvas.width,
	y: 0,
	width: 20,
	height: 20,
	speed: 5,
	color: '#ff0000'
	};
	asteroids.push(asteroid);
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawShip();
	drawAsteroids();
	moveShip();
	moveAsteroids();
	requestAnimationFrame(draw);
	}

	document.addEventListener('keydown', function(e) {
	if (e.keyCode === 38) {
	keys.up = true;
	}
	if (e.keyCode === 40) {
	keys.down = true;
	}
	if (e.keyCode === 37) {
	keys.left = true;
	}
	if (e.keyCode === 39) {
	keys.right = true;
	}
	});

	document.addEventListener('keyup', function(e) {
	if (e.keyCode === 38) {
	keys.up = false;
	}
	if (e.keyCode === 40) {
	keys.down = false;
	}
	if (e.keyCode === 37) {
	keys.left = false;
	}
	if (e.keyCode === 39) {
	keys.right = false;
	}
	});

	setInterval(createAsteroid, 1000);

	draw();
	});
	</script>
	</head>
	<body style="margin: 0;">
	<div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
	<svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
	position: relative;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><defs><style>.cls-1{fill:#fff;}</style></defs><title>openai-symbol-flat-white</title><path class="cls-1" d="M617.24,354a126.36,126.36,0,0,0-10.86-103.79,127.8,127.8,0,0,0-137.65-61.32,126.36,126.36,0,0,0-95.31-42.49A127.81,127.81,0,0,0,251.5,234.89,126.4,126.4,0,0,0,167,296.19a127.82,127.82,0,0,0,15.72,149.86,126.36,126.36,0,0,0,10.86,103.79,127.81,127.81,0,0,0,137.65,61.32,126.36,126.36,0,0,0,95.31,42.49A127.81,127.81,0,0,0,548.5,565.11,126.4,126.4,0,0,0,633,503.81,127.82,127.82,0,0,0,617.24,354ZM426.58,620.49a94.79,94.79,0,0,1-60.85-22c.77-.42,2.12-1.16,3-1.7l101-58.34a16.42,16.42,0,0,0,8.3-14.37V381.69l42.69,24.65a1.52,1.52,0,0,1,.83,1.17V525.43A95.18,95.18,0,0,1,426.58,620.49ZM222.34,533.26A94.74,94.74,0,0,1,211,469.56c.75.45,2.06,1.25,3,1.79l101,58.34a16.44,16.44,0,0,0,16.59,0l123.31-71.2v49.3a1.53,1.53,0,0,1-.61,1.31L352.19,568.05A95.16,95.16,0,0,1,222.34,533.26ZM195.77,312.77a94.71,94.71,0,0,1,49.48-41.68c0,.87-.05,2.41-.05,3.48V391.25a16.41,16.41,0,0,0,8.29,14.36L376.8,476.8l-42.69,24.65a1.53,1.53,0,0,1-1.44.13l-102.11-59A95.16,95.16,0,0,1,195.77,312.77Zm350.74,81.62L423.2,323.19l42.69-24.64a1.53,1.53,0,0,1,1.44-.13l102.11,58.95a95.08,95.08,0,0,1-14.69,171.55c0-.88,0-2.42,0-3.49V408.75A16.4,16.4,0,0,0,546.51,394.39ZM589,330.44c-.75-.46-2.06-1.25-3-1.79L485,270.31a16.46,16.46,0,0,0-16.59,0l-123.31,71.2v-49.3a1.53,1.53,0,0,1,.61-1.31L447.81,232A95.07,95.07,0,0,1,589,330.44ZM321.89,418.31l-42.7-24.65a1.52,1.52,0,0,1-.83-1.17V274.57a95.07,95.07,0,0,1,155.9-73c-.77.42-2.11,1.16-3,1.7l-101,58.34a16.41,16.41,0,0,0-8.3,14.36Zm23.19-50L400,336.59l54.92,31.7v63.42L400,463.41l-54.92-31.7Z"/></svg>
	<div style="display: inline-block; color: white; vertical-align: top; margin-top: 4px; font-family: Helvetica, sans-serif;">
	Code generated by <a style="color: white; text-decoration: none; font-weight: bold;" href="https://openai.com/blog/openai-codex/">OpenAI Codex</a>
	</div>
	</div>
	</body>
	</html>