JUSTCodaborate

Racing Game - Two Player

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>

<body>
    <div id="container">
        <div class="grass"></div>
        <div class="grass"></div>
        <div id="line_1" class="line"></div>
        <div id="line_2" class="line"></div>
        <div id="line_3" class="line"></div>
        <div id="car" class="car">
            <div class="f_glass"></div>
            <div class="b_glass"></div>
            <div class="f_light_l"></div>
            <div class="f_light_r"></div>
            <div class="f_tyre_l"></div>
            <div class="f_tyre_r"></div>
            <div class="b_tyre_l"></div>
            <div class="b_tyre_r"></div>
        </div>
        <div id="car_1" class="car">
            <div class="f_glass"></div>
            <div class="b_glass"></div>
            <div class="f_light_l"></div>
            <div class="f_light_r"></div>
            <div class="f_tyre_l"></div>
            <div class="f_tyre_r"></div>
            <div class="b_tyre_l"></div>
            <div class="b_tyre_r"></div>
        </div>
        <div id="restart_div">
            <button disabled id="restart">
                Rerun to play again!
            </button>
        </div>
    </div>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

</html>

body {
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

::-webkit-scrollbar {
  display: none;
}

#container{
    position: relative;
    height: 100vh;
    width: 100%;
    margin: auto;
    background-color: #525252;
    overflow: hidden;
}
.line{
    position: absolute;
    height: 150px;
    width: 1%;
    margin-left: 48%;
    background-color: rgba(255,255,255,0.5);
}
#line_1{
    top: -150px;
}
#line_2{
    top: 150px;
}
#line_3{
    top: 450px;
}
.car{
    position: absolute;
    height: 60px;
    width: 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 10px;
    -moz-box-shadow: rgba(0,0,0,0.8) 0 0 10px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}
#car{
    bottom: 8%;
    left: 10%;
    background-color: purple;
}
.f_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    top: 15%;
    border-radius: 0px 0px 5px 5px;
    background-color: #c2c2c2;
}
.b_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    bottom: 15%;
    border-radius: 5px 5px 0px 0px;
    background-color: #c2c2c2;
}
.f_light_l{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 10%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_light_r{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 70%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: black;
    top: 20%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.f_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: black;
    top: 20%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
.b_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: black;
    top: 70%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.b_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: black;
    top: 70%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
#car_1{
    bottom: 8%;
    left: 85%;
    background-color: green;
}
#restart_div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #525252;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    text-align: center;
    display: none;
}

#restart {
    border: none;
    padding: 25px;
    color: white;
    background-color: #8a64ff;
    font-size: 30px;
    margin-top: 30%;
}

.grass {
   background-color: #15e83c;
   width: 10%;
   height: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
   margin: auto;
}

.grass:nth-of-type(1) {
  left: 0;
}

.grass:nth-of-type(2) {
  right: 0;
}

$(function() {

var anim_id;

//saving dom objects to variables
    var container = $('#container');
    var car = $('#car');
    var car1 = $('#car_1');
    var line_1 = $('#line_1');
    var line_2 = $('#line_2');
    var line_3 = $('#line_3');
    var restart_div = $('#restart_div');
    var restart_btn = $('#restart');
    var score = 0;
    var score2 = 0;
    var time = 0;

//saving some initial setup
    var container_left = parseInt(container.css('left'));
    var container_width = parseInt(container.width());
    var container_height = parseInt(container.height());
    var car_width = parseInt(car.width());
    var car_height = parseInt(car.height());

//some other declarations
    var game_over = false;

var speed = 2;
    var line_speed = 5;

var move_right = false;
    var move_left = false;
    var move_up = false;
    var move_down = false;
    var move_right2 = false;
    var move_left2 = false;
    var move_up2 = false;
    var move_down2 = false;

/* ------------------------------GAME CODE STARTS HERE------------------------------------------- */

/* Move the cars */
    $(document).on('keydown', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 37 && move_left === false) {
                move_left = requestAnimationFrame(left);
                score++;
            } else if (key === 39 && move_right === false) {
                move_right = requestAnimationFrame(right);
                score++;
            } else if (key === 38 && move_up === false) {
                move_up = requestAnimationFrame(up);
                score++;
            } else if (key === 40 && move_down === false) {
                move_down = requestAnimationFrame(down);
                score++;
            }
        }
    });

