Moving an image with arrow keys in JavaScript

Question

I'm making a simple Javascript game for a school project. I'm trying to replace the red square with an image(in the following link).

enter link description here How can i achieve this?

Welcome to SO! Please post your code here, including what you've tried. It is required that you attempt to solve the problem you're having. This seems crude at first, but StackOverflow is a question and answer site, not a forum, and that's why it's so useful to Developers. — zfrisch, Apr 02 '18 at 16:01
Adding to zfrisch's message: I would recommend reviewing [ask] for tips on how to create a well-formed question. — Alexander Nied, Apr 02 '18 at 16:01
Possible duplicate of [How to add image to canvas](https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas) — Alexander Nied, Apr 02 '18 at 16:04

score -1 · Answer 1 · answered Apr 02 '18 at 16:08

Great question! Use a snippet to post your code. This link should provide a complete answer add image

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 - He or she copied the code that the OP linked to in the original question to show that it could be put into a snippet. DCR is not actually answering the question here. — Alexander Nied, Apr 02 '18 at 16:20
@AlexanderNied I realized that much but that is not how it goes here, in that case, editing the OP's question is the right approach (btw I did not downvote) — Matus Dubrava, Apr 02 '18 at 16:25
@MatusDubrava - I agree 100%. Sorry, didn't mean to condone the action, just to explain what it was DCR was doing. I should have made that more clear. — Alexander Nied, Apr 02 '18 at 16:31

Moving an image with arrow keys in JavaScript

1 Answers1