JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="gameCanvas" width="400" height="600">We don't support old browsers</canvas>
CSS
* {
margin: 0;
padding: 0;
}
JavaScript
var canvas;
var canvasContext;
// Enemy Planets Variables
var planetX;
var planetY = 0;
var planetRadius = 20;
// Speed of planet descent
var planetSpeedY = getRandomSpeed(1, 7);
// Speed of planet descent
var planetSpeedX = getRandomSpeed(2, 8);
// Run On Load
window.onload = function(){
canvas = document.getElementById("gameCanvas");
canvasContext = canvas.getContext('2d');
// Planet appearance on canvas
planetX = canvas.width * Math.random();
// Start Gameplay
var framePerSecond = 30;
setInterval(function(){
drawEverything();
moveEverything();
//animatePlanets();
}, 1000/framePerSecond);
}
// Drawing Canvas Rectangle
function colorRect(leftX, topY, width, height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX, topY, width, height, drawColor);
}
// Drawing Planet Circles
function colorPlanet(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
canvasContext.fill();
canvasContext.closePath();
}
// Get Random numbers for Planets Speed
function getRandomSpeed(min, max){
return Math.floor(Math.random() * (max + min)) + min;
}
// Drawing Game Canvas, Enemies and player
function drawEverything(){
// Draw Game Canvas
colorRect(0, 0, canvas.width, canvas.height, 'black');
// Draw the Player
colorRect(100, 200, 50, 50, 'white');
// Draw the Enemy Planet
colorPlanet(planetX, planetY, planetRadius, 'red');
}
// Moving the Enemy Planet
function moveEverything(){
planetX += planetSpeedX;
planetY += planetSpeedY;
if(planetX < 0){
planetSpeedX = -planetSpeedX;
} else if(planetX > canvas.width) {
planetSpeedX = -planetSpeedX;
}
if(planetY < 0){
planetSpeedY = -planetSpeedY;
} else if(planetY > canvas.height){
...