JUSTCodaborate

Racing Game - One 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="car_2" 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_3" 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_4" 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_5" 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_6" 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: 60%;
    background-color: pink;
}
.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{
    top: -400px;
    left: 700px;
    background-color: red;
}
#car_2{
    top: -800px;
    left: 900px;
    background-color: green;
}
#car_3{
    top: -1200px;
    left: 1000px;
    background-color: purple;
}
#car_4 {
  top: -1600px;
  left: 800px;
  background-color: blue;
}
#car_5 {
  top: -2000px;
  left: 1200px;
  background-color: #beaffa;
}
#car_6 {
  top: -2400px;
  left: 1400px;
  background-color: #aceefa;
}
#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 car_1 = $('#car_1');
    var car_2 = $('#car_2');
    var car_3 = $('#car_3');
    var car_4 = $('#car_4');
    var car_5 = $('#car_5');
    var car_6 = $('#car_6');
    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;

//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 = 4.5;
    var line_speed = 10;

var move_right = false;
    var move_left = false;
    var move_up = false;
    var move_down = 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('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;
            }
        }
    });

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);
        }
    }

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

function repeat() {
        if (collision(car, car_1) || collision(car, car_2) || collision(car, car_3) || collision(car, car_4) || collision(car, car_5) || collision(car, car_6)) {
            stop_the_game();
            return;
        }

car_down(car_1);
        car_down(car_2);
        car_down(car_3);
        car_down(car_4);
        car_down(car_5);
        car_down(car_6);

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);
        score++;
    }

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

function stop_the_game() {
        game_over = true;
        cancelAnimationFrame(anim_id);
        cancelAnimationFrame(move_right);
        cancelAnimationFrame(move_left);
        cancelAnimationFrame(move_up);
        cancelAnimationFrame(move_down);
        restart_div.slideDown();
        restart_btn.focus();
        document.getElementById("restart").innerHTML = "Rerun to play again! (Score: " + score + ")";
    }

/* ------------------------------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;
    }
   
});