A Pen by Naeem Shaikh

Thumbnail
This awesome code was written by naeemshaikh27, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright naeemshaikh27 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Naeem Shaikh</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id='bg'>

  <div id='p1' class=''></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/naeemshaikh27/a-pen-by-naeem-shaikh-wGoezg */

@keyframes move-animation {
    0%{
    top:0px;
  }
1%{
    top:5px;
  }
2%{
    top:10px;
  }
3%{
    top:15px;
  }
4%{
    top:20px;
  }
  5%{
    top:25px;
  }
6%{
    top:30px;
  }
7%{
    top:35px;
  }
8%{
    top:40px;
  }
9%{
    top:45px;
  }
  10%{
    top:50px;
  }
11%{
    top:55px;
  }
12%{
    top:60px;
  }
13%{
    top:65px;
  }
14%{
    top:70px;
  }
  15%{
    top:75px;
  }
16%{
    top:80px;
  }
17%{
    top:85px;
  }
18%{
    top:90px;
  }
19%{
    top:95px;
  }
  20%{
    top:100px;
  }
21%{
    top:105px;
  }
22%{
    top:110px;
  }
23%{
    top:115px;
  }
24%{
    top:120px;
  }
  25%{
    top:125px;
  }
26%{
    top:130px;
  }
27%{
    top:135px;
  }
28%{
    top:140px;
  }
29%{
    top:145px;
  }
  30%{
    top:150px;
  }
31%{
    top:155px;
  }
32%{
    top:160px;
  }
33%{
    top:165px;
  }
34%{
    top:170px;
  }
  35%{
    top:175px;
  }
36%{
    top:180px;
  }
37%{
    top:185px;
  }
38%{
    top:190px;
  }
39%{
    top:195px;
  }
  40%{
    top:200px;
  }
41%{
    top:205px;
  }
42%{
    top:210px;
  }
43%{
    top:215px;
  }
44%{
    top:220px;
  }
  45%{
    top:225px;
  }
46%{
    top:230px;
  }
47%{
    top:235px;
  }
48%{
    top:240px;
  }
49%{
    top:245px;
  }
  50%{
    top:250px;
  }
51%{
    top:255px;
  }
52%{
    top:260px;
  }
53%{
    top:265px;
  }
54%{
    top:270px;
  }
  55%{
    top:275px;
  }
56%{
    top:280px;
  }
57%{
    top:285px;
  }
58%{
    top:290px;
  }
59%{
    top:295px;
  }
  60%{
    top:300px;
  }
61%{
    top:305px;
  }
62%{
    top:310px;
  }
63%{
    top:315px;
  }
64%{
    top:320px;
  }
  65%{
    top:325px;
  }
66%{
    top:330px;
  }
67%{
    top:335px;
  }
68%{
    top:340px;
  }
69%{
    top:345px;
  }
  70%{
    top:350px;
  }
71%{
    top:355px;
  }
72%{
    top:360px;
  }
73%{
    top:365px;
  }
74%{
    top:370px;
  }
  75%{
    top:375px;
  }
76%{
    top:380px;
  }
77%{
    top:385px;
  }
78%{
    top:390px;
  }
79%{
    top:395px;
  }
  80%{
    top:400px;
  }
81%{
    top:405px;
  }
82%{
    top:410px;
  }
83%{
    top:415px;
  }
84%{
    top:420px;
  }
  85%{
    top:425px;
  }
86%{
    top:430px;
  }
87%{
    top:435px;
  }
88%{
    top:440px;
  }
89%{
    top:445px;
  }
  90%{
    top:450px;
  }
91%{
    top:455px;
  }
92%{
    top:460px;
  }
93%{
    top:465px;
  }
94%{
    top:470px;
  }
  95%{
    top:475px;
  }
96%{
    top:480px;
  }
97%{
    top:485px;
  }
98%{
    top:490px;
  }
99%{
    top:495px;
  }
  100% {
    top:500px;
  }
}
@-webkit-keyframes move-animation {
    0%{
    top:0px;
  }
1%{
    top:5px;
  }
2%{
    top:10px;
  }
3%{
    top:15px;
  }
4%{
    top:20px;
  }
  5%{
    top:25px;
  }
6%{
    top:30px;
  }
7%{
    top:35px;
  }
8%{
    top:40px;
  }
9%{
    top:45px;
  }
  10%{
    top:50px;
  }
11%{
    top:55px;
  }
12%{
    top:60px;
  }
13%{
    top:65px;
  }
14%{
    top:70px;
  }
  15%{
    top:75px;
  }
16%{
    top:80px;
  }
17%{
    top:85px;
  }
18%{
    top:90px;
  }
19%{
    top:95px;
  }
  20%{
    top:100px;
  }
21%{
    top:105px;
  }
22%{
    top:110px;
  }
23%{
    top:115px;
  }
24%{
    top:120px;
  }
  25%{
    top:125px;
  }
26%{
    top:130px;
  }
27%{
    top:135px;
  }
28%{
    top:140px;
  }
29%{
    top:145px;
  }
  30%{
    top:150px;
  }
31%{
    top:155px;
  }
32%{
    top:160px;
  }
33%{
    top:165px;
  }
34%{
    top:170px;
  }
  35%{
    top:175px;
  }
36%{
    top:180px;
  }
37%{
    top:185px;
  }
38%{
    top:190px;
  }
39%{
    top:195px;
  }
  40%{
    top:200px;
  }
41%{
    top:205px;
  }
42%{
    top:210px;
  }
43%{
    top:215px;
  }
44%{
    top:220px;
  }
  45%{
    top:225px;
  }
46%{
    top:230px;
  }
47%{
    top:235px;
  }
48%{
    top:240px;
  }
49%{
    top:245px;
  }
  50%{
    top:250px;
  }
51%{
    top:255px;
  }
52%{
    top:260px;
  }
53%{
    top:265px;
  }
54%{
    top:270px;
  }
  55%{
    top:275px;
  }
56%{
    top:280px;
  }
57%{
    top:285px;
  }
58%{
    top:290px;
  }
59%{
    top:295px;
  }
  60%{
    top:300px;
  }
61%{
    top:305px;
  }
62%{
    top:310px;
  }
63%{
    top:315px;
  }
64%{
    top:320px;
  }
  65%{
    top:325px;
  }
66%{
    top:330px;
  }
67%{
    top:335px;
  }
68%{
    top:340px;
  }
69%{
    top:345px;
  }
  70%{
    top:350px;
  }
71%{
    top:355px;
  }
72%{
    top:360px;
  }
73%{
    top:365px;
  }
74%{
    top:370px;
  }
  75%{
    top:375px;
  }
76%{
    top:380px;
  }
77%{
    top:385px;
  }
78%{
    top:390px;
  }
79%{
    top:395px;
  }
  80%{
    top:400px;
  }
81%{
    top:405px;
  }
82%{
    top:410px;
  }
83%{
    top:415px;
  }
84%{
    top:420px;
  }
  85%{
    top:425px;
  }
86%{
    top:430px;
  }
87%{
    top:435px;
  }
88%{
    top:440px;
  }
89%{
    top:445px;
  }
  90%{
    top:450px;
  }
91%{
    top:455px;
  }
92%{
    top:460px;
  }
93%{
    top:465px;
  }
94%{
    top:470px;
  }
  95%{
    top:475px;
  }
96%{
    top:480px;
  }
97%{
    top:485px;
  }
  
98%{
    top:490px;
  }
99%{
    top:495px;
  }
  100% {
    top:500px;
  }
}


