Хорь Обыкновенный

Есть два варианта, первый самый много вероятный это то что вы просто не правильно указали путь к примеру

<div class="1">
  <div class="active"></div>
  <div class="active"></div>
  <div class="active"></div>
</div>

<div class="2">
 <div class="active"></div>
 <div class="active"></div>
</div>

<div class="3">
 <div class="active"></div>
 <div class="active"></div>
</div>

И ты в css указываешь так

.active:nth-child(4) {
  стиль
}

это не правильно
Правильно будет так

.1 .active:nth-child(2) {
  стиль
}

Fytch ответил про обязательный атрибут верстки.

А я дополню: никто в здравом уме не зумит сайт, для отладки используется дебаггер (f12). А для управления адаптивом включают эмуляцию устройств (там же в дебаггере).

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no'>

../ указывает на уровень выше. То есть у Вас есть папка с проектом с названием YouTube (просто к примеру). В ней у вас есть 2 папки - сss и fonts. Если Вы укажите из CSS файла, который находится в папке css путь ../fonts/Roboto. woff2, то Вы подниметесь в папку YouTube, затем в папку fonts, а потом к шрифту. И этого Вам достаточно. Когда Вы будете заливать на хостинг, то у Вас там будем такая же папочка YouTube и в ней Ваши файли

document.getElementById("but11").style.display="none";

localStorage.setItem("record", newRecord);

parseInt()
https://developer.mozilla.org/ru/docs/Web/JavaScri...

PHP

<?php
$contentData = file_get_contents( 'highscore.txt' );
print($contentData);
?>

JavaScript (jQuery) [AJAX]

var documentInput = $('.input');
documentInput .load('highscore.txt',{ /* data params */},
  function(){alert("content complete")}
);

JavaScript [XHR]

var client = new XMLHttpRequest();
client.open('GET', 'highscore.txt');
client.onreadystatechange = function() {
  alert(client.responseText);
}
client.send();

Ну для общего Python
def file_get_contents(filename)

Если использовать jQuery то так:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="input-id"/>
<script>
jQuery.ajax({
	url:"/highscore.txt",
	success:function(data){
		jQuery('#input-id').val(data);
	}
});
</script>

Выложите код например на JSFiddle. Я попробовал его запустить, но ничего не произошло и начал жутко виснуть браузер. Поэтому решил написать простенький пример, но меня затянуло и просидел несколько часов за разработкой. Вот что получилось и код. Можете посмотреть как рисуется из массива объекты но для начала хочу сказать.
Во первых в любой игре должна быть основная функция у меня это gameLoop у вас это похоже updateGameField. В ней вызываются основные методы рисования и обработки физики. Иногда кстате разделяют делают 1 метод для рисования например на 60fps, а второй для обработки физики на 200fps если нужно точные просчеты( быстрые полеты пуль и т.п.).
Во вторых, вот такого tm2 = setInterval (updateGameField, 10) быть не должно, я вообще считаю лучше бы эту функцию в javascript не добавляли многие не понимают ее обратную сторону. Вы вообще выставили 10мс а это 100 фпс! Если ваша машина в какой-то момент не успеет обработать хотя 1 раз, то вызовется функция еще раз и одновременно будет выполнять 2, 3, 10 функций до тех пор пока у вас все не зависнет, javascript не будет ждать он просто будет вызывать ее по кд поэтому для игровой функции нужно использовать в крайнем случае setTimeout(updateGameField,1000/60/*60фпс*/); в конце функции. Но давно уже появилась отличная оптимизированная функция requestAnimationFrame(gameLoop); которая будет стараться поддерживать 60 fps вашей игры. Рекомендую использовать только ее.
В третьих рекомедую почитать статьи о созадании игр, проблемы разработки, Delta-time и независимость частоты кадров, коллизии и т.п.
Все это необходимо почти в каждой игре, поэтому это нужно понимать чтобы смочь написать хоть что-то.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
var height = 180;
var width = 180;
img.onload = function() {
	context.save();
    context.rect(0, 0, 200, 200);//Здесь первый 0=X
    context.clip();
    context.drawImage(img,0, 0,width,height);//Первый 0=X
    context.restore();
};
img.src = 'http://vikup-msk.ru/wp-content/uploads/2015/10/1445787630_in_transit.png';

if ( document.getElementById('pass').value = "123" ) {
  document.getElementById('link').href = "https://whatever.com" 
}

Изменить размер и вес самого изображения - в любом графическом редакторе (Photoshop etc).
Если нужно расположить фоном изображение большего размера, чем элемент, то проще всего использовать свойство background-size: cover.