What methods can I use to prevent an image from moving and trigger a specific action with the press of a key?

Question

What methods can I use to prevent an image from moving and trigger a specific action with the press of a key?

I'm currently teaching myself web programming and also working on improving my C++ skills. However, I am facing a challenge with Javascript.

My main question is regarding how to create an "if statement" based on the location of an image.

I am in the process of developing a simple game where a cannon moves back and forth. The goal is for the user to press a button that stops the cannon and fires another image towards a target.

So far, I have created the images as well as a gif depicting the image moving from the cannon towards the target in an arc.

If the user manages to fire at the right moment when the cannon is in position, the image will hit the target successfully.

Could anyone provide guidance on creating an if statement based on the position? Alternatively, can someone explain how to stop the cannon and display the gif once fired?

javascript

Answer 1

Answer №1

If you want to adjust the position of your cannon, consider looking into the onkeyup() event - it responds when a key is released and triggers an action.

Most likely, it will alter the left positioning of the cannon in some way. It's recommended to set the CSS style position:absolute on your cannon and then modify the .left property using Javascript.

Below is an example of Javascript code to kickstart your project (untested):

var cannon = document.getElementById("cannonPic");
var leftlim = 200;

document.body.onkeyup = function() {
    // Remove 'px' from the left position style
    leftPosition = cannon.style.left.substring(0, cannon.style.left - 2);

    // Halt the cannon?
    if (leftPosition >= leftLim) {
        return;
    }

    // Shift the cannon to a new position
    cannon.style.left = cannon.style.left.substr(0, cannon + 10);
}

Accompanying HTML could be:

...
<img id='cannonImg' src='cannon.jpg' />
...
<script type='text/javascript' src='cannon.js' />

To address the "appear/reappear" subsection, utilize the .display attribute through Javascript:

var cannon = document.getElementById("cannonPic");

function show() {
    cannon.style.display = '';
}

function conceal() {
    cannon.style.display = 'none';
}

Just a heads-up, calculating arcs for objects may necessitate mathematical translations into two dimensions, depending on your level of precision. A delightful challenge if you're fond of math :)

Answer 2

If you want to adjust the position of your cannon, consider looking into the onkeyup() event - it responds when a key is released and triggers an action.

Most likely, it will alter the left positioning of the cannon in some way. It's recommended to set the CSS style position:absolute on your cannon and then modify the .left property using Javascript.

Below is an example of Javascript code to kickstart your project (untested):

var cannon = document.getElementById("cannonPic");
var leftlim = 200;

document.body.onkeyup = function() {
    // Remove 'px' from the left position style
    leftPosition = cannon.style.left.substring(0, cannon.style.left - 2);

    // Halt the cannon?
    if (leftPosition >= leftLim) {
        return;
    }

    // Shift the cannon to a new position
    cannon.style.left = cannon.style.left.substr(0, cannon + 10);
}

Accompanying HTML could be:

...
<img id='cannonImg' src='cannon.jpg' />
...
<script type='text/javascript' src='cannon.js' />

To address the "appear/reappear" subsection, utilize the .display attribute through Javascript:

var cannon = document.getElementById("cannonPic");

function show() {
    cannon.style.display = '';
}

function conceal() {
    cannon.style.display = 'none';
}

Just a heads-up, calculating arcs for objects may necessitate mathematical translations into two dimensions, depending on your level of precision. A delightful challenge if you're fond of math :)

Answer 3

Answer №2

If you want to fetch the initial position of the first image on your webpage in terms of x and y coordinates, you can use this code snippet:

let firstImg = document.getElementsByTagName('img')[0];
let xPos = firstImg.x;
let yPos = firstImg.y;

Answer 4

If you want to fetch the initial position of the first image on your webpage in terms of x and y coordinates, you can use this code snippet:

let firstImg = document.getElementsByTagName('img')[0];
let xPos = firstImg.x;
let yPos = firstImg.y;

Answer 5

Answer №3

Adding some context, the typical way this is accomplished:

You will have a main loop that controls the game's progression.
During each iteration of the loop, you update the positions of in-game elements (such as cannon, projectiles, and targets) and display the updated elements on the screen.
When a "fire" keypress is detected, you stop the movement of the cannon by setting its speed to 0.

You can access the object's position using various methods, but ultimately it is your game logic that dictates and tracks the positions of all objects constantly. Your game logic decides when to "draw the projectile at position (x,y)". It's important for your game logic to know the positions of objects rather than relying on queries to determine their locations through Javascript, especially in cases of straightforward and predictable movements.

Answer 6

Adding some context, the typical way this is accomplished:

You will have a main loop that controls the game's progression.
During each iteration of the loop, you update the positions of in-game elements (such as cannon, projectiles, and targets) and display the updated elements on the screen.
When a "fire" keypress is detected, you stop the movement of the cannon by setting its speed to 0.

You can access the object's position using various methods, but ultimately it is your game logic that dictates and tracks the positions of all objects constantly. Your game logic decides when to "draw the projectile at position (x,y)". It's important for your game logic to know the positions of objects rather than relying on queries to determine their locations through Javascript, especially in cases of straightforward and predictable movements.

What methods can I use to prevent an image from moving and trigger a specific action with the press of a key?

Answer №1

Answer №2

Answer №3

Similar questions

The functionality of jQuery touch events on iOS devices is not functioning properly

Error: Unable to access _rawValidators property of null object

Check the feature that retrieves data from a `json` file

Using jQuery to select the next table cell vertically

Troubleshooting Angular JS Module Injection Issues

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Vue 3 - Using Emit Functionality in a Reusable and Composable File

Is there a way to update the Angular component tag after it has been rendered?

Invoke function within bxslider callback

How can JavaScript routes be used to apply specific code to multiple pages on a website?

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

Is it possible to incorporate Nth child into JavaScript?

Transition within Vuejs moves forwards and backwards, with a unique feature that allows it to skip directly to

Encountering an unanticipated DOMException after transitioning to Angular 13

The addition and deletion of classes can sometimes lead to disruptions in the DOM

Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Why are the radio buttons not aligned with the text in the center?

Capture all Fetch Api AJAX requests

Using JavaScript and jQuery to calculate the time difference between two values

Avoiding memory leaks in Node.js with Express framework