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" class="RandomLetters">
</p>
<p id="Timer" class="Timer">
</p>
<br>
<p id="Lives" class="Lives">
</p>
<p id="Score" class="Score">
</p>
<div class="center">
<div id="W" class="W">
</div>
</div>
<div class="center2">
<div id="A" class="A">
</div>
<div id="S" class="S">
</div>
<div id="D" class="D">
</div>
</div>
<script src="script.js"></script>
</body>
</html>>Solution :
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" class="RandomLetters">
</p>
<p id="Timer" class="Timer">
</p>
<br>
<p id="Lives" class="Lives">
</p>
<p id="Score" class="Score">
</p>
<div class="center2">
<div id="A" class="A">
</div>
<div id="S" class="S">
</div>
<div id="D" class="D">
</div>
</div>
<div class="center">
<div id="W" class="W">
</div>
</div>
<script src="script.js"></script>
</body>
</html>