Перемещение изображения с помощью клавиш со стрелками в JavaScript

Я делаю простую игру на Javascript для школьного проекта. Я пытаюсь заменить красный квадрат изображением (по следующей ссылке).

введите описание ссылки здесь Как я могу этого добиться?

Добро пожаловать в SO! Пожалуйста, разместите здесь свой код, включая то, что вы пробовали. Требуется, чтобы вы попытались решить возникшую у вас проблему. Сначала это кажется грубым, но StackOverflow - это сайт вопросов и ответов, а не форум, и поэтому он так полезен для разработчиков.

— 02.04.2018 18:01

Добавление к сообщению zfrisch: я бы порекомендовал просмотреть Как спросить, чтобы узнать, как создать правильно сформулированный вопрос.

— 02.04.2018 18:01

Возможный дубликат Как добавить изображение на холст

— 02.04.2018 18:04

javascript html

02.04.2018 17:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Отличный вопрос! Используйте фрагмент, чтобы опубликовать свой код. По этой ссылке должен быть дан полный ответ добавить изображение

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY -= 1; 
}

function movedown() {
    myGamePiece.speedY += 1; 
}

function moveleft() {
    myGamePiece.speedX -= 1; 
}

function moveright() {
    myGamePiece.speedX += 1; 
}

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>

</head>
<body onload = "startGame()">

<div style = "text-align:center;width:480px;">
  <button onclick = "moveup()">UP</button><br><br>
  <button onclick = "moveleft()">LEFT</button>
  <button onclick = "moveright()">RIGHT</button><br><br>
  <button onclick = "movedown()">DOWN</button>
</div>

<p>If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.</p>
</body>
</html>

@MatusDubrava - он или она скопировали код, на который OP ссылался в исходном вопросе, чтобы показать, что его можно поместить во фрагмент. DCR на самом деле не отвечает на этот вопрос.

— 02.04.2018 18:20

@AlexanderNied Я понял это, но это не то, как здесь, в этом случае редактирование вопроса OP - правильный подход (кстати, я не отрицал)

— 02.04.2018 18:25

@MatusDubrava - согласен на 100%. Извините, я не хотел потворствовать действиям, просто чтобы объяснить, что именно делает DCR. Я должен был прояснить это.

— 02.04.2018 18:31

02.04.2018 18:08