steps for repairing a scoreboard

Is there a way to make my scoreboard increase by +1 point instead of +10?

In my JavaScript code, I used intervals as it was the only solution that worked:

let scoreInterval = setInterval(updateScore);
let score = 0;

function updateScore() {
  var points = document.getElementById('score');
  points.innerHTML = "Score: " + score++;
  clearInterval(scoreInterval);
}

const gameLoop = setInterval(() => {

  const pipePosition = pipe.offsetLeft;
  const marioPosition = +window
    .getComputedStyle(mario)
    .bottom.replace("px", "")

  if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
    pipe.style.animation = "none";
    pipe.style.left = `${pipePosition}px`;

    mario.style.animation = "none";
    mario.style.bottom = `${marioPosition}px`;

    mario.src = "./images/mario-game-over.png";
    mario.style.width = "75px";
    mario.style.marginLeft = "45px";

    clearInterval(gameLoop);

  } else if (pipePosition <= 0 && marioPosition >= 0) {

    updateScore();

  };

}, 10);
<div class="game">
  <div id="score"></div>
</div>

Check out the webpage here:

Answer №1

You seem to have an excessive number of functions. Consider simplifying your code structure.

const pontos = document.getElementById('score');
let pontuacao = 0;

function updated() {
  pontos.innerHTML = "score: " + pontuacao++;
}

const loopGame = setInterval(() => {
  // if (pipePosition <= 0 && marioPosition >= 0) { 
  //   tocaMarioCoin();

      updated(); // call only when Mario does something that earns a point

  // }
  // else { clearInterval(loopGame);   pontos.innerHTML = "Game over"; }

}, 100);
<div class="game">
  <div id="score"></div>
</div>

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

Remove all Visual Composer Shortcodes while preserving the content

I'm in the process of transferring 200 posts from a previous WordPress website, which contain numerous visual composer shortcodes within the content. Is there a method to remove all the shortcodes and retain the content? ...

Validating phone numbers using AngularJS

Seeking validation for phone numbers based on specific conditions: - If all 10 digits are identical, show an error message. - If it begins with the number 1, display an error message. Have you encountered a similar scenario? Please share your sug ...

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

Difficulty in constructing an array from several Firebase Storage URLs

I'm attempting to retrieve multiple image URLs and store them in an array using Firebase Storage. However, I am facing issues accessing specific index positions within the testArray: var testArray = [] listAll(ref).then((res) => { res.item ...

Access the document on the desktop and open it in a new popup window

As a novice in html coding, I'm wondering if it's possible to write window size and other properties directly into the page. Let me explain. I'm currently working on a calculator and I want to run the HTML file on my desktop. Everything wor ...

Steps for submitting a form once all inputs have been verified

$('#f_name, #l_name').change(function(){ if($(this).val().length < 2) { $(this).css('border', '1px solid red'); alert('names must be at least 2 symbols'); check ...

Having trouble getting Typescript code to function properly when using commonjs style require statements

I am completely new to Typescript, Node.js, and Express. Following the instructions outlined in this tutorial (https://www.digitalocean.com/community/tutorials/setting-up-a-node-project-with-typescript), I set up my project exactly as described there. The ...

How to Modify a File Inside a Compressed File Using JSZip

Is it possible to modify a file within a zipped file using JSZip? I have searched for answers and reviewed the API, but I am unable to find a solution. Any assistance on this matter would be highly appreciated. Thank you in advance! ...

What is the most effective way to import and load three-orbitcontrols?

Has anyone tried implementing the OrbitControls function in conjunction with ReactJS? I have included a snippet of the code below: import React, { Component } from 'react'; import 'tachyons'; import * as THREE from 'react'; im ...

Ways to dynamically manipulate HTML elements in Angular 5

Recently, I've been attempting to programmatically transform an HTML element. Strangely, when I update the transform value in the console tab, it changes successfully, but for some reason it doesn't reflect in the element tab of the browser. onD ...

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

Is it possible to implement scrollspy functionality without utilizing the nav or list-group elements? According to Bootstrap's documentation on scrollspy, it is typically restricted to use within nav or list group components. DOCUMENTATION How Scroll ...

PHP code that removes a table row from a database

Can anyone help me troubleshoot my code? My PHP seems to be functioning, but for some reason the delete button is not working! if(isset($_POST['delete'])) { $ID = $_POST['value']; $delete = "DELETE FROM tbl_document WHERE ID = ...

Tips for obtaining response headers

Currently, I am utilizing Angular version 15.0 and retrieving a list of items from the backend (ASP.NET Core 5) with an additional item attached to the header. The GET method in the client-side service is as follows: /** GET Paged commodities from the s ...

What is the process for running a continuous stream listener in a node.js function?

I am currently working with a file called stream.ts: require('envkey') import Twitter from 'twitter-lite'; const mainFn = async () => { const client = new Twitter({ consumer_key: process.env['TWITTER_CONSUMER_KEY'], ...

Tips for implementing a ternary operator within a component using the v-for directive

Here is the updated code with a conditional check for item.image: <template lang="pug"> b-carousel.d-none.d-sm-block( id='categoryRoulette' controls no-animation :interval='0' ) b-carousel-slide( v-for=&quo ...

Unable to activate the date range picker

I am having trouble with integrating the daterange picker on my webpage. I can't seem to get it to work properly. Can anyone help me figure out what I might be doing wrong or if there's something missing? CSHTML: <div class="has-feedback" &g ...

I am trying to replace the buttons with a dropdown menu for changing graphs, but unfortunately my function does not seem to work with the <select> element. It works perfectly fine with buttons though

I am currently working on my html and ts code, aiming to implement a dropdown feature for switching between different graphs via the chartType function. The issue I am facing is that an error keeps popping up stating that chartType is not recognized as a ...

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...

Evolution of ReactJS state over time

When working with React, I wanted to increment a state variable called progressValue by 0.1 every 500 ms until it reaches 100. Here's what I initially tried: const [progressValue, setProgressValue] = React.useState<number>(0) const tick ...

Get multiple increment buttons functioning

I've managed to create an increment counter that updates the value in a .txt file on my server every time I click a button by +1. It's working flawlessly and here's how it looks like: <!DOCTYPE html> <html> <head> <meta ...