Ping-pong игра средствами HTML, CSS, JavaScript.

Ping-pong игра средствами HTML, CSS, JavaScript.

Пример

See the Pen xOqMQm by zetwin (@zetwin) on CodePen.


HTML

<div id="g"></div>
<div id="shine"></div>
<canvas id="c"></canvas>

<audio preload="true" id="snd">
     <source src="http://www.mcalister.ch/lab/colorpong/c.wav"/>
</audio>

CSS

  width:  100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#g{
  position:absolute;
     width:100%;
     height:100%;

     background: -moz-linear-gradient(top,  rgba(255,255,255,) 50%, rgba(255,255,255,0.25) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,)), color-stop(100%,rgba(255,255,255,0.25)));
     background: -webkit-linear-gradient(top,  rgba(255,255,255,) 50%,rgba(255,255,255,0.25) 100%);
     background: -o-linear-gradient(top,  rgba(255,255,255,) 50%,rgba(255,255,255,0.25) 100%);
     background: -ms-linear-gradient(top,  rgba(255,255,255,) 50%,rgba(255,255,255,0.25) 100%);
     background: linear-gradient(to bottom,  rgba(255,255,255,) 50%,rgba(255,255,255,0.25) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00ffffff&#39;, endColorstr=&#39;#40ffffff&#39;,GradientType= );
}  

#c{
  margin:-150px -200px;
  position:absolute;
  top:50%;
     left:50%;
  -moz-box-shadow: 3px 0px rgba(,,,0.4);
  -webkit-box-shadow: 3px 0px rgba(,,,0.4);
  -o-box-shadow: 3px 0px rgba(,,,0.4);
  box-shadow: 3px 0px rgba(,,,0.4);
  border:5px solid #262626;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.15)));
}

#shine{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-195px;
    margin-top:-145px;
     z-index:9999;
     background-image:url(http://css-live.ru/Primer/tricks/bg.png);
     opacity:0.4;
}

#link{
     position:absolute;
     right:10px;
     bottom:10px;
}

#link a{
     color:#262626;
     text-shadow: 1px 1px rgba(255,255,255,0.3);
     text-decoration:none;
     font-size:10px;
     font-family:&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
     transition:font-size 0.2s ease-in-out;
}

#link a:hover{
     font-size:14px;
}

Javascript

// init canvas
var canvas = document.getElementById(&quot;c&quot;);
var ctx= canvas.getContext(&quot;2d&quot;);
canvas.width = 400;
canvas.height = 300;

// set global vars
var score = ;
var highscore = ;
var collision = false;
var fl = ;
var fr = ;
var logo = new Image();   // Create new img element
logo.src = &quot;http://css-live.ru/Primer/tricks/lemu.png&quot;;
snd =  document.getElementById(&quot;snd&quot;);

// function for random color
function randcol(){

  // random 70 through 255 (so its never too dark)
  var start = 70;
  return start + Math.round(Math.random() * (255-start));
}

// initialize objects
var bar = {
  height: 5,
  width: 70,
  x: ,
  y: canvas.height-this.height,
  r: 255,
  g: 255,
  b: 255
}

var ball = {
  y: ,
  x: ,
  width: 5,
  height: 5,
  speedx: 200,
  speedy: -200
}

var ball2 = {
  width: ball.width,
  height: ball.height,
  x: ball.width*2*(-1),
  y: ball.height*2*(-1),
  r: 255,
  g: 255,
  b: 255,
  a: 1
}

var reset = function () {

  //initialize bar on left
  bar.x=;
  bar.y=canvas.height-bar.height;

  //set speed so ball goes up first
  ball.speedy = -200;
  ball.speedx = 200;

  // reset score
  score = ;

  // Place ball on screen randomly (halfway on y axis)
  ball.x = (Math.random() * (canvas.width - 5));
  ball.y = (canvas.width/2)-(ball.height/2);
};

function resetball2(){
  // hide ball2
  ball2.x=ball2.width*(-1);
  ball2.y=ball2.height*(-1);

  //set same size as ball
  ball2.width=ball.width;
  ball2.height=ball.height;

  // get random color
  ball2.r = randcol();
  ball2.g = randcol();
  ball2.b = randcol();

  // set alpha = 1
  ball2.a = 1;
}

// function for updating bar X position
function follow(e)
{
  v = e.pageX - canvas.offsetLeft -bar.width/2;
  if (v &lt; ){v = ;}
  if (v &gt; canvas.width-bar.width){v = canvas.width-bar.width;}

  bar.x = v;
}

// update bar x position
window.addEventListener(&quot;mousemove&quot;,follow,false);