#bg{
  width:200px;
  height:500px;
  position:relative;
  overflow:hidden;
  margin:auto;
 background:url('http://spiralforums.biz/uploads/post-53-1139607373.jpg');
  background-size:120% 100%;
  background-repeat:repeat-y;
  background-position-x:center;
  background-position-y:700px;
  -webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 01s linear infinite;
}


@-webkit-keyframes backgroundScroll {
from {background-position: center 0;}
to {background-position: center 500px;}
}
 
@keyframes backgroundScroll {
from {background-position: center 0;}
to {background-position: center 500px;}
}

#p1{
  height:100px;
  width:50px;
  background-size:contain;
  background-repeat:no-repeat;
  background-image:url('https://pixabay.com/static/uploads/photo/2013/07/12/11/58/car-145009_640.png');
  position:relative;
  bottom:-390px;
  left:75px;

}
.player{
     animation: blink-animation 0.1s steps(5, start) infinite;
  -webkit-animation: blink-animation 0.1s steps(5, start) infinite;
}
@keyframes blink-animation {
  from{
    background-position-y:0px;
  }
  to {
    background-position-y:2px;
  }
}
@-webkit-keyframes blink-animation {
   from{
    background-position-y:0px;
  }
  to {
    background-position-y:2px;
  }
}

.opponent{
  height:100px;
  width:50px;
  background-size:contain;
  background-repeat:no-repeat;
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
  background-image:url('https://pixabay.com/static/uploads/photo/2013/07/12/11/58/car-145009_640.png');
  position:absolute;
  top:0px;
       animation: move-animation 3s steps(5, start) 1;
  -webkit-animation: move-animation 3s steps(5, start) 1;
}



/*Downloaded from https://www.codeseek.co/naeemshaikh27/a-pen-by-naeem-shaikh-wGoezg */
var generateOpponents= function(){
  this.rate=5000;
  this.oppoDistSpeed=3000;
  var tat=this;
  var intrvl= setInterval(function(){
    //tat.clearRoad();
    tat.createOpponent();
    setTimeout(function(){
      $('#bg').find('.opponent').remove();
    },2900);
  },this.rate);
  this.createOpponent= function(){
    var randm=Math.floor(Math.random() * 150);
    $('#bg').append('<div class="opponent player '+tat.oppo+'num" style="left:'+randm+'px"></div>');
  }
};
var movePlayer= function(key){
  left=parseInt($('#p1').css('left'));
  switch (key) {
case 39:
      if(left<150){
        $('#p1').css('left',(left+1)+'px')
      }
    break;
case 37:
      
      if(left>0){
        $('#p1').css('left',(left-1)+'px')
      }
    break;
}
};
var initiateControls= function(){
  var intr=null;
  var pressed = null;
$(window).on('keydown', function(event) {
    pressed = true; 
  if(intr){
    clearInterval(intr);
  }
    intr= setInterval(function(){
        movePlayer(event.keyCode);
    },1);
});
  
$(window).on('keyup', function(event) {
    pressed = null;
  if(intr){
    clearInterval(intr);
  }
});
}
$(function(){
 initiateControls();
 generateOpponents();
});

Comments