Javascript-форум - Показать сообщение отдельно - Арканоид

Eadweard · #1 (**permalink**) 14.03.2016, 05:50

Привет. Пытаюсь разобраться с побитовыми операциями "|" в JavaScript (код в самом низу). Нужно заменить их на условия (если можно, с объяснением). Т.е. мне нужно заменить все побитые операции на условия, говорят так легче и понятней

(Писал код не я, я только редактирую и разбираюсь)
HTML:

<html> 
    <head>   
        <link href="style.css" rel="stylesheet">
        <script src="1.js"></script>
    </head>
    <body>
 <img src="11.jpg" id="background">
 <div id="field">
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  
  <div id="paddle"></div>
  <div id="ball" style="left: 296px; top: 537px;"></div>
  <div id="lifesNode">3</div>
  <div id="scoreNode">0</div>
</div>
</body> 
</html>

CSS:

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 8px;
    cursor: none !important;
}

#background {
	width: 644px;
    height: 570px;
	position: absolute;
}
#field {
    width: 644px;
    height: 540px;
    padding-top: 30px;
    border: 1px solid #ccc;
    font-size: 0;
    position: relative;
}

.brick,
.removed {
    width: 28px;
    height: 10px;
    margin: 1px;
	background-image:url(boom.gif);
    display: inline-block;
    border: 1px solid;
	background-size: cover;
}

.brick {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #cdd 0%, #777 100%);
    background: linear-gradient(to bottom,  #cdd 0%, #777 100%);
    border-color: #777 #777 #000 #000;
    border-radius: 3px;
}

.brick:nth-child(2n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #ccc 0%, #777 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #777 100%);
}

.brick:nth-child(5n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #008));
    background: -webkit-linear-gradient(top,  #ccc 0%, #008 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #008 100%);
}

.brick:nth-child(3n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #080));
    background: -webkit-linear-gradient(top,  #ccc 0%, #080 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #080 100%);
}

.brick:nth-child(7n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #808));
    background: -webkit-linear-gradient(top,  #ccc 0%, #808 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #808 100%);
}

.brick:nth-child(11n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #880));
    background: -webkit-linear-gradient(top,  #ccc 0%, #880 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #880 100%);
}

#paddle {
    width: 62px;
    height: 5px;
    border: 1px solid #777;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #cdd 0%, #777 100%);
    background: linear-gradient(to bottom,  #cdd 0%, #777 100%);
    position: absolute;
    left: 270px;
    top: 550px;
    border-radius: 3px;
}

#ball {
    width: 10px;
    height: 10px;
    border: 1px solid #955;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdd), color-stop(100%, #500));
    background: -webkit-linear-gradient(top,  #fdd 0%, #500 100%);
    background: linear-gradient(to bottom,  #fdd 0%, #500 100%);
    border-radius: 50%;
    position: absolute;
}

#lifesNode,
#scoreNode {
    position: absolute;
    right: -85px;
    font: 14px arial, helvetica, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px 0;
    width: 75px;
    text-align: center;
}

#lifesNode {
    top: 20px;
}

#lifesNode:before {
    content: 'lifes: ';
}

#scoreNode {
    top: 50px;
}

#scoreNode:before {
    content: 'score: ';
}

javascript:

window.onclick=function(){
(function (fld, pF, px, py, dx, dy, lifes, score) {
  var cycle = setInterval(function () {
    var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px'),
      by = pF(ball.style.top = pF(ball.style.top) + dy + 'px'),
      row = ((by - 30) / 14) | 0, col = (bx / 32) | 0;

    if (bx < 0 && dx < 0 || bx >= 640 && dx > 0) dx *= -1;
    if (bx + 6 >= px && bx + 6 <= px + 64 && by >= 540 && by <= 545) {
      dy *= -1;
      if (bx + 6 <= px + 21) dx = -6;
      else if (bx + 6 >= px + 43) dx = 6;
      else if (Math.abs(dx) == 6) dx = (dx * 2 / 3) | 0;
    }
    if (by < 0) dy *= -1;
    if (by >= 555 && !--lifes) clearInterval(cycle), alert('Game over!');
    if (by >= 555 && lifes) dy *= -1, lifesNode.innerHTML = lifes;
    if (by >= 18 && by <= 100 && fld[row * 20 + col].className != 'removed') {
      dy *= -1, fld[row * 20 + col].className = 'removed';
      scoreNode.innerHTML = ++score;
      if (score == 100) clearInterval(cycle), alert('Victory!');
    }
  }, 1000 / 60);

  document.addEventListener('mousemove', function (e) {
    px = (e.pageX > 40) ? ((e.pageX < 613) ? e.pageX - 40 : 578) : 0;
    paddle.style.left = px + 'px';
  }, false);
}(field.children, parseFloat, 129, 270, -4, -4, 3, 0));
}