var update = function (modifier) {

//update ball position
ball.x = ball.x+(ball.speedx*modifier);
ball.y= ball.y+(ball.speedy*modifier);

// collision ball
if (collision == true){
if (ball2.a &gt; ){ball2.width = ball2.width+1000*modifier;
ball2.height=ball2.height+1000*modifier;
ball2.x = ball.x;
ball2.y = ball.y;
ball2.a = ball2.a - 2*modifier;

}else{
collision = false;
resetball2();
}
}

// Is ball touching top?
if (ball.y &lt;= () &amp;&amp; ball.speedy &lt; ) {

  //change direction
  ball.speedy = ball.speedy * -1;

}

// Is ball touching left
if (ball.x &lt;= () &amp;&amp; ball.speedx &lt; ()){
  ball.speedx = ball.speedx * -1;
}

// Is ball touching right
if (ball.x &gt;= (canvas.width-ball.width) &amp;&amp; ball.speedx &gt; ()){
  ball.speedx = ball.speedx * -1;
}

// Is ball touching bar?
if (
  ball.x+ball.width &gt;= (bar.x)
  &amp;&amp; ball.x &lt;= (bar.x+bar.width)
  &amp;&amp; ball.y+ball.height &gt;= (bar.y)
  &amp;&amp; ball.speedy &gt;
) {
  // reset sound and play
  snd.currentTime = ;
  snd.play();

  // update score
  ++score;
  if (score &gt; highscore){highscore = score;}

  // increase speed
  // boost X if ball hits corner of bar
  if(ball.x+ball.width &lt;= (bar.x+ball.width*2)){

    // define flick size
    fl = 10+(ball.width*2-((ball.x+ball.width)-bar.x))*5;

    // always flick ball left
    if(ball.speedx &lt; ){ball.speedx = ball.speedx-fl;}
     if(ball.speedx &gt; ){ball.speedx = ball.speedx*(-1)-fl;}
  }else if(ball.x &gt;= (bar.x+bar.width-ball.width*2)){

     // define flick size
    fr = 10+(ball.width*2-((ball.x+ball.width)-(bar.x+bar.width)))*5;

    // always flick ball right
    if(ball.speedx &lt; ){ball.speedx = ball.speedx*(-1)+fr;}
     if(ball.speedx &gt; ){ball.speedx = ball.speedx+fr;}
  }else{
    // Randomize x speed on central hit ((-20) to 20)
    ball.speedx = ball.speedx + ((Math.random()*40)-20);
  }

  // update Y speed
  ball.speedy = ball.speedy +20;

  //change y direction of ball
  ball.speedy = ball.speedy * -1;

  //set collision true
  collision=true;

  //reset / initialize ball2
  resetball2();
  //set color
  bar.r = ball2.r;
  bar.g = ball2.g;
  bar.b = ball2.b;

  // set background color
  document.body.style.background = &quot;rgb(&quot;+bar.r+&quot;,&quot;+bar.g+&quot;,&quot;+bar.b+&quot;)&quot;;
}

// Is ball touching bottom?
if (ball.y &gt;= (canvas.height-ball.height) &amp;&amp; ball.speedy &gt; ) {
  reset();
}

};

// Draw everything
var render = function () {

// set dark grey bg
ctx.fillStyle   = &#39;#262626&#39;;
ctx.fillRect(,,canvas.width,canvas.height);

// set logo
ctx.drawImage(logo,canvas.width/2-logo.width/2,canvas.height/2-logo.height/2);

// draw ball2 (collision effect)
ctx.beginPath();
ctx.fillStyle   = &quot;rgba(&quot;+ball2.r+&quot;,&quot;+ball2.g+&quot;,&quot;+ball2.b+&quot;,&quot;+ball2.a+&quot;)&quot;;
//ctx.fillRect(ball2.x,ball2.y,ball2.width,ball2.height);
ctx.arc(ball2.x+ball.width,bar.y,ball2.width,ball2.height, Math.PI*2, true);
ctx.fill();
ctx.closePath();

// draw ball
ctx.fillStyle   = &quot;rgb(&quot;+bar.r+&quot;,&quot;+bar.g+&quot;,&quot;+bar.b+&quot;)&quot;;
ctx.fillRect(ball.x,ball.y,ball.width,ball.height);

// draw bar
ctx.fillStyle   = &quot;rgb(&quot;+bar.r+&quot;,&quot;+bar.g+&quot;,&quot;+bar.b+&quot;)&quot;;
ctx.fillRect(bar.x,bar.y,bar.width,bar.height);

// Score
ctx.fillStyle = &quot;rgb(250, 250, 250)&quot;;
ctx.font = &quot;12px Helvetica&quot;;
ctx.textAlign = &quot;right&quot;;
ctx.textBaseline = &quot;top&quot;;
ctx.fillText(&quot;score: &quot; + score, canvas.width-10, 23);

// HighScore
ctx.fillStyle = &quot;rgb(250, 250, 250)&quot;;
ctx.font = &quot;bold 12px Helvetica&quot;;
ctx.textAlign = &quot;right&quot;;
ctx.textBaseline = &quot;top&quot;;
ctx.fillText(&quot;best: &quot; + highscore, canvas.width-10, 10);

};

var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;
};

reset();
var then = Date.now();
setInterval(main, 1);
Равномерное выравнивание блоков по ширине.... css #elsewhere { background-color: #222; } .zone { padding-left: 1.25rem; padding-right: 1.25rem; margin-left: -1.25rem; margin-right: -1....
Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */
3D эффект текста с помощью CSS HTML НажмиНа меня И CSS Стили @import url(http://fonts.googleapis.com/css?family=Montserrat:700); *{transition: all 0.08s ease-in-out;} :...
Google Chrome как текстовый редактор... Да еще с подсветкой кода! Все что нам потребуется так это вставить в адресную строку вот этот код: data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQ...
Читайте также  3D эффект текста с помощью CSS

Сохрани, чтобы не потерять