Copy following code to make a android car racing game

Panasonic eluga x1 Pro

<!DOCTYPE html>
<html>
    <head>
        <title>3D Car Drive</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" >
    </head>
    <body onload="done()">
    <style>
                    body{
                margin:0;
                height:100vh;
                width:100vw;
            }
            
            #mainContainer {
                position:absolute;
                top:0;
                left:0;
                transform-origin:0% 0%;
                width:100%;
                transform:  translateX(0px) rotate(0deg);
                overflow: hidden;
            }
            
            #city {
                position:absolute;
                top:0;
                left:0;
                height:30vw;
                width:100%;
                z-index:-1;
                display: block;
            }
            
            #myCanvas {
                background:transparent;
                z-index: 100;
            }
            
            .aImg {
                display:none;
            }
            
            #mainContainer {
                display:none;
            }
            
            #scoreDiv {
                position:absolute;
                right:0;
                background:transparent;
                display:inline-block;
                border:3px solid red;
                padding:3px 50px 3px 10px;
                border-radius:20px;
                font-weight:700;
                font-size:24px;
                height:30px;
                margin:10px;
                z-index:1000;
                transform-origin:100% 0%;
            }
            
            #cn {
                height:52px;
                width:52px;
                background:red;
                position:absolute;
                right:-8px;
                top:-8px;
                border-radius:50%;
            }
            
            .gameHome {
                position:absolute;
                top:0;
                left:0;
                background:#fff;
                height:100vh;
                width:100vw;
                transform-origin:0% 0%;
                text-align:center;
            }
            
            #gameTitle {
                text-align:center;
                font-family:cursive;
                font-size:35px;
                margin-top:50px;
                font-weight:800;
            }
            
            #playBtn {
                font-size:20px;
                display:inline-block;
                background:#1642ea;
                color:#fff;
                padding:3px 25px;
                margin-top: 100px;
                border:none;
                border-radius:10px;
                box-shadow:3px 4px #000;
                outline:none;
            }
            
            #gameConf {
                width:50%;
                height:100%;
                background:red;
            }
            
            #gameDifficulty {
                width:100%;
                height:50%;
                background:blue;
                padding:0;
                margin:0;
            }
            
            .diffOpt {
                background:green
                font-family:cursive;
                font-size:20px;
                text-align:center;
            }
            
            #loading {
                height:60px;
                width:60px;
                background:transparent;
                display:inline-block;
                border:10px solid transparent;
                border-bottom-color:red;
                border-left-color:red;
                border-radius:50%;
                animation:ld 1s linear infinite;
            }
            
            @keyframes ld {
                0% {
                    transform:translateY(-165px) rotate(0deg);
                }
                100% {
                    transform:translateY(-165px) rotate(360deg);
                }
            }
    </style>
   
        <div id="scoreDiv">
            <span id="score">0</span>
            <img src="https://image.ibb.co/jRAp0y/coin.png" id="cn">
        </div>
        <div class="gameHome" id="startPage">
            <div id="gameTitle">3D Car Drive</div>
            <button onclick="ld()" id="playBtn"><span style="font-size:18px">Loading Assets<br>Please Wait...<br>This may take a few seconds for first time</span></button><br>
            <div id="ldc"><div id="loading"></div></div>
            <p>Rotate your phone & tilt left/right or tap left/right side of screen to move the car<br>Use left/right arrow key on your PC</p>
            <script type="text/javascript">
                (function(){
                    "use strict"
                    var hw = window.innerWidth || 360;
                    var hh = window.innerHeight || 560;
                    var gameHome = document.getElementById("startPage");
                    var scoreDiv = document.getElementById("scoreDiv");
                    if(hh > hw){
                        gameHome.style.height = hw+"px";
                        gameHome.style.width = hh+"px";
                        gameHome.style.transform = "translateX("+hw+"px) rotate(90deg)";
                        scoreDiv.style.bottom = 0;
                        scoreDiv.style.transform = "rotate(90deg) translateX(40px)";
                    }
                })();
            </script>
        </div>
        
        
        <div id="mainContainer" style="background:#0f0" >
            <img id="city" src="https://image.ibb.co/jCGU0y/cty.jpg">
            <canvas id="myCanvas" style="/*background:#9de732*/" ></canvas>
        </div>
        <img class="aImg" id="t1" src="https://image.ibb.co/dZi5Ly/t1.png">
        <img class="aImg" id="t2" src="https://image.ibb.co/jajjDJ/t2.png">
        <img class="aImg" id="t3" src="https://image.ibb.co/it4jDJ/t5.png">
        <img class="aImg" id="t4" src="https://image.ibb.co/ksy0nd/t4.png">
        <img class="aImg" id="c1" src="https://image.ibb.co/f4v7YJ/c2.png">
        <script>
                   
        var ld;
        var loaded = false;
        
        function done(){
            document.getElementById("ldc").innerHTML="";
            document.getElementById("ldc").style.display = "none";
            document.getElementById("playBtn").innerHTML = "PLAY";
            loaded = true;
        }
        
        (function(){
            var w = window.innerWidth || 360;
            var h = window.innerHeight || 560;
        
            if(h > w){
                var nh = h;
                h = w;
                w = nh;
                document.getElementById("mainContainer").style.transform = "translateX("+(h)+"px) rotate(90deg)";
            }
            document.getElementById("mainContainer").style.width = w+"px";
            document.getElementById("mainContainer").style.height = h+"px";
            
            document.getElementById("city").style.height = h*.3+"px";
            document.getElementById("city").style.width = w+"px";
            
            var c = document.getElementById("myCanvas");
            c.height = h;
            c.width = w;
            
            var ctx = c.getContext("2d");
        
        function loadGame(){
            "use strict";
            
            var roadWidth = 5*w/36;
            var roadTop = h-h*0.7;
            var roadLeft = (w-roadWidth)/2;
            var roadConstant = roadLeft/(h-roadTop);
            var score = 0;
            var scoreC = document.getElementById("score");
            function updateScore(ds){
                score+=ds;
                scoreC.textContent = score;
            }
            updateScore(0);
            
            var rso = [];
            var ratio = 0.8;
            var totalRso = 20;
            var maxHF = h*(1-ratio)/(2.25*(1-Math.pow(ratio,totalRso)));
            var maxH = maxHF;
            var totalHeight = 0.7*h;
            var minWidth = 1;
            var maxWidth = 26;
            var dif = maxWidth - minWidth;
            var changedHeight = totalHeight-maxH*ratio;
            var cnst1 = Math.pow(ratio,totalRso)/(1-ratio);
            var stp = h-totalHeight;
            var tMaxH = h*20/36;
            var treeCnst = tMaxH/roadLeft;
            
            var gameDifficulty = 100;
            
            
            
            function TreeBuilder(src,src2,start,left){
                this.src = treeSrc[src];
                this.src2 = treeSrc[src2];
                this.y = start;
                this.x = 0;
                this.h = 0;
                this.w = 0;
                this.dy = 0.01;
                this.r = 1.009;
                this.left = left;
            }
            
            TreeBuilder.prototype.draw = function(){
                this.y += this.dy;
                this.dy *= this.r;
                this.x = (h-this.y)*roadConstant - this.w - this.w*this.left;
                this.h = (roadLeft-this.x-this.w*this.left)*treeCnst;
                this.w = this.h*2/3;
                
                ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
                ctx.drawImage(this.src2,w-this.x-this.w,this.y-this.h,this.w,this.h);
            
                if(this.y >= h){
                    this.y = stp;
                    this.h = 0;
                    this.w = 0;
                    this.left = Math.random()*3;
                    this.dy = 0.5;
                }
            }
            
            function _i(x){
                return document.getElementById(x);
            }
            var treeSrc = [_i("t1"),_i("t2"),_i("t3"),_i("t4")];
            
            var trees = [];
            for(var n = 0; n < ((h*0.7)/50-2); n++){
                trees.push(new TreeBuilder(Math.floor(Math.random()*4),Math.floor(Math.random()*4),stp+n*50,2));
            }
            
            
            var carWCnst = roadLeft*2/totalHeight;
            var carW = (w > 560) ? 120 : 90;
            var carH = carW*2/3;
            
            function CarBuilder(src,start,lane){
                this.src = carSrc[src];
                this.y = start;
                this.x = 0;
                this.h = 0;
                this.w = 0;
                this.dy = 0.5;
                this.lane = lane;
            }
            
            CarBuilder.prototype.draw = function(){
                this.dy *= 1.01;
                this.y += this.dy;
                this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
                this.w = carW-carW*carWCnst*(h-this.y)/w;
                this.h = 1.7*this.w/3;
                
                ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
                if(this.y >= h-20){
                    if(Math.abs(this.x-cx) <= carH && Math.abs(this.y-h+carH) <= carH){
                        clearInterval(intv);
                        setTimeout(function(){
                            document.getElementById("mainContainer").style.display = "none";
                            document.getElementById("startPage").style.display = "block";
                        },1000);
                    }
                }
                if(this.y >= h+100){
                    this.y = stp;
                    this.h = 0;
                    this.w = 0;
                    this.left = Math.random()*3;
                    this.dy = 0.5;
                    this.lane = 1+Math.random()*5;
                }
            }
            
            var carSrc = [_i("c1"),_i("c1"),_i("c1")];
            
            var cars = [];
            for(var n = 0; n < ((h*0.7+100)/gameDifficulty); n++){
                cars.push(new CarBuilder(Math.floor(Math.random()*3),stp+n*gameDifficulty,1));
            }
            
            //Coin.....
            var coinW = (w > 560) ? 75 : 60;
            function CoinBuilder(start,lane){
                this.src = coinSrc;
                this.y = start;
                this.x = 0;
                this.h = 0;
                this.w = 0;
                this.dy = 0.5;
                this.lane = lane;
            }
            
            CoinBuilder.prototype.draw = function(){
                this.dy *= 1.01;
                this.y += this.dy;
                this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
                this.w = coinW-coinW*carWCnst*(h-this.y)/w;
                this.h = this.w;
                
                ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
                if(this.y >= h-20){
                    if(Math.abs(this.x-cx) <= coinW && Math.abs(this.y-h+coinW) <= coinW){
                        this.y = stp;
                        this.h = 0;
                        this.w = 0;
                        this.left = Math.random()*3;
                        this.dy = 0.5;
                        this.lane = Math.floor(1+Math.random()*5);
                        updateScore(1);
                    }
                }
                if(this.y >= h+100){
                    this.y = stp;
                    this.h = 0;
                    this.w = 0;
                    this.left = Math.random()*3;
                    this.dy = 0.5;
                    this.lane = Math.floor(1+Math.random()*5);
                }
            }
            
            var coinSrc = _i("cn");
            
            var coins = [];
            for(var n = 0; n < ((h*0.7+100)/(gameDifficulty-50)); n++){
                coins.push(new CoinBuilder(stp+n*(gameDifficulty-50),6));
            }
            
            
            
            //End Coin...
            
            
            
            function rectPoints(n,ho){
                n = totalRso-n-1;
                var y1 = stp+maxH*cnst1*(Math.pow(1/ratio,n)-1);
                var x1 = roadLeft-roadConstant*(y1-stp);
                var y2 = y1;
                var x2 = x1 + minWidth+(y1-stp)*dif/totalHeight;
                var y3 = y1 + maxH*cnst1*(Math.pow(1/ratio,n+1)-1);
                var x3 = roadLeft-roadConstant*(y3-stp);
                var y4 = y3;
                var x4 = x3 + minWidth+(y3-stp)*dif/totalHeight;
                
                return [x1,y1,x2,y2,x4,y4,x3,y3];
            }
            
            
            for(var n = 0; n < totalRso; n++){
                rso.push(rectPoints(n,h));
                rso[n][8] = (n%2==0) ? "#000" : "#fff";
            }
            
            function draw(){
                ctx.beginPath();
                ctx.moveTo((w-roadWidth)/2,stp);
                ctx.lineTo((w-roadWidth)/2+roadWidth,stp);
                ctx.lineTo(w,h);
                ctx.lineTo(0,h);
                ctx.fillStyle="#555";
                ctx.fill();
                ctx.closePath();
                for(var n = 0; n < totalRso; n++){
                    ctx.beginPath();
                    ctx.moveTo(rso[n][0],rso[n][1]);
                    ctx.lineTo(rso[n][2],rso[n][3]);
                    ctx.lineTo(rso[n][4],rso[n][5]);
                    ctx.lineTo(rso[n][6],rso[n][7]);
                    ctx.lineTo(rso[n][0],rso[n][1]);
                    ctx.lineWidth = 2;
                    ctx.fillStyle = rso[n][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
                    ctx.fill();
                    ctx.closePath();
                    
                    ctx.beginPath();
                    ctx.moveTo(w-rso[n][0],rso[n][1]);
                    ctx.lineTo(w-rso[n][2],rso[n][3]);
                    ctx.lineTo(w-rso[n][4],rso[n][5]);
                    ctx.lineTo(w-rso[n][6],rso[n][7]);
                    ctx.lineTo(w-rso[n][0],rso[n][1]);
                    ctx.lineWidth = 2;
                    ctx.fillStyle = rso[n][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
                    ctx.fill();
                    ctx.closePath();
                    
                    
                }
                
            }
            
            var cx = (w-carW)/2;
            var cl = false, cr = false;
            var car = _i("c1");
            var ms = 3*w/560;
            function drawCar(){
                if(cl) if(cx+carW+50 < w) cx+=ms;
                if(cr) if(cx-50 > 0) cx-=ms;
                ctx.drawImage(car,cx,h-carH,carW,carH);
            }
            
            
            var m = 0;
            var intv = setInterval(function(){
                try{
                ctx.clearRect(0,0,w,h);
                maxH+=0.5;
                changedHeight = maxH*cnst1*(Math.pow(1/ratio,totalRso-1)-1);//maxH*(1-Math.pow(ratio,totalRso-5))/(1-ratio);
                if(changedHeight >= totalHeight){
                    maxH = maxHF;
                    m++;
                }
                for(var n = 0; n < totalRso; n++){
                    rso[n]=rectPoints(n,h-totalHeight+changedHeight);
                    if(m%2==0) rso[n][8] = (n%2==0) ? "#000" : "#fff";
                    else rso[n][8] = (n%2==1) ? "#000" : "#fff";
                }
                draw();
                for(var n = 0; n < trees.length; n++){
                    trees[n].draw();
                }
                
                for(var n = 0; n < coins.length; n++){
                    coins[n].draw();
                }
                
                for(var n = 0; n < cars.length; n++){
                    cars[n].draw();
                }
                
                
                drawCar();
                }catch(err){
                    
                }
                
            },10)
            //draw();
            
            //Game Control
            
            //Touch
            function getTouch(e){
                e.preventDefault();
                var to = e.changedTouches[0];
                var ty = parseInt(to.clientY);
                if(ty>(h/2)){
                    cl = true;
                }
                else{
                    cr = true;
                }
            }
            function getTouchEnd(){
                cl = false;
                cr = false;
            }
            
            c.removeEventListener("touchstart",getTouch);
            c.removeEventListener("touchend",getTouchEnd);
            c.addEventListener("touchstart",getTouch);
            c.addEventListener("touchend",getTouchEnd);
            //Key..
            function getKey(e){
                e.preventDefault();
                var ty = e.keyCode;
                if(ty===39){
                    cr = false;
                    cl = true;
                }
                else if(ty===37){
                    cl = false;
                    cr = true;
                }
            }
            function getKeyEnd(e){
                var ty = e.keyCode;
                if(ty === 39) cl = false;
                else if(ty === 37) cr = false;
            }
            
            document.body.removeEventListener("keydown",getKey);
            document.body.removeEventListener("keyup",getKeyEnd);
            document.body.addEventListener("keydown",getKey);
            document.body.addEventListener("keyup",getKeyEnd);
            //Accelarometre
            
            function driveCar(e){
                var y = e.accelerationIncludingGravity.y;
            
                if(y > 0){
                    if(cx+carW+50 < w) cx += y*ms;
                }
                else{
                    if(cx-50 > 0) cx += y*ms;
                }
            }
            
            if(window.DeviceMotionEvent){
                window.removeEventListener("devicemotion",driveCar)
                   window.addEventListener("devicemotion",driveCar,false)
            }
            //End
        }
        ld = function(){
            if(loaded){
                document.getElementById("startPage").style.display = "none";
                document.getElementById("mainContainer").style.display = "block";
                loadGame();
            }
        }
        })();
        
        </script>

</body>
</html>

Make $50 for free by sharing ads.

Panasonic eluga x1 Pro

Search This Blog

Rahi

Car racing game🏁

Copy following code to make a android car racing game

Comments

Post a Comment

Popular posts from this blog

Download full version pc games for free

How to set background color on a html document

Amazing 3d shapes using html