Home > Enterprise >  How can I detect if a DIV was touched?
How can I detect if a DIV was touched?

Time：12-31

Say a user has a HTML file, and they are using a touchscreen device, say a phone.

I have this set of code right here:

W.onmousedown = function () {
  gameOver();
}

Basically what it does is detect if the div named W was clicked and if so, end the game.

I want to do this same thing but instead, it's detecting if the user touched the DIV on their screen. How can I do this?

Edit:

Using click for me doesn't work, it doesn't end the game. This is my code:

var gameIsPlaying = true;

function game() {
  gameIsPlaying = true;
  const RandomLetterGUI = document.getElementById("RandomLetters")
  const TimerGUI = document.getElementById("Timer")
  const LivesGUI = document.getElementById("Lives")
  const ScoreGUI = document.getElementById("Score")
  const W = document.getElementById("W")
  const A = document.getElementById("A")
  const S = document.getElementById("S")
  const D = document.getElementById("D")
  W.style.backgroundColor = "white";
  W.innerHTML = 'W'
  A.style.backgroundColor = "white";
  A.innerHTML = 'A'
  S.style.backgroundColor = "white";
  S.innerHTML = 'S'
  D.style.backgroundColor = "white";
  D.innerHTML = 'D'
  const letters = [
    "W",
    "A",
    "S",
    "D"
  ]
  var seconds = 60;
  var lives = 3;
  var score = 0;
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      gameOver()
    } else {
      if (seconds > 9) {
        TimerGUI.innerHTML = ':'   seconds;
      } else {
        TimerGUI.innerHTML = ':0'   seconds;
      }
      seconds--;
    }
  }
  countdown()
  const updateLives = setInterval(displayLives, 0)
  const ScoreUpdate = setInterval(updateScore, 0)

  function gameOver() {
    gameIsPlaying = false
    clearTimeout(timerId)
    clearTimeout(updateLives)
    clearTimeout(ScoreUpdate)
    W.style.backgroundColor = "red";
    W.innerHTML = ''
    A.style.backgroundColor = "red";
    A.innerHTML = ''
    S.style.backgroundColor = "red";
    S.innerHTML = ''
    D.style.backgroundColor = "red";
    D.innerHTML = ''
    RandomLetterGUI.innerHTML = ''
    TimerGUI.innerHTML = ''
    LivesGUI.innerHTML = ''
    ScoreGUI.innerHTML = ''
  }

  function updateScore() {
    ScoreGUI.innerHTML = "Score: "   score
  }

  function displayLives() {
    LivesGUI.innerHTML = "Remaining Lives: "   lives
    if (lives == 0) {
      gameOver()
    }
  }

  function letter() {
    var item = letters[Math.floor(Math.random() * letters.length)];
    RandomLetterGUI.innerHTML = "Next Letter: "   item
    var pickedLetterTime = Math.floor(Date.now() / 1000)
    document.onkeypress = function(e) {
      if (gameIsPlaying) {
        var key = e.key
        if (key.toUpperCase() != item) {
          lives -= 1;
          if (score >= 0) {
            score -= 50;
          }
        } else {
          var pressedKeyTime = Math.floor(Date.now() / 1000)
          var seconds = pressedKeyTime - pickedLetterTime
          if (seconds > 0 && seconds < 1.5) {
            score  = 500
          }
          if (seconds >= 1.5 && seconds < 3) {
            score  = 350
          }
          if (seconds >= 3 && seconds < 5) {
            score  = 150
          }
        }
      }
    };
    document.onkeydown = function(e) {
      var key = e.key
      if (key == "w") {
        W.style.backgroundColor = "lime";
        W.innerHTML = ''
      }
      if (key == "a") {
        A.style.backgroundColor = "lime";
        A.innerHTML = ''
      }
      if (key == "s") {
        S.style.backgroundColor = "lime";
        S.innerHTML = ''
      }
      if (key == "d") {
        D.style.backgroundColor = "lime";
        D.innerHTML = ''
      }
    }
    document.onkeyup = function(e) {
      if (e.key == "w") {
        W.style.backgroundColor = "white";
        W.innerHTML = 'W'
      }
      if (e.key == "a") {
        A.style.backgroundColor = "white";
        A.innerHTML = 'A'
      }
      if (e.key == "s") {
        S.style.backgroundColor = "white";
        S.innerHTML = 'S'
      }
      if (e.key == "d") {
        D.style.backgroundColor = "white";
        D.innerHTML = 'D'
      }
    }
    // touchscreen compatibility
    W.onclick = function() {
      gameOver();
    }
  }
  letter()
}
game()

function resetGame() {
  if (gameIsPlaying == false) {
    document.onkeypress = function(e) {
      var key = e.key
      if (key == "Enter") {
        game()
      }
    }
  }
}
setInterval(resetGame, 0)
body {
  background-color: black;
}

p {
  font-family: Verdana;
  color: white;
  font-size: 20px;
}

.RandomLetters {
  float: left;
}

.Timer {
  float: right;
}

.Lives {
  position: absolute;
  left: auto;
}

.Score {
  position: absolute;
  right: 0;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 100px;
  left: 0;
  right: 0;
  margin: auto;
}

