Test

Untitled.js

var yp = 0;
var cp = 0;
var dif = 20;
var b = {
    x: 330,
    y: 100,
    xs: 2,
    ys: 1.5
};
var y = 20;
var py = 150;
var cy = 150;
var playing = !false;
var ball = document.getElementById("ball");
var play = document.getElementById("player");
var comp = document.getElementById("comp");
var ypd = document.getElementById("yp");
var cpd = document.getElementById("cp");
var mouseY = 0;
var abs = function(num) {
    return Math.abs(num);
};
var update = function() {
    ball.style.left = b.x + "px";
    ball.style.top = b.y + "px";
    play.style.top = py + "px";
    comp.style.top = cy + "px";
    cpd.textContent = cp + " POINTS";
    ypd.textContent = yp + " POINTS";
};
var draw = function() {

    if (playing) {
        py += (mouseY - (py + 35)) / dif;
        b.y += b.ys;
        if (b.xs === abs(b.xs)) {
            cy += (b.y - (cy + 35)) / dif;

        } else {
            cy += (b.y - (cy + 35)) / (dif * 30);
        }
        if (py > 310) {
            py = 310;
        } else if (py < 20) {
            py = 20;
        }
        if (cy < 20) {
            cy = 20;
        } else if (cy > 310) {
            cy = 310;
        }
        //stay in the middle
        if (b.y - 10 < 0) {
            b.ys = abs(b.ys);
        } else if (b.y + 10 > 390) {
            b.ys = -abs(b.ys);
        }
        //paddle collisions
        if (b.x < 20) { //player's paddle
            if (b.x <= 0) {
                b.x = 330;
                b.xs = -b.xs;
                cp++;
            }
            if (b.y <= py + 75 && b.y >= py - 5) {
                b.xs = abs(b.xs);
                b.ys = (b.y - (py + 35)) / 20;
            }
        }
        if (b.x > 615) { //computer collisions
            if (b.y < cy + 70 && b.y >= cy) {
                b.xs = -abs(b.xs);
                b.ys = (b.y - (cy + 35)) / 20;
            }
            if (b.x > 650) {
                b.x = 330;
                b.xs = -b.xs;
                yp++;
            }
        }
        b.x += b.xs;
        update();



    }

};
var mouseMove = function(event) {
    mouseY = event.clientY;
};
var onC = function() {
    playing = !playing;

};
var timer = window.setInterval(draw, 10);
document.getElementById("body").addEventListener("mousemove", mouseMove);
document.getElementById("body").addEventListener("click", onC);