JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var player = document.createElement('div');
player.style.position = 'absolute';
player.style.width = '20px';
player.style.height = '20px';
player.style.backgroundColor = 'red';
player.style.bottom = '10px';
player.style.left = '10px';
document.body.appendChild(player);
player.style.borderRadius = '50%';
var playerX = 10;
var playerY = 10;
var playerDirectionX = 5;
var playerDirectionY = 5;
function movePlayer() {
playerX += playerDirectionX;
playerY += playerDirectionY
if (playerX > document.body.clientWidth - 20 || playerX < 0) {
playerDirectionX = playerDirectionX * -1;
}
if (playerY > document.body.clientHeight - 20 || playerY < 0){
playerDirectionY = playerDirectionY * -1;
}
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
}
setInterval(movePlayer, 50);
var playerDirection = document.createElement('div');
playerDirection.style.position = 'absolute';
playerDirection.style.width = '200px';
playerDirection.style.height = '20px';
playerDirection.style.top = '0px';
playerDirection.style.right = '0px';
document.body.appendChild(playerDirection);
function printPlayerDirection() {
playerDirection.innerHTML = 'playerDirectionX: ' + playerDirectionX + ' playerDirectionY: ' + playerDirectionY + '<br/> score:' + score;
}
setInterval(printPlayerDirection, 50);
document.body.style.overflow = 'hidden';
document.onkeydown = function(e) {
if (e.keyCode == 39) {
playerDirectionX = playerDirectionX + 5;
}
else if (e.keyCode == 37) {
playerDirectionX = playerDirectionX - 5;
}else if (e.keyCode == 38) {
playerDirectionY = playerDirectionY - 5;
}
else if (e.keyCode == 40) {
playerDirectionY = playerDirectionY + 5;
}else if (e.keyCode == 38) {
playerDirectionY = playerDirectionY -...