Сергей Соколов

function Equipment() {
  var Bag = [];

  this.addTool = function(tool) {
    Bag.push(tool);
    console.log("Added.  Bag:", Bag);
  }
}

function Tools() {
  this.item1 = {
    name: "item1",
    price: 5,
    count: 10
  };
  this.item2 = {
    name: "item2",
    price: 15,
    count: 20
  };
  this.item3 = {
    name: "item3",
    price: 20,
    count: 30
  };
  this.item4 = {
    name: "item4",
    price: 30,
    count: 40
  };
  this.item5 = {
    name: "item5",
    price: 40,
    count: 50
  };
}

var equipment = new Equipment();
var tools = new Tools();
equipment.addTool(tools.item1); //

function replacer(el){
  var i, node, span;
  if(el.hasChildNodes()) {
    for(i=0; i<el.childNodes.length; i++) {
      node = el.childNodes[i];
      if(node.nodeType === Node.ELEMENT_NODE) {
        if( !!~['SCRIPT','NOSCRIPT'].indexOf(node.nodeName)) continue;
        replacer(node);
      } else if( node.nodeType === Node.TEXT_NODE) {
        if(node.nodeValue.match(/^\s+$/)) continue;
        span = document.createElement("span");
        span.innerHTML = node.nodeValue.replace(/([а-яА-Я]+)/ug, '<i>$1</i>');
        el.insertBefore(span, node);
        el.removeChild(node);
      }
    }
  }
}

replacer(document.body);

const dGet = document.getElementById.bind(document);
const reSpace = /\s+/;
const div = dGet('text');
const text = div.innerText;
const words = text.trim().split(reSpace);
dGet('text_input').addEventListener('input', function(e){
  var i, myWords = e.target.value.trim().split(reSpace),
  theWords = words.slice();
  var toCheck = e.target.value.substr(-1) === ' ';
  if(!toCheck) myWords.length--;
  for(i=0; i<Math.min(myWords.length, words.length); i++) {
    if(words[i] !== myWords[i]) {
      theWords[i] = '<i>' + words[i] + '</i>';
    } else {
      theWords[i] = '<b>' + words[i] + '</b>';
    }
  }
  div.innerHTML = theWords.join(' ');
});

const STATE_SELECT = 1;
const STATE_CHECK = 2;
var state = STATE_SELECT;

var rrr = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("red");
};
var ggg = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("green");
};
var yyy = function() {
  $(".green").toggleClass("yellow");
  if(state === STATE_CHECK) {
    state = STATE_SELECT;
  } else {
    state = STATE_CHECK;  
  }
};

$("div").hover(rrr);
$("div").click(ggg);
$("button").click(yyy);

var player = {x:200, y:200, el:document.getElementById('player')};
player.el.style.left = '' + Math.round(player.x) + 'px';
player.el.style.top  = '' + Math.round(player.y) + 'px';

var delta = {x:0, y:0};

document.addEventListener('keydown', function(e){
  if(     e.key == 'ArrowRight') delta.x = 1;
  else if(e.key == 'ArrowLeft')  delta.x = -1;
  else if(e.key == 'ArrowUp')    delta.y = -1;
  else if(e.key == 'ArrowDown')  delta.y = 1;
});

document.addEventListener('keyup', function(e){
  if(     e.key == 'ArrowRight') delta.x = 0;
  else if(e.key == 'ArrowLeft')  delta.x = 0;
  else if(e.key == 'ArrowUp')    delta.y = 0;
  else if(e.key == 'ArrowDown')  delta.y = 0;
});

var ts = null;
function step(timestamp) {
  if(!ts) ts = timestamp;
  var passed = timestamp - ts;
  //if(passed < 200) return window.requestAnimationFrame(step);
  ts = timestamp;
  if(delta.x || delta.y) {
    player.x += delta.x * passed / 10;
    player.y += delta.y * passed / 10;
    player.el.style.left = '' + Math.round(player.x) + 'px';
    player.el.style.top  = '' + Math.round(player.y) + 'px';
  };
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);