Saturday, 25 March 2017

JAVASCRIPT SAMPLES - RACING CARS - SIMPLE GAME

Hello Buddies.

This one is a simple javascript code written to get look and feel of a very basic racing game.

The complete code is available here -

https://github.com/namitsharma99/game-racing-car


So what do we want to implement?

It is something like this -



And how do we start?
Here it goes -

So we have out base set up in racing.jsp.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>e_CaR-RaC_e</title>
        <link rel="stylesheet" href="./myStyle.css" />
        <link rel="icon" href="car.png" type="image/png">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 27:
                        resetCar();
                        break;
                    case 37:
                        moveLeft();
                        break;
                    case 39:
                        moveRight();
                        break;
                    case 38:
                        moveUp();
                        break;
                    case 40:
                        moveDown();
                        break;
                }
            });

            function moveLeft() {
                var element = document.getElementById("car");
                element.style.left = parseInt(element.style.left) - 2 + '%';
                $("#car0").stop().animate({
                    top: "-=10px"
                }, 2000, ifCollision());
            }

            function moveRight() {
                var element = document.getElementById("car");
                element.style.left = parseInt(element.style.left) + 2 + '%';
                $("#car0").stop().animate({
                    top: "-=10px"
                }, 2000, ifCollision());
            }

            function moveUp() {
                var element = document.getElementById("car");
                element.style.top = parseInt(element.style.top) - 2 + '%';
                /*attempt to move other car*/
                $("#car0").stop().animate({
                    top: "+=10px"
                }, 2000, ifCollision());
            }

            function moveDown() {
                var element = document.getElementById("car");
                element.style.top = parseInt(element.style.top) + 2 + '%';
                $("#car0").stop().animate({
                    top: "-=10px"
                }, 2000, ifCollision());
            }

            function ifCollision() {
                console.log("checking collision...");
                var car = $("#car");
                var positionOfCar = car.position();
                var leftOfCar = positionOfCar.left;
                var topOfCar = positionOfCar.top;

                console.log("left of car: " + positionOfCar.left + ", top of car: " + positionOfCar.top);

                var car0 = $("#car0");
                var positionOfCar0 = car0.position();
                var leftOfCar0 = positionOfCar0.left;
                var topOfCar0 = positionOfCar0.top;

                console.log("left of car 0: " + positionOfCar0.left + ", top of car 0: " + positionOfCar0.top);


                if (Math.abs(leftOfCar - leftOfCar0) < 40 && Math.abs(topOfCar - topOfCar0) < 40) {
                    alert("Caught!!");
                }
            }
        </script>
    </head>

    <body>

        <div class="container">
            <textarea class="bg">
            </textarea>
            <img id="car" src="police_car.png" style="position: absolute; left: 48%; top: 400%;" height="70" width="50">
            <!-- adding another car -->
            <img id="car0" src="car.png" style="position: absolute; left: 30%; top: 0" height="60" width="30">
        </div>

    </body>

    </html>



A small discussion.

1. We fixed the cars in the div section of the body.
2. Using keyboard events, identify the arrow keys.
3. Based on directions, invoke suitable methods -

                switch (event.keyCode) {
                    case 27:
                        resetCar();
                        break;
                    case 37:
                        moveLeft();
                        break;
                    case 39:
                        moveRight();
                        break;
                    case 38:
                        moveUp();
                        break;
                    case 40:
                        moveDown();
                        break;
                }

4. And finally we have a function that decided whether the Police car has caught the thief's car or not.

               function ifCollision() {

                console.log("checking collision...");
                var car = $("#car");
                var positionOfCar = car.position();
                var leftOfCar = positionOfCar.left;
                var topOfCar = positionOfCar.top;

                console.log("left of car: " + positionOfCar.left + ", top of car: " + positionOfCar.top);

                var car0 = $("#car0");
                var positionOfCar0 = car0.position();
                var leftOfCar0 = positionOfCar0.left;
                var topOfCar0 = positionOfCar0.top;

                console.log("left of car 0: " + positionOfCar0.left + ", top of car 0: " + positionOfCar0.top);


                if (Math.abs(leftOfCar - leftOfCar0) < 40 && Math.abs(topOfCar - topOfCar0) < 40) {
                    alert("Caught!!");
                }

5. Using positions we can set an alert limit, here it is 40.

6. TADA... try this and put your own imagination... see it rolling.

Also, to create the road moving effect, we have used styling like -

.bg {
width: 80%;
height: 600px;
background: url("background.png") repeat-y;
background-size: 100%;
-webkit-animation: displace 0.5s linear infinite;
animation: displace 0.5s linear infinite;
}
@-webkit-keyframes displace {
from { background-position: top;
} to { background-position: bottom; }
}
@keyframes displace {
from { background-position: top;
} to { background-position: bottom; }

}

{ Refer to myStyle.css }

A good use of webkit animation effects. 
A little bit of R&D can help you in figuring out how to use it efficiently.

7.  So what we have here is an arrow keys' driven car game.








Share your thoughts and experiments in the comments below.

Happy Coding!



Featured post

JAVA based project, that can be used to hit DB using JDBC, from WSO2 ESB

Hi Buddies, Here is a small project that will enable you to hit MySQL DB using WSO2 ESB - https://github.com/namitsharma99/customM...

Popular Posts