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);
Начинающим Java программистам... Для того чтобы стать хорошим программистом, надо уметь заниматься кропотливым трудом, учиться, надо быть всегда открытым для всего нового. Для начала ...
Равномерное выравнивание блоков по ширине.... css #elsewhere { background-color: #222; } .zone { padding-left: 1.25rem; padding-right: 1.25rem; margin-left: -1.25rem; margin-right: -1....
3D эффект текста с помощью CSS HTML НажмиНа меня И CSS Стили @import url(http://fonts.googleapis.com/css?family=Montserrat:700); *{transition: all 0.08s ease-in-out;} :...
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...
Читайте также  Cкрипт от Jesse Pollak. интерактивная форма кредитной карты.

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