Морское сражение

Название «Морское сражение» в последний момент заменило «Морской бой», поскольку за вторым закрепилась определённая структура игрового поля :). Игра написана на HTML5 (HTML + CSS + JavaScript). Для полноценного восприятия материала заметки, нужно хорошо знать HTML и CSS, основы JavaScript и работу с объектной моделью документа (DOM). Основная идея игры: максимальное количество попаданий по «пиратскому кораблю» (на самом деле можно вставить фоновую картинку чего угодно) при ограниченном количестве ядер собственного корабля.

Морское сражение. Играть

Морское сражение. Разработка

Вёрстка Морского сражения

HTML

<div class="wrapper"> <!-- игровое поле -->
<div class="result">0</div> <!-- кол-во попаданий -->
<div class="mygun"></div> <!-- наш юнит -->
<div class="enemy"></div> <!-- юнит противника -->
</div>

CSS

.wrapper{
  width: 600px;
  height: 450px;
  border: 1px solid #000;
  margin: auto;
  position: relative;
  background: #fff url(ТУТ_ИЗОБРАЖЕНИЕ_ИГРОВОГО_ФОНА.jpg) 0 0 no-repeat;
}
.mygun, .enemy, .shot{
  width: 40px;
  height: 40px;
  position: absolute;
}

.mygun{
  background: #f00;
  background:  url(ТУТ_ИЗОБРАЖЕНИЕ_НАШЕГО_ЮНИТА.png);
  bottom: 0;
}
.enemy{
  background: #369;
  background: url(ТУТ_ИЗОБРАЖЕНИЕ_ЮНИТА_ПРОТИВНИКА.png);
  top:0
}
.shot{
  background: #f63;
  position: absolute;
}
.result{
  font: 3em Arial,sans-serif;
  width: 50px;
  position: absolute;
  right: 0;
  top: 40px;
}
.shot{
  background:  url(ТУТ_ИЗОБРАЖЕНИЕ_ЭЛЕМЕНТА_ВЫСТРЕЛА.png);
}

Морское сражение. Код программы

var mygun, enemy, wrapper;
var flag = "right", i = 0, shots = 25;

mygun = document.querySelector(".mygun");
enemy = document.querySelector(".enemy");
wrapper = document.querySelector(".wrapper");
result = document.querySelector(".result");

document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mousedown",mousedownHandler);

function mousemoveHandler(e){
  var target = e.srcElement || e.target; 
  var parent = mygun.parentNode;
  var rect = parent.getBoundingClientRect();
  var mygunRect = mygun.getBoundingClientRect();
  //alert(mygunRect.left)
  if( e.clientX - 20 > rect.left )
    mygun.style.left = e.clientX - rect.left - 20  + "px";
  else 
    mygun.style.left = 0 + "px";
  
  
  if( e.clientX + 20  > rect.right )
    mygun.style.left = rect.width - 42 + "px";
}
function mousedownHandler(e){
  
  if( shots == 0) return;
  shots--;
  
  
  var target = e.srcElement || e.target;
  var clone = mygun.cloneNode();
  
  var enemyRect, cloneRect;
    
  clone.className = "shot";
  
  clone.style.left = mygun.getBoundingClientRect()["left"];
  clone.style.bottom = 0;  
  clone.i = 0;
  
  var height = wrapper.getBoundingClientRect()["height"];
  
  (function(){
    if( clone.i + 42 < height){
      clone.i++;
      clone.style.bottom = clone.i + "px";
      
      cloneRect = clone.getBoundingClientRect();
      enemyRect = enemy.getBoundingClientRect();
      
      if( 
      cloneRect.left > enemyRect.left &&  
      cloneRect.left < enemyRect.left + enemyRect.width &&
      cloneRect.top < enemyRect.height
      ){
        enemy.style.border = "1px solid red"
        result.innerHTML = +result.innerHTML + 1;
        setTimeout(function(){
          enemy.style.border = "0";
        },500)
        clone.parentNode.removeChild(clone);
      }
      
      setTimeout(arguments.callee, 10);
    } else {
      clone.parentNode.removeChild(clone);
    }

  })();
  
  document.querySelector(".wrapper").appendChild(clone);
}

function enemyMove(){
  var enemyRect = enemy.getBoundingClientRect();
  var parent = enemy.parentNode;
  var rect = parent.getBoundingClientRect();
  
  if( flag == "right" ) i++;
  if( flag == "left" ) i--;
  
  enemy.style.left = i + "px";
  
   if( i + 40 >  rect.width ){
    enemy.style.left = rect.width - 42  + "px";
    flag = "left" ;
   }  
  
  if( enemyRect.left < rect.left ){
    enemy.style.left = 0 + "px";
    flag = "right";  
  }  
  
  setTimeout(enemyMove , 5);//можно через requestAnimationFrame(enemyMove)
}
enemyMove()