The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

Question

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

As I delved into the basics, incorporating canvas, CSS, and JavaScript, a question arose: should the image be housed in the HTML or the JavaScript code? Following this, I added a background color to the canvas and defined properties of the canvas in JavaScript alongside keyCodes. The image was loaded with window.onload, however, I discovered that while the canvas was moving, the image remained static.

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];

window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);

function game(){
window.onload;
update();
render();
}

function update(){
if(keys[38]) img.y--;
if(keys[40]) img.y++;
if(keys[37]) img.x--;
if(keys[39]) img.x++;
}
function render(){
ctx.fillRect(img.x, img.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    var ctx=c.getContext("2d");
    var img=document.getElementById("chio");
    ctx.drawImage(img,10,10);
};

setInterval(function(){
    game();
}, 1000/30)

// > note: window.onload shows the images

#app{
background-color:#33ff00
}

<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<canvas id="app" width=300 height=640></canvas>
<img id="chio" src="chio.png"/>
<script src="app.js"></script>
</body>
</html>

I've hit a roadblock here, seeking assistance to move forward.

javascript css html html5-canvas

Answer 1

Answer №1

I have made some adjustments to the code in "app.js", but it's not entirely clear what you are looking for. If your intention is to move the image, here is one way to achieve that.

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];
var ctx;
var img;
var position = {x:0,y:0};
window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    keys[e.keyCode] = false;
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) position.y--;
    if(keys[40]) position.y++;
    if(keys[37]) position.x--;
    if(keys[39]) position.x++;
}
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,position.x,position.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    ctx=c.getContext("2d");
    img=document.getElementById("chio");
};

setInterval(function(){
    game();
}, 1000/30);


// > note: window.onload shows the images

Answer 2

I have made some adjustments to the code in "app.js", but it's not entirely clear what you are looking for. If your intention is to move the image, here is one way to achieve that.

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];
var ctx;
var img;
var position = {x:0,y:0};
window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    keys[e.keyCode] = false;
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) position.y--;
    if(keys[40]) position.y++;
    if(keys[37]) position.x--;
    if(keys[39]) position.x++;
}
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,position.x,position.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    ctx=c.getContext("2d");
    img=document.getElementById("chio");
};

setInterval(function(){
    game();
}, 1000/30);


// > note: window.onload shows the images

Answer 3

Answer №2

One major issue with the provided code is that it attempts to access DOM elements before the document has fully loaded, which can lead to errors. To fix this, it's best to ensure all DOM manipulation is done within the window.onload event listener.

Another problem arises from the inconsistent usage of variable scopes. Variables are declared locally but later treated as global variables, causing confusion and potential bugs. It's recommended to define variables in the global scope for consistency.

Additionally, trying to track an image's position by modifying its x/y attributes directly may not yield the desired results. A better approach would be to create a JavaScript object with x/y properties to manage the position tracking.

In the render() function, there seems to be an incorrect method used to draw the image on the canvas. Consider clearing the canvas and redrawing the image using the correct drawImage() method for better rendering.

To implement these improvements, here's an updated version of your JavaScript:

// Global variables
var keys = [];
var canvas;
var ctx;
var img;

// Object to track image position on canvas
var imgPos = {
    x: 0,
    y: 0
}

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) imgPos.y--;
    if(keys[40]) imgPos.y++;
    if(keys[37]) imgPos.x--;
    if(keys[39]) imgPos.x++;
}
function render(){
    // Clear canvas and redraw image at new location
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,imgPos.x,imgPos.y);
}

window.onload = function() {
    // Initialize canvas
    canvas = document.getElementById("app");
    canvas.width  = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    canvas.style.width = canvas.width + "px";
    canvas.style.height = canvas.height + "px";

    // Draw image to canvas
    ctx=canvas.getContext("2d");
    img=document.getElementById("chio");
    ctx.drawImage(img,imgPos.x,imgPos.y);

    // Start game loop
    setInterval(function(){
        game();
    }, 1000/30);
};

You can see a working example here. I've added comments to explain the changes made for better understanding. Feel free to reach out if you have any questions or need further assistance.

Answer 4

One major issue with the provided code is that it attempts to access DOM elements before the document has fully loaded, which can lead to errors. To fix this, it's best to ensure all DOM manipulation is done within the window.onload event listener.

Another problem arises from the inconsistent usage of variable scopes. Variables are declared locally but later treated as global variables, causing confusion and potential bugs. It's recommended to define variables in the global scope for consistency.

Additionally, trying to track an image's position by modifying its x/y attributes directly may not yield the desired results. A better approach would be to create a JavaScript object with x/y properties to manage the position tracking.

In the render() function, there seems to be an incorrect method used to draw the image on the canvas. Consider clearing the canvas and redrawing the image using the correct drawImage() method for better rendering.

To implement these improvements, here's an updated version of your JavaScript:

// Global variables
var keys = [];
var canvas;
var ctx;
var img;

// Object to track image position on canvas
var imgPos = {
    x: 0,
    y: 0
}

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) imgPos.y--;
    if(keys[40]) imgPos.y++;
    if(keys[37]) imgPos.x--;
    if(keys[39]) imgPos.x++;
}
function render(){
    // Clear canvas and redraw image at new location
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,imgPos.x,imgPos.y);
}

window.onload = function() {
    // Initialize canvas
    canvas = document.getElementById("app");
    canvas.width  = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    canvas.style.width = canvas.width + "px";
    canvas.style.height = canvas.height + "px";

    // Draw image to canvas
    ctx=canvas.getContext("2d");
    img=document.getElementById("chio");
    ctx.drawImage(img,imgPos.x,imgPos.y);

    // Start game loop
    setInterval(function(){
        game();
    }, 1000/30);
};

You can see a working example here. I've added comments to explain the changes made for better understanding. Feel free to reach out if you have any questions or need further assistance.

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

Answer №1

Answer №2

Similar questions

Error message: "Azure deployment encounters Vue CSS dependency missing issue"

Link the ngModel input to an object within an ngFor iteration

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Is your jQuery TextEditor not functioning properly?

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

Detecting button clicks in different views using Backbone.js

Visual Composer in WordPress is not displaying as expected

Utilizing JSON data from Jade in local JavaScript: A comprehensive guide

Methods to prevent ExtentReports from transforming HTML references in your Selenium logs into real HTML code

Tips for Minimizing DIV Space with the Flex Property

Javascript code to verify whether the page is currently positioned at the top

The issue I'm facing is that the "background-image" is not resizing automatically when changing orientation in CSS on

Registering a function for chart.js plugins that manipulates external data

Loading/Adding JS script in an asynchronous manner

Distributing JWT to the recipient using Express

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

Converting EDN data to a string and back in Clojure/ClojureScript

How can I redirect to another page when an item is clicked in AngularJS?

Creating custom shaders in three.js that can receive shadows involves a few key steps. Let

"Clicking on the 'View More' button within a foreach loop is only functional for the