$(document).on('keydown', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 65 && move_left2 === false) {
                move_left2 = requestAnimationFrame(left2);
                score2++;
            } else if (key === 68 && move_right === false) {
                move_right2 = requestAnimationFrame(right2);
                score2++;
            } else if (key === 87 && move_up === false) {
                move_up2 = requestAnimationFrame(up2);
                score2++;
            } else if (key === 83 && move_down === false) {
                move_down2 = requestAnimationFrame(down2);
                score2++;
            }
        }
    });

$(document).on('keyup', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 37) {
                cancelAnimationFrame(move_left);
                move_left = false;
            } else if (key === 39) {
                cancelAnimationFrame(move_right);
                move_right = false;
            } else if (key === 38) {
                cancelAnimationFrame(move_up);
                move_up = false;
            } else if (key === 40) {
                cancelAnimationFrame(move_down);
                move_down = false;
            }
        }
    });

$(document).on('keyup', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 65) {
                cancelAnimationFrame(move_left2);
                move_left2 = false;
            } else if (key === 68) {
                cancelAnimationFrame(move_right2);
                move_right2 = false;
            } else if (key === 87) {
                cancelAnimationFrame(move_up2);
                move_up2 = false;
            } else if (key === 83) {
                cancelAnimationFrame(move_down2);
                move_down2 = false;
            }
        }
    });

function left() {
        if (game_over === false && parseInt(car.css('left')) > 0) {
            car.css('left', parseInt(car.css('left')) - 5);
            move_left = requestAnimationFrame(left);
        }
    }

function right() {
        if (game_over === false && parseInt(car.css('left')) < container_width - car_width) {
            car.css('left', parseInt(car.css('left')) + 5);
            move_right = requestAnimationFrame(right);
        }
    }

function up() {
        if (game_over === false && parseInt(car.css('top')) > 0) {
            car.css('top', parseInt(car.css('top')) - 3);
            move_up = requestAnimationFrame(up);
        }
    }

function down() {
        if (game_over === false && parseInt(car.css('top')) < container_height - car_height) {
            car.css('top', parseInt(car.css('top')) + 3);
            move_down = requestAnimationFrame(down);
        }
    }

function left2() {
        if (game_over === false && parseInt(car1.css('left')) > 0) {
            car1.css('left', parseInt(car1.css('left')) - 5);
            move_left2 = requestAnimationFrame(left2);
        }
    }

function right2() {
        if (game_over === false && parseInt(car1.css('left')) < container_width - car_width) {
            car1.css('left', parseInt(car1.css('left')) + 5);
            move_right2 = requestAnimationFrame(right2);
        }
    }

function up2() {
        if (game_over === false && parseInt(car1.css('top')) > 0) {
            car1.css('top', parseInt(car1.css('top')) - 3);
            move_up2 = requestAnimationFrame(up2);
        }
    }

function down2() {
        if (game_over === false && parseInt(car1.css('top')) < container_height - car_height) {
            car1.css('top', parseInt(car1.css('top')) + 3);
            move_down2 = requestAnimationFrame(down2);
        }
    }

/* Move the cars and lines */
    anim_id = requestAnimationFrame(repeat);

function repeat() {
        time++;
        if(time == 2000) {
          stop_the_game();
        }

if(collision(car, car1)) {
          score--;
        }

if(collision(car1, car)) {
          score2--;
        }

line_down(line_1);
        line_down(line_2);
        line_down(line_3);

anim_id = requestAnimationFrame(repeat);
    }

function line_down(line) {
        var line_current_top = parseInt(line.css('top'));
        if (line_current_top > container_height) {
            line_current_top = -300;
        }
        line.css('top', line_current_top + line_speed);
    }

restart_btn.click(function() {
        location.reload();
    });

/* ------------------------------GAME CODE ENDS HERE------------------------------------------- */

function collision($div1, $div2) {
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
        return true;
    }

});