JSFiddle - React, Tailwind, and code Playground

by bjelline

HTML

<div id="playingArea">
    <img src="http://multimediatechnology.at/~fhs33740/Browsergame/background.jpg">

    <div id="platform">
        <img src="http://multimediatechnology.at/~fhs33740/Browsergame/platform.png">
    </div>
    <div id="ball">
        <img src="http://multimediatechnology.at/~fhs33740/Browsergame/ball.gif">
    </div>
    <div id="score">
        Score: 0
    </div>

    <div id="enemy1">
        <img src="http://multimediatechnology.at/~fhs33740/Browsergame/enemy.png">
    </div>
    <div id="enemy2">
        <img src="http://multimediatechnology.at/~fhs33740/Browsergame/enemy.png">
    </div>
    <div id="enemy3">
        <img src="http://multimediatechnology.at/~fhs33740/Browsergame/enemy.png">
    </div>

    
    </div>
</div>
<script>
    
init();
</script>

CSS

#playingArea{
    position: relative;
    margin: 0 auto;
    border: 1px solid black;
    width: 500px;
    height: 300px;
    background-color: rgb(192,192,192);
    overflow:hidden;
}
#platform{
    position: absolute;
    top: 265px;
    left: 200px;
    width: 64px;
    height: 16px;
}
#ball{
    position: absolute;
    top: 4px;
    left: 40px;
    width: 16px;
    height: 16px;
}
#score{
    position: absolute;
    top: 283px;
    right: 0px;
    width: 500px;
    height: 18px;
    font-size: 10pt;
    color: white;
    background-color: rgb(10,50,150);
}
#enemy1{
    position: absolute;
    top: 150px;
    left: 100px;
    width: 32px;
    height: 32px;
}
#enemy2{
    position: absolute;
    top: 150px;
    left: 250px;
    width: 32px;
    height: 32px;
}
#enemy3{
    position: absolute;
    top: 150px;
    left: 400px;
    width: 32px;
    height: 32px;
}

JavaScript

var ball;
var platform;
var score;

var dx = 3;
var dy = 3;
var currentScore = 0;
var timer;

var platformLeft = 200;
var ballLeft = 200;
var ballTop = 4;
var enemy1Left = 100;
var enemy2Left = 250;
var enemy3Left = 400;
var enemy1Top = 150;



function keyListener(e) {
    if (!e) {
        e = window.event;
    }
    if (e.keyCode == 37 && platformLeft > 0) {
        platformLeft -= 8;
        platform.style.left = platformLeft + 'px';
    }
    if (e.keyCode == 39 && platformLeft < 436) {
        platformLeft += 8;
        platform.style.left = platformLeft + 'px';
    }

}


function detectCollisions() {
    if (collisionX()) dx = dx * -1;
    if (collisionY()) dy = dy * -1;
    if (collisionObj()) {
        dy = dy * -1;
        dx = dx * -1;
    }
}

function collisionX() {
    if (ballLeft < 4 || ballLeft > 465) return true;
    return false;
}

function collisionY() {
    if (ballTop < 4) return true;

    if (ballTop > 440) {
        if (ballLeft > platformLeft && ballLeft < platformLeft + 64) return true;
    }
    return false;
}

function collisionObj() {
    var x = ((ballLeft >= enemy1Left) && (ballLeft <= enemy1Left + 32) || (ballLeft >= enemy2Left) && (ballLeft <= enemy2Left + 32) || (ballLeft >= enemy3Left) && (ballLeft <= enemy3Left + 32));

    var y = ((ballTop >= enemy1Top) && (ballTop <= enemy1Top + 32));

    if (x && y) {
        updateScoreBonus();
        return true;

    }
    return false;
}

function render() {
    moveBall();
    updateScore();
}

function moveBall() {
    ballLeft += dx;
    ballTop += dy;
    ball.style.left = ballLeft;
    ball.style.top = ballTop;
}

function updateScoreBonus() {
    currentScore += 500;
    score.innerHTML = 'Score: ' + currentScore + ' Ball pos: ' + ballLeft + "/" + ballTop;
}

function updateScore() {
    currentScore += 5;
    score.innerHTML = 'Score: ' + currentScore + ' Ball pos: ' + ballLeft + "/" + ballTop;
}


function difficulty() {

    if (currentScore % 1000 == 0) {
        if (dy...