My game isn't executed properly # [SOLVED]
# Hello guys.
### I am a real noob in JS, so don't be angry at me just try to help!
I am making a game in which the character (the red square) is supposed to go in the doors, and go out afterwards. But I encountered a problem. When I go in the door (using up arrow when by the door) and then go out (using down arrow while by the door) then the whole thing just *breaks and starts lagging and just goes crazy!* The link is [here](https://repl.it/@MarkelL/Gamem). When you get there, you have to open another window, as I made it to not be able to scroll. And, if you could give me an explanation of what happened instead of just a block of code, this would be really appreciated!
# Thank you guys!
### BTW there is the code
## HTML
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body scroll="no" style='overflow:hidden'>
<canvas id='canvas' height='590' width='1350'>
<script src="script.js"></script>
</body>
</html>
```
## JS
```can = document.getElementById('canvas');
ctx = can.getContext('2d');
var x = 10;
var y = 570;
var left = false;
var right = false;
var doors = [60, 130, 239, 493, 640, 893, 1042, 1204];
var door = false;
var gr;
var x1,x2;
var b = false;
setInterval(function(){
arrowHandle();
move();
},30)
function mainStage(){
var gr = door.toString();
//All the game functions
ctx.clearRect(0,0, can.width, can.height)
checkDoors();
draw();
doorAction();
ctx.fillStyle = 'black'
ctx.fillText(gr.toString(), 100, 100)
}
function iN(s){
ctx.clearRect(0,0, can.width, can.height)
drawDoors(s);
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 10, 10)
ext();
}
i = 0
function draw(){
//Add as needed
drawDoors(60);//door 1
if (i == 0){
doors.push(60);
i += 1;
}
drawDoors(130);//door 2
if (i == 1){
doors.push(130);
i += 1;
}
drawDoors(239);//door 3
if (i == 2){
doors.push(239);
i += 1;
}
drawDoors(493);//door 4
if (i == 3){
doors.push(493);
i += 1;
}
drawDoors(640);//door 5
if (i == 4){
doors.push(640);
i += 1;
}
drawDoors(893);//door 6
if (i == 5){
doors.push(893);
i += 1;
}
drawDoors(1042);//door 7
if (i == 6){
doors.push(1042);
i += 1;
}
drawDoors(1204);//door 8
if (i == 7){
doors.push(1204);
i += 1;
}
drawPlayer();
function drawPlayer(){
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 10, 10)
}
}
function arrowHandle(){
window.addEventListener('keydown',keydown, false)
function keydown(e){
if (e.keyCode == 37){//left
left = true;
}
if (e.keyCode == 39){//Right
right = true;
}
}
window.addEventListener('keyup',keyup, false)
function keyup(e){
if (e.keyCode == 37){//left
left = false;
}
if (e.keyCode == 39){//Right
right = false;
}
}
}
function move(){
if (left === true){
x -= 5;
}
if (right === true){
x += 5;
}
}
function checkDoors(){
doors.forEach(function(el){
el2 = el + 25
if(x >= el && x <= el2){
x1 = el;
x2 = el2;
ctx.fillStyle = 'yellow';
ctx.fillRect(x1 + 5, can.height - 35, 20, can.height)
door = true;
}
if(x < x1 || x > x2){
door = false;
}
});
}
function doorAction(){
if (door == true){
window.addEventListener('keydown', ent, false)
if (door == false){
window.removeEventListener('keydown', ent, false)
}
function ent(e){
if (door == true){
if (e.keyCode == 38){
gooo = setInterval(iN, 30, x1);
clearInterval(street);
}
}else{
window.removeEventListener('keydown', ent, false)
}
}
}
}
street = setInterval(mainStage,30)
function drawDoors(cr){
ctx.fillStyle = 'black';
ctx.fillRect(cr, can.height - 40, 5, can.height)
ctx.fillRect(cr + 25, can.height - 40, 5, can.height)
ctx.fillRect(cr, can.height - 40,25,5)
}
function ext(){
if (x >= x1 && x <= x2){
window.addEventListener('keydown',exit,false)
function exit(e){
if (e.keyCode == 40){
clearInterval(gooo);
newInt = setInterval(mainStage, 30);
}
}
}
if (x <= x1 || x >= x2){
window.removeEventListener('keydown',exit,false)
}
}
```
## CSS
```
canvas{
border:1px solid black;
}
```
# EDIT
Check it out now, it is working!
