Difficulty in detecting the collision between the character and the border in the game

My collision detection works perfectly except for when the character collides with the border. I want the character to respawn, so I implemented this code:

 left = 10;
 var reLeft = {'left':left + "px"};
 $('#char').css(reLeft);
 top = 10;
 var reTop = {'top':top + "px"};
 $('#char').css(reTop);

Unfortunately, it doesn't seem to be doing anything when the character collides with the border.

Answer №1

To ensure the player stays within the game boundaries, be sure to include a check for when they are off screen in your checkCollision function.

You can achieve this by adding the following code snippet at the end of the function:

if($('#char').offset().top < 0 || $('#char').offset().top > window.innerHeight || $('#char').offset().left < 0 || $('#char').offset().left > window.innerWidth ){
    console.log('Off Screen');
}

Consider converting this functionality into a separate function that can detect if any element is off screen.

Please note that the provided example does not factor in offsets and aims to keep it simple for implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to import information from a CSV or Excel file directly into my program?

I am currently using puppeteer for automating a form submission process. I am looking to extract data directly from a csv file and input it into the form. Can someone guide me on how to achieve this? The CSV file contains the following information: Fir ...

Ways to implement ontouchstart in place of onclick

I've been experiencing an issue with my code where the click function works on desktop but not on mobile. I tried using ontouchstart, but that did not resolve the problem either. What could be causing this issue? var video = document.getElementById(&q ...

"Let's delve into the world of dynamic variables and Javascript once

As a newcomer to JS, I've scoured countless posts for solutions, but nothing seems to work for me. The issue arises when trying to abstract the code to handle all variables rather than just explicitly expressed values. I am open to alternative method ...

The distinction between using document.getElementById and document.getElementsByClassName in JavaScript

One thing that stands out is why does document.getElementsById function as expected here <div id="move">add padding</div> <button type="button" onclick="movefun()">pad</button> <script> function movefun() { document.get ...

Having trouble fetching data values from an Ajax GET request in a Django view

Is there a way to query the employee list based on parameters sent through an ajax call within the data property? I want to use a GET request only, but it is returning an error. AJAX Function in JavaScript $(document).ready(function () { $(".ca ...

What is the best way to ensure that a form filled out in Backbone is validated?

Recently, I created a new form that saves temporarily, but I am facing an issue where I want it to only update when validated, otherwise display errors. This problem arises during the view section for the saveEdits event. Any suggestions on what might be g ...

The Dependability of LocalStorage in Phonegap

I am currently developing a PhoneGap application that requires storing user data. The app will prompt the user to input a URL during the initial startup. Since URLs can be lengthy, I want to save it on the user's device to avoid the need for them to r ...

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

How to open a print preview in a new tab using Angular 4

Currently, I am attempting to implement print functionality in Angular 4. My goal is to have the print preview automatically open in a new tab along with the print popup window. I'm struggling to find a way to pass data from the parent window to the c ...

Unique style pattern for parent links with both nested and non-nested elements

I am in the process of designing a website and I have a specific vision for how I want my links to appear, but I am unsure of how to achieve it. Here is the desired outcome: a red link a green link a red link a green link … Below is the HTM ...

Appending an empty <li> tag has no effect

I'm facing an issue with this loop where it always generates empty <li></li> tags. Can anyone help me understand why this is happening and suggest a solution? For reference, the loop runs 2 times (verified). function a(){ for (var i ...

How to format time in Node.js using PostgreSQL

I have set up two tables in my Postgres database, one called users and the other called card_info. I have implemented an endpoint for new user registration, and I have included a field named dateCreated in the code snippet below. Register.js const handle ...

Building a React Typescript service with axios functionality

When creating a service and calling it from the required functional component, there are two different approaches you can take. 1. export const userProfileService = { ResetPassword: async (userId: string) => { var response = await http.get ...

Creating a seamless integration of images and backgrounds using CSS

Can you help me find a way to blend the image with the background to eliminate the visible separation between them? Here is the link to the image: https://i.stack.imgur.com/VB9in.jpg ...

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

Can we modify a currently active document within MongoDB?

Is there a more efficient way to achieve the same functionality in JavaScript? I have to find a user, validate their password, and then update their document. Can I optimize this process by reusing the already retrieved document (stored in var doc) for up ...

Invoking a .js file within an UpdatePanel from the CodeBehind

I have been dedicating my time to self-teach ASP.NET and JavaScript for a project, and I've hit a roadblock that has consumed dozens of hours. After discovering a fantastic drag-and-drop JavaScript list online, I copied the provided source code and o ...

Issues encountered while utilizing Bliss as the template engine in NodeJS/Express

Seeking assistance in transitioning from Jade to Bliss as the template engine for a basic Express web application on NodeJS. Here is the code snippet from app.js: var express = require('express'), routes = require('./routes'), ...

Invoke the jQuery document.ready function within a separate jQuery or JavaScript function

Encountering a difficult issue: Attempting to invoke the document.ready() function inside another JavaScript function, but upon doing so, an error message stating "function is not defined" appears. Below is the provided code: This first function serves as ...

When TableRow's onSelectChange is activated, it correctly selects the entire Table Group instead of an

In my React TypeScript application, I am working with an Array of Objects to populate a table. Each table row is grouped by category, and within each row, there is a select box that triggers an event to select all items with the same category: https://i.s ...