We Keep Coding

How can I detect if a DIV was touched?

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>

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>

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

you can use click or Pointer Events

You can use the touchstart event for this, see this mdn article
W.ontouchstart = function () {
gameOver();
}

console throws an error that a variable is undefined just after console.log prints the contents of that variable

I tried to create a tic-tac-toe game using minimax algorithm. But before I could write the whole algorithm, I encountered an absurd type of error. This code is for reference in case if you have to look into the full code.
//Using minimax to the same code of tictactoe2.js
$ = document.querySelectorAll(".box");
// adding click event to all boxes
$.forEach((element)=>{
element.addEventListener("click", mainFunction);
})
document.querySelector(".reset-button-container").addEventListener("click", reset);
function mainFunction(e){
if (checkForGameOver() === false){ //once game is over, so should be all clicks
if (e.target.innerText !== ""){
alert("Click Another Square!!!");
}
else{
e.target.innerText = "X";
if (checkForGameOver() === false){ //computer gets its turn only if the game isn't over after players turn
setTimeout(computerTurn, 500);
setTimeout(checkForGameOver, 501); //501 is provided to run checkForGameOver only after computerTurn
}
}
}
}
//a function that randomly plays computers turn
function computerTurn(){
let board = [], bestScore = Infinity, bestMove = {}, k = 0;
//array of innerTexts of each box is the board in one dimension
$.forEach((element, index) => {
board[index] = element.innerText;
});
let board2D = convertToTwoDimension(board, 3, 3); //convert 1d board to 2d of 3 rows and 3 columns
for(i = 0; i < 3; i++){
for(j = 0; j < 3; j++){
if (board2D[i][j] === ""){
board2D[i][j] = "O";
let score = minimax(board2D, false);
board2D[i][j] = "";
if(score < bestScore){
bestScore = score;
bestMove = {i, j};
}
}
}
}
board2D[bestMove.i][bestMove.j] = "O"; //assigning bestMove to baord2D
//to dispaly the played bestMove by the computer on screen
for(i = 0; i < 3; i++){
for(j = 0; j < 3; j++){
$[k].innerText = board2D[i][j];
k += 1;
}
}
}
//minimax implementation
function minimax(position, maximizing){
console.log(position);
//if the game is over at that position, return the score based on who is wining
if (checkForGameOver() === true){
if(document.querySelector(".win-message").innerText[0] === "X"){
return 1; //X (maximizing player) wins
}
else if(document.querySelector(".win-message").innerText[0] === "O"){
return -1; //O (minimizing player) wins
}
else{
return 0; // the game is a draw
}
}
}
//function to check if game is over. But I think it can be written more easily.
function checkForGameOver(){
var tempText = [];
for(i = 1; i <= 9; i++){
tempText[i] = $[i-1].innerText;
}
if (tempText[1] === tempText[2] && tempText[2] === tempText[3] && tempText[1] !== ""){
document.querySelector(".win-message").innerText = tempText[1] + " Wins!!";
return true;
}
else if (tempText[4] === tempText[5] && tempText[5] === tempText[6] && tempText[4] !== ""){
document.querySelector(".win-message").innerText = tempText[4] + " Wins!!";
return true;
}
else if (tempText[7] === tempText[8] && tempText[8] === tempText[9] && tempText[7] !== ""){
document.querySelector(".win-message").innerText = tempText[7] + " Wins!!";
return true;
}
else if (tempText[1] === tempText[4] && tempText[4] === tempText[7] && tempText[1] !== ""){
document.querySelector(".win-message").innerText = tempText[1] + " Wins!!";
return true;
}
else if (tempText[2] === tempText[5] && tempText[5] === tempText[8] && tempText[2] !== ""){
document.querySelector(".win-message").innerText = tempText[2] + " Wins!!";
return true;
}
else if (tempText[3] === tempText[6] && tempText[6] === tempText[9] && tempText[3] !== ""){
document.querySelector(".win-message").innerText = tempText[3] + " Wins!!";
return true;
}
else if (tempText[1] === tempText[5] && tempText[5] === tempText[9] && tempText[1] !== ""){
document.querySelector(".win-message").innerText = tempText[1] + " Wins!!";
return true;
}
else if (tempText[3] === tempText[5] && tempText[5] === tempText[7] && tempText[3] !== ""){
document.querySelector(".win-message").innerText = tempText[3] + " Wins!!";
return true;
}
//if none of above, which is for win only, is true, check for draw which can be done by filtering the remaining blank squares. If no squares are lest, then game is a draw else the game isn't over yet.
else{
arrayOfBlankCharacters = tempText.filter(element => {
return (element === "");
});
if (arrayOfBlankCharacters.length === 0){
document.querySelector(".win-message").innerText = "Game Drawn!!";
return true;
}
else{
return false;
}
}
}
//a function that resets the board and win message.
function reset(){
for(i = 1; i <= 9; i++){
$[i-1].innerText = "";
}
document.querySelector(".win-message").innerText = "";
}
//function to convert 1d array to 2d array => useful for computerTurn() function to access board in 2d view
function convertToTwoDimension(initialArray, rows, columns){
var k = 0, finalArray = [];
for(i = 0; i < initialArray.length/columns; i++){
finalArray[i] = []; //state that each element of finalArray is also an array
for(j = 0; j < initialArray.length/rows; j++){
finalArray[i][j] = initialArray[k];
k += 1;
}
}
return finalArray;
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
:root{
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.description-header{
background-color: lightgrey;
line-height: 3rem;
padding-left: 2rem;
margin-bottom: 2rem;
}
.player-information{
text-align: center;
margin-bottom: 1rem;
}
.player-information > h3{
font-size: 2.5rem;
}
.player-information > h3 > span{
color:brown;
}
.game-box-container{
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}
.tictactoe-box{
height: 250px;
width: 250px;
display: grid;
grid-template: repeat(3, 1fr)/repeat(3, 1fr);
grid-gap: 0.5rem;
background-color: black;
}
.reset-button-container{
margin-top: 1rem;
background: lightgrey;
border-radius: 0.5rem;
}
.tictactoe-box > .box{
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
background-color: white;
cursor: context-menu
}
.reset-button-container > span{
display: block;
font-size: 2rem;
padding: 0.5rem 1.5rem;
}
.reset-button-container:hover{
background-color: grey;
cursor: context-menu;
}
.win-message{
margin-top: 1rem;
width: 25%;
font-size: 2.5rem;
background-color: lightgrey;
text-align: center;
border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TicTacToe</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
<link rel="icon" type="image/x-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Tic_tac_toe.svg/1024px-Tic_tac_toe.svg.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-sclae=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<header class="description-header">
<h3>My TicTacToe Game</h3>
</header>
<div class="player-information">
<h3>Player: "<span>X</span>"; Computer: "<span>O</span>"</h3>
<h3>Player First</h3>
</div>
<div class="game-box-container">
<div class="tictactoe-box">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</div>
<div class="reset-button-container">
<span>Reset</span>
</div>
<div class="win-message">
</div>
</div>
<script type="text/javascript" src="usingMinimax.js"></script>
</body>
</html>
My problem arises in the minimax(position, maximizing) function of the code as below. console.log(position) runs just fine, but because of the checkForGameOver() in the below function, it throws an error that board2D[i] is undefined which is unexpected because there is no any arguments passed in to the checkForGameOver() function. As soon as I remove the (checkForGameOver() === false) condition and run it, the computer makes a move for the first available spot which is as expected.
//minimax implementation
function minimax(position, maximizing){
console.log(position);
//if the game is over at that position, return the score based on who is wining
if (checkForGameOver() === true){
if(document.querySelector(".win-message").innerText[0] === "X"){
return 1; //X (maximizing player) wins
}
else if(document.querySelector(".win-message").innerText[0] === "O"){
return -1; //O (minimizing player) wins
}
else{
return 0; // the game is a draw
}
}
}
A function that doesn't take any variable as arguments just returns a boolean value, is somehow the cause of an error that the variable is undefined.

Tic Tac Toe minimax algorithm infinite loop

I have a tic tac toe game with minimax algorithm. It works by comparing combinations to a winning ones, adds scores and calls itself recursively, until the score is the highest and then makes it's move. In my snippet the program doesn't work due to a bug in it's function that gives me an infinite loop
const statusDiv = document.querySelector(".status");
const resetDiv = document.querySelector(".reset");
const cellDivs = document.querySelectorAll(".game-cell");
const activeCell = document.querySelector(".active");
document.addEventListener("keydown", (e) => move(e.keyCode));
let matrix = [
["1", "2", "3"],
["4", "5", "6"],
["7", "8", "9"],
];
let winCombos = [
["0", "1", "2"],
["3", "4", "5"],
["6", "7", "8"],
["0", "3", "6"],
["1", "4", "7"],
["2", "5", "8"],
["0", "4", "8"],
["6", "4", "2"],
];
let currentX = 0;
let currentY = 0;
let newElem = matrix[currentY][currentX];
let huPlayer = "x";
let aiPlayer = "o";
// game constants
const xSymbol = "✗";
const oSymbol = "○";
let gameIsRunning = true;
let xIsNext = true;
let winner = null;
// functions
const move = (keyCode) => {
if (gameIsRunning) {
let key = null;
switch (event.keyCode) {
case 38:
key = "up";
break;
case 40:
key = "down";
break;
case 37:
key = "left";
break;
case 39:
key = "right";
break;
case 13:
key = "return";
}
if (key === "up") {
currentY--;
if (currentY < 0) {
currentY = 0;
}
newElem = matrix[currentY][currentX];
} else if (key === "down") {
currentY++;
if (currentY > 2) {
currentY = 2;
}
newElem = matrix[currentY][currentX];
} else if (key === "right") {
currentX++;
if (currentX > 2) {
currentX = 2;
}
newElem = matrix[currentY][currentX];
} else if (key === "left") {
currentX--;
if (currentX < 0) {
currentX = 0;
}
newElem = matrix[currentY][currentX];
} else if (key === "return") {
handleCellClick(false, newElem);
}
cellDivs.forEach((div) => {
div.classList.replace("active", "inactive");
if (div.classList[1] === newElem) {
div.classList.replace("inactive", "active");
}
});
}
};
const letterToSymbol = (letter) => {
return letter === "x" ? xSymbol : oSymbol;
};
const handleWin = (letter) => {
gameIsRunning = false;
winner = letter;
if (winner === "x") {
statusDiv.innerHTML = `${letterToSymbol(winner)} has won!`;
} else {
statusDiv.innerHTML = `<span>${letterToSymbol(winner)} has won!</span>`;
}
};
const checkGameStatus = () => {
const topLeft = cellDivs[0].classList[3];
const topMiddle = cellDivs[1].classList[3];
const topRight = cellDivs[2].classList[3];
const middleLeft = cellDivs[3].classList[3];
const middleMiddle = cellDivs[4].classList[3];
const middleRight = cellDivs[5].classList[3];
const bottomLeft = cellDivs[6].classList[3];
const bottomMiddle = cellDivs[7].classList[3];
const bottomRight = cellDivs[8].classList[3];
// check a winner
if (topLeft && topLeft === topMiddle && topLeft === topRight) {
handleWin(topLeft);
cellDivs[0].classList.add("won");
cellDivs[1].classList.add("won");
cellDivs[2].classList.add("won");
} else if (
middleLeft &&
middleLeft === middleMiddle &&
middleLeft === middleRight
) {
handleWin(middleLeft);
cellDivs[3].classList.add("won");
cellDivs[4].classList.add("won");
cellDivs[5].classList.add("won");
} else if (
bottomLeft &&
bottomLeft === bottomMiddle &&
bottomLeft === bottomRight
) {
handleWin(bottomLeft);
cellDivs[6].classList.add("won");
cellDivs[7].classList.add("won");
cellDivs[8].classList.add("won");
} else if (topLeft && topLeft === middleLeft && topLeft === bottomLeft) {
handleWin(topLeft);
cellDivs[0].classList.add("won");
cellDivs[3].classList.add("won");
cellDivs[6].classList.add("won");
} else if (
topMiddle &&
topMiddle === middleMiddle &&
topMiddle === bottomMiddle
) {
handleWin(topMiddle);
cellDivs[1].classList.add("won");
cellDivs[4].classList.add("won");
cellDivs[7].classList.add("won");
} else if (topRight && topRight === middleRight && topRight === bottomRight) {
handleWin(topRight);
cellDivs[2].classList.add("won");
cellDivs[5].classList.add("won");
cellDivs[8].classList.add("won");
} else if (topLeft && topLeft === middleMiddle && topLeft === bottomRight) {
handleWin(topLeft);
cellDivs[0].classList.add("won");
cellDivs[4].classList.add("won");
cellDivs[8].classList.add("won");
} else if (topRight && topRight === middleMiddle && topRight === bottomLeft) {
handleWin(topRight);
cellDivs[2].classList.add("won");
cellDivs[4].classList.add("won");
cellDivs[6].classList.add("won");
} else if (
topLeft &&
topMiddle &&
topRight &&
middleLeft &&
middleMiddle &&
middleRight &&
bottomMiddle &&
bottomRight &&
bottomLeft
) {
gameIsRunning = false;
statusDiv.innerHTML = "Game is tied!";
} else {
xIsNext = !xIsNext;
if (xIsNext) {
statusDiv.innerHTML = `${letterToSymbol("x")} is next`;
} else {
statusDiv.innerHTML = `<span>${letterToSymbol(oSymbol)} is next</span>`;
}
}
};
// event Handlers
const handleReset = (e) => {
xIsNext = true;
statusDiv.innerHTML = `${letterToSymbol(xSymbol)} is next`;
winner = null;
gameIsRunning = true;
cellDivs.forEach((div) => {
div.classList.replace("active", "inactive");
});
for (const cellDiv of cellDivs) {
cellDiv.classList.remove("x");
cellDiv.classList.remove("o");
cellDiv.classList.remove("won");
}
cellDivs[0].classList.replace("inactive", "active");
};
// event listeners
resetDiv.addEventListener("click", handleReset);
const handleCellClick = (e, elem) => {
if (gameIsRunning) {
let classList;
if (e) {
classList = e.target.classList;
} else if (elem) {
cellDivs.forEach((div) => {
if (Array.from(div.classList).includes(elem)) {
classList = div.classList;
}
});
}
if (!gameIsRunning || classList[3] === "x" || classList[3] === "o") {
return;
}
if (xIsNext) {
classList.add("x");
checkGameStatus();
} else {
classList.add("o");
checkGameStatus();
}
if (e.target) {
cellDivs.forEach((div) => {
div.classList.replace("active", "inactive");
});
e.target.classList.replace("inactive", "active");
}
aiTurn();
}
};
const aiTurn = () => {
window.setTimeout(() => {
if (gameIsRunning) {
let availableSpots = emptySquares(cellDivs);
if (xIsNext) {
availableSpots[0].classList.add("x");
checkGameStatus();
} else {
availableSpots[bestSpot(availableSpots)].classList.add("o");
checkGameStatus();
}
}
}, 300);
};
const emptySquares = (elems) => {
return Array.from(elems).filter((div, index) => {
return !div.classList[3];
});
};
const bestSpot = (origBoard) => {
let isAi = xIsNext ? "x" : "o";
return minimax([...cellDivs], isAi);
};
const checkWin = (board, player) => {
const aiMoves = board.reduce(
(a, e, i) => (e.classList[3] === player ? a.concat(i) : a),
[]
);
console.log(aiMoves);
let gameWon = null;
for (let [index, win] of winCombos.entries()) {
if (win.every((elem) => aiMoves.indexOf(elem) > -1)) {
gameWon = { index: index, player: player };
break;
}
}
console.log(gameWon);
return gameWon;
};
function minimax(newBoard, player) {
var availSpots = emptySquares(newBoard, player);
if (checkWin([...newBoard], huPlayer)) {
return { score: -10 };
} else if (checkWin([...newBoard], aiPlayer)) {
return { score: 10 };
} else if (availSpots.length === 0) {
return { score: 0 };
}
var moves = [];
for (var i = 0; i < availSpots.length; i++) {
var move = {};
move.index = newBoard[availSpots[i]];
newBoard[availSpots[i]] = player;
if (player == aiPlayer) {
var result = minimax(newBoard, huPlayer);
move.score = result.score;
} else {
var result = minimax(newBoard, aiPlayer);
move.score = result.score;
}
newBoard[availSpots[i]] = move.index;
moves.push(move);
}
var bestMove;
if (player === aiPlayer) {
var bestScore = -10000;
for (var i = 0; i < moves.length; i++) {
if (moves[i].score > bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
} else {
var bestScore = 10000;
for (var i = 0; i < moves.length; i++) {
if (moves[i].score < bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
}
return moves[bestMove];
}
for (const cellDiv of cellDivs) {
cellDiv.addEventListener("click", handleCellClick);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.5s all;
}
body {
display: flex;
font-family: sans-serif;
justify-content: center;
align-items: flex-start;
color: #545454;
}
.container {
background: #39cccc;
padding: 50px;
border-radius: 25px;
}
.title {
text-align: center;
}
.title {
span {
color: #f2ebd3;
}
}
.status-action {
margin-top: 25px;
font-size: 25px;
display: flex;
justify-content: space-around;
height: 30px;
}
.reset {
cursor: pointer;
}
.reset:hover {
color: #f2ebd3;
}
.game-grid {
background: #0da192;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px;
margin-top: 30px;
}
.game-cell {
width: 150px;
height: 150px;
background: #39cccc;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s all;
border: 5px solid transparent;
&:hover {
cursor: pointer;
}
}
.x,
.o {
cursor: default;
}
.x::after {
content: "✗";
font-size: 100px;
}
.o::after {
content: "○";
color: #f2ebd3;
font-size: 130px;
font-weight: bold;
}
.status {
span {
color: #f2ebd3;
}
}
.won::after {
color: #bd022f;
}
#media only screen and (max-width: 1024px) {
.game-grid {
margin-top: 25px;
grid-gap: 16px;
gap: 10px;
}
.game-cell {
height: 100px;
width: 100px;
}
.x::after {
font-size: 85px;
}
.o::after {
font-size: 85px;
}
}
#media only screen and (max-width: 540px) {
.container {
margin: 25px;
padding: 25px;
}
.game-grid {
gap: 5px;
}
.game-cell {
height: 75px;
width: 75px;
}
.x::after {
font-size: 50px;
}
.o::after {
font-size: 50px;
}
}
.active {
border: 5px solid goldenrod;
}
<div class="container">
<h1 class="title">Tic <span>Tac</span> Toe</h1>
<div class="status-action">
<div class="status">✗ is next</div>
<div class="reset">Reset</div>
</div>
<div class="game-grid">
<div class="game-cell 1 active"></div>
<div class="game-cell 2 inactive"></div>
<div class="game-cell 3 inactive"></div>
<div class="game-cell 4 inactive"></div>
<div class="game-cell 5 inactive"></div>
<div class="game-cell 6 inactive"></div>
<div class="game-cell 7 inactive"></div>
<div class="game-cell 8 inactive"></div>
<div class="game-cell 9 inactive"></div>
</div>
</div>
. I cannot find the exact place where the stop is missing. Please look where I might have missed something.

When i m Send Ajax Request in my web Application then controller side it give me script in request parameter in laravel

When I'm sending this ajax request:
$.ajax({
url: "{{URL::to('admin/repcasetracker/getdiscount')}}",
data: {
serialnumber: serialnumberdata,
},
success: function (data) {
console.log(data);
}
});
Controller:
public function getdiscount(Request $request) {
print_r("hi");
dd($request->all());
}
Then it give me in controller side this type of response:
Sfdump = window.Sfdump || (function (doc) { var refStyle =
doc.createElement('style'), rxEsc = /([.+?^${}()|[]/\])/g, idRx =
/\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <=
navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
addEventListener = function (e, n, cb) { e.addEventListener(n, cb,
false); }; (doc.documentElement.firstElementChild ||
doc.documentElement.children[0]).appendChild(refStyle); if
(!doc.addEventListener) { addEventListener = function (element,
eventName, callback) { element.attachEvent('on' + eventName, function
(e) { e.preventDefault = function () {e.returnValue = false;};
e.target = e.srcElement; callback(e); }); }; } function toggle(a,
recursive) { var s = a.nextSibling || {}, oldClass = s.className,
arrow, newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow =
'▼'; newClass = 'sf-dump-expanded'; } else if
(/\bsf-dump-expanded\b/.test(oldClass)) { arrow = '▶'; newClass
= 'sf-dump-compact'; } else { return false; } a.lastChild.innerHTML = arrow; s.className =
s.className.replace(/\bsf-dump-(compact|expanded)\b/, newClass); if
(recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0;
s < a.length; ++s) { if (-1 == a[s].className.indexOf(newClass)) {
a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML =
arrow; } } } catch (e) { } } return true; }; function collapse(a,
recursive) { var s = a.nextSibling || {}, oldClass = s.className; if
(/\bsf-dump-expanded\b/.test(oldClass)) { toggle(a, recursive); return
true; } return false; }; function expand(a, recursive) { var s =
a.nextSibling || {}, oldClass = s.className; if
(/\bsf-dump-compact\b/.test(oldClass)) { toggle(a, recursive); return
true; } return false; }; function collapseAll(root) { var a =
root.querySelector('a.sf-dump-toggle'); if (a) { collapse(a, true);
expand(a); return true; } return false; } function reveal(node) { var
previous, parents = []; while ((node = node.parentNode || {}) &&
(previous = node.previousSibling) && 'A' === previous.tagName) {
parents.push(previous); } if (0 !== parents.length) {
parents.forEach(function (parent) { expand(parent); }); return true; }
return false; } function highlight(root, activeNode, nodes) {
resetHighlightedNodes(root); Array.from(nodes||[]).forEach(function
(node) { if (!/\bsf-dump-highlight\b/.test(node.className)) {
node.className = node.className + ' sf-dump-highlight'; } }); if
(!/\bsf-dump-highlight-active\b/.test(activeNode.className)) {
activeNode.className = activeNode.className + '
sf-dump-highlight-active'; } } function resetHighlightedNodes(root) {
Array.from(root.querySelectorAll('.sf-dump-str, .sf-dump-key,
.sf-dump-public, .sf-dump-protected,
.sf-dump-private')).forEach(function (strNode) { strNode.className =
strNode.className.replace(/\bsf-dump-highlight\b/, '');
strNode.className =
strNode.className.replace(/\bsf-dump-highlight-active\b/, ''); }); }
return function (root, x) { root = doc.getElementById(root); var
indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || '
').replace(rxEsc, '\$1')+')+', 'm'), options =
{"maxDepth":1,"maxStringLength":160,"fileLinkFormat":false}, elt =
root.getElementsByTagName('A'), len = elt.length, i = 0, s, h, t = [];
while (i < len) t.push(elt[i++]); for (i in x) { options[i] = x[i]; }
function a(e, f) { addEventListener(root, e, function (e) { if ('A' ==
e.target.tagName) { f(e.target, e); } else if ('A' ==
e.target.parentNode.tagName) { f(e.target.parentNode, e); } else if
(e.target.nextElementSibling && 'A' ==
e.target.nextElementSibling.tagName) { f(e.target.nextElementSibling,
e, true); } }); }; function isCtrlKey(e) { return e.ctrlKey ||
e.metaKey; } function xpathString(str) { var parts =
str.match(/[^'"]+|['"]/g).map(function (part) { if ("'" == part) {
return '"\'"'; } if ('"' == part) { return "'\"'"; } return "'" + part
+ "'"; }); return "concat(" + parts.join(",") + ", '')"; } addEventListener(root, 'mouseover', function (e) { if ('' !=
refStyle.innerHTML) { refStyle.innerHTML = ''; } }); a('mouseover',
function (a, e, c) { if (c) { e.target.style.cursor = "pointer"; }
else if (a = idRx.exec(a.className)) { try { refStyle.innerHTML =
'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF
!important; border-radius: 2px}'; } catch (e) { } } }); a('click',
function (a, e, c) { if (/\bsf-dump-toggle\b/.test(a.className)) {
e.preventDefault(); if (!toggle(a, isCtrlKey(e))) { var r =
doc.getElementById(a.getAttribute('href').substr(1)), s =
r.previousSibling, f = r.parentNode, t = a.parentNode;
t.replaceChild(r, a); f.replaceChild(a, s); t.insertBefore(s, r); f =
f.firstChild.nodeValue.match(indentRx); t =
t.firstChild.nodeValue.match(indentRx); if (f && t && f[0] !== t[0]) {
r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc,
'\$1'), 'mg'), t[0]); } if (/\bsf-dump-compact\b/.test(r.className))
{ toggle(s, isCtrlKey(e)); } } if (c) { } else if (doc.getSelection) {
try { doc.getSelection().removeAllRanges(); } catch (e) {
doc.getSelection().empty(); } } else { doc.selection.empty(); } } else
if (/\bsf-dump-str-toggle\b/.test(a.className)) { e.preventDefault();
e = a.parentNode.parentNode; e.className =
e.className.replace(/\bsf-dump-str-(expand|collapse)\b/,
a.parentNode.className); } }); elt =
root.getElementsByTagName('SAMP'); len = elt.length; i = 0; while (i <
len) t.push(elt[i++]); len = t.length; for (i = 0; i < len; ++i) { elt
= t[i]; if ('SAMP' == elt.tagName) { elt.className = 'sf-dump-expanded'; a = elt.previousSibling || {}; if ('A' !=
a.tagName) { a = doc.createElement('A'); a.className = 'sf-dump-ref';
elt.parentNode.insertBefore(a, elt); } else { a.innerHTML += ' '; }
a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all
children'; a.innerHTML += '▼'; a.className += '
sf-dump-toggle'; x = 1; if ('sf-dump' != elt.parentNode.className) { x
+= elt.parentNode.getAttribute('data-depth')/1; } elt.setAttribute('data-depth', x); if (x > options.maxDepth) {
toggle(a); } } else if (/\bsf-dump-ref\b/.test(elt.className) && (a =
elt.getAttribute('href'))) { a = a.substr(1); elt.className += ' '+a;
if (/[[{]$/.test(elt.previousSibling.nodeValue)) { a = a !=
elt.nextSibling.id && doc.getElementById(a); try { s = a.nextSibling;
elt.appendChild(a); s.parentNode.insertBefore(a, s); if
(/^[##]/.test(elt.innerHTML)) { elt.innerHTML += '
▶'; } else { elt.innerHTML =
'▶'; elt.className = 'sf-dump-ref'; } elt.className
+= ' sf-dump-toggle'; } catch (e) { if ('&' == elt.innerHTML.charAt(0)) { elt.innerHTML = '…'; elt.className =
'sf-dump-ref'; } } } } } if (doc.evaluate && Array.from &&
root.children.length > 1) { root.setAttribute('tabindex', 0);
SearchState = function () { this.nodes = []; this.idx = 0; };
SearchState.prototype = { next: function () { if (this.isEmpty()) {
return this.current(); } this.idx = this.idx < (this.nodes.length - 1)
? this.idx + 1 : this.idx; return this.current(); }, previous:
function () { if (this.isEmpty()) { return this.current(); } this.idx
= this.idx > 0 ? this.idx - 1 : this.idx; return this.current(); }, isEmpty: function () { return 0 === this.count(); }, current: function
() { if (this.isEmpty()) { return null; } return this.nodes[this.idx];
}, reset: function () { this.nodes = []; this.idx = 0; }, count:
function () { return this.nodes.length; }, }; function
showCurrent(state) { var currentNode = state.current(); if
(currentNode) { reveal(currentNode); highlight(root, currentNode,
state.nodes); } counter.textContent = (state.isEmpty() ? 0 : state.idx
+ 1) + ' of ' + state.count(); } var search = doc.createElement('div'); search.className = 'sf-dump-search-wrapper
sf-dump-search-hidden'; search.innerHTML = ' 0 of
0</span> </svg> </button> </svg> </button> '; root.insertBefore(search, root.firstChild); var state = new SearchState(); var searchInput =
search.querySelector('.sf-dump-search-input'); var counter =
search.querySelector('.sf-dump-search-count'); var searchInputTimer =
0; var previousSearchQuery = ''; addEventListener(searchInput,
'keyup', function (e) { var searchQuery = e.target.value; / Don't
perform anything if the pressed key didn't change the query / if
(searchQuery === previousSearchQuery) { return; } previousSearchQuery
= searchQuery; clearTimeout(searchInputTimer); searchInputTimer = setTimeout(function () { state.reset(); collapseAll(root);
resetHighlightedNodes(root); if ('' === searchQuery) {
counter.textContent = '0 of 0'; return; } var xpathResult =
doc.evaluate('//pre[#id="' + root.id + '"]//span[#class="sf-dump-str"
or #class="sf-dump-key" or #class="sf-dump-public" or
#class="sf-dump-protected" or
#class="sf-dump-private"][contains(child::text(), ' +
xpathString(searchQuery) + ')]', document, null,
XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); while (node =
xpathResult.iterateNext()) state.nodes.push(node); showCurrent(state);
}, 400); });
Array.from(search.querySelectorAll('.sf-dump-search-input-next,
.sf-dump-search-input-previous')).forEach(function (btn) {
addEventListener(btn, 'click', function (e) { e.preventDefault(); -1
!== e.target.className.indexOf('next') ? state.next() :
state.previous(); searchInput.focus(); collapseAll(root);
showCurrent(state); }) }); addEventListener(root, 'keydown', function
(e) { var isSearchActive =
!/\bsf-dump-search-hidden\b/.test(search.className); if ((114 ===
e.keyCode && !isSearchActive) || (isCtrlKey(e) && 70 === e.keyCode)) {
/ F3 or CMD/CTRL + F / e.preventDefault(); search.className =
search.className.replace(/\bsf-dump-search-hidden\b/, '');
searchInput.focus(); } else if (isSearchActive) { if (27 ===
e.keyCode) { / ESC key / search.className += '
sf-dump-search-hidden'; e.preventDefault();
resetHighlightedNodes(root); searchInput.value = ''; } else if (
(isCtrlKey(e) && 71 === e.keyCode) / CMD/CTRL + G / || 13 ===
e.keyCode / Enter / || 114 === e.keyCode / F3 */ ) {
e.preventDefault(); e.shiftKey ? state.previous() : state.next();
collapseAll(root); showCurrent(state); } } }); } if (0 >=
options.maxStringLength) { return; } try { elt =
root.querySelectorAll('.sf-dump-str'); len = elt.length; i = 0; t =
[]; while (i < len) t.push(elt[i++]); len = t.length; for (i = 0; i <
len; ++i) { elt = t[i]; s = elt.innerText || elt.textContent; x =
s.length - options.maxStringLength; if (0 < x) { h = elt.innerHTML;
elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0,
options.maxStringLength); elt.className += ' sf-dump-str-collapse';
elt.innerHTML = ''+h+'
◀'+ ''+elt.innerHTML+'
▶'; } } } catch (e) { } }; })(document);
pre.sf-dump { display: block; white-space: pre;
padding: 5px; } pre.sf-dump:after { content: ""; visibility: hidden;
display: block; height: 0; clear: both; } pre.sf-dump span { display:
inline; } pre.sf-dump .sf-dump-compact { display: none; } pre.sf-dump
abbr { text-decoration: none; border: none; cursor: help; }
pre.sf-dump a { text-decoration: none; cursor: pointer; border: 0;
outline: none; color: inherit; } pre.sf-dump .sf-dump-ellipsis {
display: inline-block; overflow: visible; text-overflow: ellipsis;
max-width: 5em; white-space: nowrap; overflow: hidden; vertical-align:
top; } pre.sf-dump .sf-dump-ellipsis+.sf-dump-ellipsis { max-width:
none; } pre.sf-dump code { display:inline; padding:0; background:none;
} .sf-dump-str-collapse .sf-dump-str-collapse { display: none; }
.sf-dump-str-expand .sf-dump-str-expand { display: none; }
.sf-dump-public.sf-dump-highlight,
.sf-dump-protected.sf-dump-highlight,
.sf-dump-private.sf-dump-highlight, .sf-dump-str.sf-dump-highlight,
.sf-dump-key.sf-dump-highlight { background: rgba(111, 172, 204, 0.3);
border: 1px solid #7DA0B1; border-radius: 3px; }
.sf-dump-public.sf-dump-highlight-active,
.sf-dump-protected.sf-dump-highlight-active,
.sf-dump-private.sf-dump-highlight-active,
.sf-dump-str.sf-dump-highlight-active,
.sf-dump-key.sf-dump-highlight-active { background: rgba(253, 175, 0,
0.4); border: 1px solid #ffa500; border-radius: 3px; } pre.sf-dump .sf-dump-search-hidden { display: none; } pre.sf-dump
.sf-dump-search-wrapper { float: right; font-size: 0; white-space:
nowrap; max-width: 100%; text-align: right; } pre.sf-dump
.sf-dump-search-wrapper > * { vertical-align: top; box-sizing:
border-box; height: 21px; font-weight: normal; border-radius: 0;
background: #FFF; color: #757575; border: 1px solid #BBB; }
pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input {
padding: 3px; height: 21px; font-size: 12px; border-right: none;
width: 140px; border-top-left-radius: 3px; border-bottom-left-radius:
3px; color: #000; } pre.sf-dump .sf-dump-search-wrapper >
.sf-dump-search-input-next, pre.sf-dump .sf-dump-search-wrapper >
.sf-dump-search-input-previous { background: #F2F2F2; outline: none;
border-left: none; font-size: 0; line-height: 0; } pre.sf-dump
.sf-dump-search-wrapper > .sf-dump-search-input-next {
border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next >
svg, pre.sf-dump .sf-dump-search-wrapper >
.sf-dump-search-input-previous > svg { pointer-events: none; width:
12px; height: 12px; } pre.sf-dump .sf-dump-search-wrapper >
.sf-dump-search-count { display: inline-block; padding: 0 5px; margin:
0; border-left: none; line-height: 21px; font-size: 12px;
}pre.sf-dump, pre.sf-dump .sf-dump-default{background-color:#fff;
color:#222; line-height:1.2em; font-weight:normal; font:12px Monaco,
Consolas, monospace; word-wrap: break-word; white-space: pre-wrap;
position:relative; z-index:100000}pre.sf-dump
.sf-dump-num{color:#a71d5d}pre.sf-dump
.sf-dump-const{color:#795da3}pre.sf-dump
.sf-dump-str{color:#df5000}pre.sf-dump
.sf-dump-cchr{color:#222}pre.sf-dump
.sf-dump-note{color:#a71d5d}pre.sf-dump
.sf-dump-ref{color:#a0a0a0}pre.sf-dump
.sf-dump-public{color:#795da3}pre.sf-dump
.sf-dump-protected{color:#795da3}pre.sf-dump
.sf-dump-private{color:#795da3}pre.sf-dump
.sf-dump-meta{color:#b729d9}pre.sf-dump
.sf-dump-key{color:#df5000}pre.sf-dump
.sf-dump-index{color:#a71d5d}array:1 [ "serialnumber" => "ASDQ13"]Sfdump("sf-dump-2124159715")

You need to use
return $request->all();
instead of
dd($request->all());
in your controller function.
return $request->all(); just return the response with your $request data.
Hope this helps you!

keylistener doesn't work at the first

My program is like a reaction game. When press the "up arrow" the background change the color to red. And you need the press the button whithin 2 sec. And if you don't press then you lose else the game is running on. But at the first 2 seconds you lose anyway but the game is going on well. So what's the problem with the code at the first 2 seconds?
My code:
var ido = 2000;
var nyomott = 0;
var nemelso = 0;
// >> main()
function main() {
nyomott = 0;
var r = Math.floor(Math.random() * 4);
var szin;
switch (r) {
case 0:
szin = "red";
break;
case 1:
szin = "green";
break;
case 2:
szin = "yellow";
break;
case 3:
szin = "blue";
break;
}
var print = "<h1>" + "Pess the key: " + "</br>" + szin + "</h1>" + "</br>";
document.getElementById("results").innerHTML = print;
startTimer();
}
var ciklus = setInterval(startTimer, ido);
// >> startTimer() : This function starts the timer
function startTimer() {
timerId = setTimeout(function() {
if (nyomott == 0) {
document.getElementById("results").innerHTML = "<h1>Lose</h1>";
clearInterval(ciklus);
} else {
main();
}
}, ido);
}
document.addEventListener("keydown", function(inEvent) {
if (inEvent.keyCode == 38) {
document.body.style.backgroundColor = "red";
nyomott = 1;
console.log(nyomott);
} else if (inEvent.keyCode == 404) document.body.style.backgroundColor = "green";
else if (inEvent.keyCode == 405) document.body.style.backgroundColor = "yellow";
else if (inEvent.keyCode == 406) document.body.style.backgroundColor = "blue";
});
body {
width: 100%;
height: 100%;
background-color: #202020;
}
div {
position: absolute;
height: 100%;
width: 100%;
display: table;
font-size: 60px;
color: #ffffff;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
<div onload="main()" id="results">
<h1></h1>
</div>

The problem is that in function main(), you set nyomott = 0; which satisfies the condition in function startTimer() which prints the 'Lose'.
Made a few adjustments
//pushed your variables up to be above the event listener function to be able to set nyomotto = 1
var ido = 2000;
var nyomott = 0;
var nemelso = 0;
document.addEventListener("keydown", function(inEvent) {
if (inEvent.keyCode == 38) {
document.body.style.backgroundColor = "red";
nyomott = 1;
console.log(nyomott);
} else if (inEvent.keyCode == 404)
document.body.style.backgroundColor = "green";
else if (inEvent.keyCode == 405)
document.body.style.backgroundColor = "yellow";
else if (inEvent.keyCode == 406)
document.body.style.backgroundColor = "blue";
});
function main() {
var r = Math.floor(Math.random() * 4);
var szin;
switch (r) {
case 0:
szin = "red";
break;
case 1:
szin = "green";
break;
case 2:
szin = "yellow";
break;
case 3:
szin = "blue";
break;
}
var print = "<h1>" + "Pess the key: " + "</br>" + szin + "</h1>" + "</br>";
document.getElementById("results").innerHTML = print;
startTimer();
}
var ciklus = setInterval(startTimer, ido);
// This function starts the timer
function startTimer() {
timerId = setTimeout(function() {
if (nyomott == 0) {
document.getElementById("results").innerHTML = "<h1>Lose</h1>";
clearInterval(ciklus);
} else {
main();
}
}, ido);
}
body {
width: 100%;
height: 100%;
background-color: #202020;
}
div {
position: absolute;
height: 100%;
width: 100%;
display: table;
font-size: 60px;
color: #ffffff;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
<div onload="main()" id="results">
<h1></h1>
</div>