Машинки, конфликт с классами
Всем привет, выдаёт ошибку Uncaught SyntaxError: Identifier 'Road' has already been declared. Что исправить?
const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); var Road = new Image(); Resize(); window.addEventListener("resize", Resize); window.addEventListener("keydown", function (e) { KeyDown(e); }); //Получение // нажатий с клавиатуры var objects = []; //Массив игровых объектов var roads = [ new Road("layout/assets/img/bg-game.jpg", 0), new Road("layout/assets/img/bg-game.jpg", 626) ]; //Массив с фонами var player = null; //Объект, которым управляет игрок, // — тут будет указан номер объекта в массиве objects function Start() { timer = setInterval(Update, 1000 / 60); //Состояние // игры будет обновляться 60 раз в секунду // — при такой частоте обновление происходящего // будет казаться очень плавным } function Stop() { clearInterval(timer); //Остановка обновления } function Update() //Обновление игры { roads[0].Update(roads[1]); roads[1].Update(roads[0]); Draw(); } function Draw() //Работа с графикой { ctx.clearRect(0, 0, canvas.width, canvas.height); //Очистка холста от предыдущего кадра for(var i = 0; i < roads.length; i++) { ctx.drawImage ( roads[i].image, //Изображение для отрисовки 0, //Начальное положение по оси X на изображении 0, //Начальное положение по оси Y на изображении roads[i].image.width, //Ширина изображения roads[i].image.height, //Высота изображения roads[i].x, //Положение по оси X на холсте roads[i].y, //Положение по оси Y на холсте canvas.width, //Ширина изображения на холсте canvas.width //Так как ширина и высота фона одинаковые, в качестве высоты указывается ширина ); } } function KeyDown(e) { switch(e.keyCode) { case 37: //Влево break; case 39: //Вправо break; case 38: //Вверх break; case 40: //Вниз break; case 27: //Esc break; } } function Resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } class Road { constructor(image, y) { this.x = 0; this.y = y; this.image = new Image(); this.image.src = "layout/assets/img/bg-game.jpg"; } Update(road) { this.y += speed; //При обновлении изображение смещается вниз if(this.y > window.innerHeight) //Если изображение ушло за край холста, то меняем положение { this.y = road.y - this.image.height + speed; //Новое положение указывается с учётом второго фона } } } |
Цитата:
|
рони, не получается почему-то, теперь другая ошибка Uncaught TypeError: Road is not a constructor
const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); var Road = new Image("layout/assets/img/bg-game.jpg"); Resize(); window.addEventListener("resize", Resize); window.addEventListener("keydown", function (e) { KeyDown(e); }); //Получение // нажатий с клавиатуры var objects = []; //Массив игровых объектов var roads = [ new Road("layout/assets/img/bg-game.jpg", 0), new Road("layout/assets/img/bg-game.jpg", 626) ]; //Массив с фонами var player = null; //Объект, которым управляет игрок, // — тут будет указан номер объекта в массиве objects function Start() { timer = setInterval(Update, 1000 / 60); //Состояние // игры будет обновляться 60 раз в секунду // — при такой частоте обновление происходящего // будет казаться очень плавным } function Stop() { clearInterval(timer); //Остановка обновления } function Update() //Обновление игры { roads[0].Update(roads[1]); roads[1].Update(roads[0]); Draw(); } function Draw() //Работа с графикой { ctx.clearRect(0, 0, canvas.width, canvas.height); //Очистка холста от предыдущего кадра for(var i = 0; i < roads.length; i++) { ctx.drawImage ( roads[i].image, //Изображение для отрисовки 0, //Начальное положение по оси X на изображении 0, //Начальное положение по оси Y на изображении roads[i].image.width, //Ширина изображения roads[i].image.height, //Высота изображения roads[i].x, //Положение по оси X на холсте roads[i].y, //Положение по оси Y на холсте canvas.width, //Ширина изображения на холсте canvas.width //Так как ширина и высота фона одинаковые, в качестве высоты указывается ширина ); } } function KeyDown(e) { switch(e.keyCode) { case 37: //Влево break; case 39: //Вправо break; case 38: //Вверх break; case 40: //Вниз break; case 27: //Esc break; } } function Resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } class Road_cl { constructor(image, y) { this.x = 0; this.y = y; this.image = new Image(); this.image.src = "layout/assets/img/bg-game.jpg"; } Update(road) { this.y += speed; //При обновлении изображение смещается вниз if(this.y > window.innerHeight) //Если изображение ушло за край холста, то меняем положение { this.y = road.y - this.image.height + speed; //Новое положение указывается с учётом второго фона } } } |
рони, либо же вот так, ошибки не выдаёт, но не отрисовывает, пустой экран
var canvas = document.getElementById("canvas"); //Получение холста из DOM var ctx = canvas.getContext("2d"); //Получение контекста — через него можно работать с холстом var scale = 0.1; //Масштаб машин Resize(); // При загрузке страницы задаётся размер холста window.addEventListener("resize", Resize); //При изменении размеров окна будут меняться размеры холста window.addEventListener("keydown", function (e) { KeyDown(e); }); //Получение нажатий с клавиатуры var objects = []; //Массив игровых объектов var player = null; //Объект, которым управляет игрок, — тут будет указан номер объекта в массиве objects function Start() { timer = setInterval(Update, 1000 / 60); //Состояние игры будет обновляться 60 раз в секунду — при такой частоте обновление происходящего будет казаться очень плавным } function Stop() { clearInterval(timer); //Остановка обновления } function Update() //Обновление игры { roads[0].Update(roads[1]); roads[1].Update(roads[0]); Draw(); } function Draw() //Работа с графикой { ctx.clearRect(0, 0, canvas.width, canvas.height); //Очистка холста от предыдущего кадра for(var i = 0; i < roads.length; i++) { ctx.drawImage( roads[i].image, //Изображение для отрисовки 0, //Начальное положение по оси X на изображении 0, //Начальное положение по оси Y на изображении roads[i].image.width, //Ширина изображения roads[i].image.height, //Высота изображения roads[i].x, //Положение по оси X на холсте roads[i].y, //Положение по оси Y на холсте canvas.width, //Ширина изображения на холсте canvas.width //Так как ширина и высота фона одинаковые, в качестве высоты указывается ширина ); } } function KeyDown(e) { switch(e.keyCode) { case 37: //Влево break; case 39: //Вправо break; case 38: //Вверх break; case 40: //Вниз break; case 27: //Esc break; } } function Resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } class Road { constructor(image, y) { this.x = 0; this.y = y; this.image = new Image(); this.image.src = "layout/assets/img/bg-game.jpg"; } Update(road) { this.y += speed; //При обновлении изображение смещается вниз if(this.y > window.innerHeight) //Если изображение ушло за край холста, то меняем положение { this.y = road.y - this.image.height + speed; //Новое положение указывается с учётом второго фона } } } var roads = [ new Road("layout/assets/img/bg-game.jpg", 0), new Road("layout/assets/img/bg-game.jpg", 626) ]; //Массив с фонами |
Цитата:
Посмотрите внимательно https://developer.mozilla.org/ru/doc...xt2D/drawImage |
Часовой пояс GMT +3, время: 04:10. |