.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.W,
.A,
.S,
.D {
  height: 50px;
  width: 50px;
  font-family: Verdana;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Play WASD online</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <noscript>turn on javascript to play this game or noob :P</noscript>
  <p id="RandomLetters" >
  </p>
  <p id="Timer" >
  </p>
  <br>
  <p id="Lives" >
  </p>
  <p id="Score" >
  </p>
  <div >
    <div id="W" >
    </div>
  </div>
  <div >
    <div id="A" >
    </div>
    <div id="S" >
    </div>
    <div id="D" >
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

It doesn't work, because you obscured your W container with another one and it's not clickable

I changed the order of containers so the W one is now at the front layer and it works

var gameIsPlaying = true;

function game() {
  gameIsPlaying = true;
  const RandomLetterGUI = document.getElementById("RandomLetters")
  const TimerGUI = document.getElementById("Timer")
  const LivesGUI = document.getElementById("Lives")
  const ScoreGUI = document.getElementById("Score")
  const W = document.getElementById("W")
  const A = document.getElementById("A")
  const S = document.getElementById("S")
  const D = document.getElementById("D")
  W.style.backgroundColor = "white";
  W.innerHTML = 'W'
  A.style.backgroundColor = "white";
  A.innerHTML = 'A'
  S.style.backgroundColor = "white";
  S.innerHTML = 'S'
  D.style.backgroundColor = "white";
  D.innerHTML = 'D'
  const letters = [
    "W",
    "A",
    "S",
    "D"
  ]
  var seconds = 60;
  var lives = 3;
  var score = 0;
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      gameOver()
    } else {
      if (seconds > 9) {
        TimerGUI.innerHTML = ':'   seconds;
      } else {
        TimerGUI.innerHTML = ':0'   seconds;
      }
      seconds--;
    }
  }
  countdown()
  const updateLives = setInterval(displayLives, 0)
  const ScoreUpdate = setInterval(updateScore, 0)

  function gameOver() {
    gameIsPlaying = false
    clearTimeout(timerId)
    clearTimeout(updateLives)
    clearTimeout(ScoreUpdate)
    W.style.backgroundColor = "red";
    W.innerHTML = ''
    A.style.backgroundColor = "red";
    A.innerHTML = ''
    S.style.backgroundColor = "red";
    S.innerHTML = ''
    D.style.backgroundColor = "red";
    D.innerHTML = ''
    RandomLetterGUI.innerHTML = ''
    TimerGUI.innerHTML = ''
    LivesGUI.innerHTML = ''
    ScoreGUI.innerHTML = ''
  }

  function updateScore() {
    ScoreGUI.innerHTML = "Score: "   score
  }

  function displayLives() {
    LivesGUI.innerHTML = "Remaining Lives: "   lives
    if (lives == 0) {
      gameOver()
    }
  }

  function letter() {
    var item = letters[Math.floor(Math.random() * letters.length)];
    RandomLetterGUI.innerHTML = "Next Letter: "   item
    var pickedLetterTime = Math.floor(Date.now() / 1000)
    document.onkeypress = function(e) {
      if (gameIsPlaying) {
        var key = e.key
        if (key.toUpperCase() != item) {
          lives -= 1;
          if (score >= 0) {
            score -= 50;
          }
        } else {
          var pressedKeyTime = Math.floor(Date.now() / 1000)
          var seconds = pressedKeyTime - pickedLetterTime
          if (seconds > 0 && seconds < 1.5) {
            score  = 500
          }
          if (seconds >= 1.5 && seconds < 3) {
            score  = 350
          }
          if (seconds >= 3 && seconds < 5) {
            score  = 150
          }
        }
      }
    };
    document.onkeydown = function(e) {
      var key = e.key
      if (key == "w") {
        W.style.backgroundColor = "lime";
        W.innerHTML = ''
      }
      if (key == "a") {
        A.style.backgroundColor = "lime";
        A.innerHTML = ''
      }
      if (key == "s") {
        S.style.backgroundColor = "lime";
        S.innerHTML = ''
      }
      if (key == "d") {
        D.style.backgroundColor = "lime";
        D.innerHTML = ''
      }
    }
    document.onkeyup = function(e) {
      if (e.key == "w") {
        W.style.backgroundColor = "white";
        W.innerHTML = 'W'
      }
      if (e.key == "a") {
        A.style.backgroundColor = "white";
        A.innerHTML = 'A'
      }
      if (e.key == "s") {
        S.style.backgroundColor = "white";
        S.innerHTML = 'S'
      }
      if (e.key == "d") {
        D.style.backgroundColor = "white";
        D.innerHTML = 'D'
      }
    }
    // touchscreen compatibility
    W.onclick = function() {
      gameOver();
    }
  }
  letter()
}
game()

function resetGame() {
  if (gameIsPlaying == false) {
    document.onkeypress = function(e) {
      var key = e.key
      if (key == "Enter") {
        game()
      }
    }
  }
}
setInterval(resetGame, 0)
body {
  background-color: black;
}

p {
  font-family: Verdana;
  color: white;
  font-size: 20px;
}

.RandomLetters {
  float: left;
}

.Timer {
  float: right;
}

.Lives {
  position: absolute;
  left: auto;
}

.Score {
  position: absolute;
  right: 0;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 100px;
  left: 0;
  right: 0;
  margin: auto;
}

.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.W,
.A,
.S,
.D {
  height: 50px;
  width: 50px;
  font-family: Verdana;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Play WASD online</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <noscript>turn on javascript to play this game or noob :P</noscript>
  <p id="RandomLetters" >
  </p>
  <p id="Timer" >
  </p>
  <br>
  <p id="Lives" >
  </p>
  <p id="Score" >
  </p>
  <div >
    <div id="A" >
    </div>
    <div id="S" >
    </div>
    <div id="D" >
    </div>
  </div>
  <div >
    <div id="W" >
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

you can use click or Pointer Events

CodePudding user response：

var element= document.getElementById("IDName");
element.onclick = function () {
   gameOver();
}

CodePudding user response：

You can use the touchstart event for this, see this mdn article

W.ontouchstart = function () {
  gameOver();
}

Page link：https//www.codepudding.com/Enterprise/658440.html

Prev:Comparing different approaches of setting initial state
Next:Trying to create a button that handles an upload and a web share api function at the same time
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding