Skip to content

Commit b24dde2

Browse files
ismaelaiismaelai
committed
Need to be fixed
1 parent c8052a1 commit b24dde2

File tree

3 files changed

+139
-79
lines changed

3 files changed

+139
-79
lines changed

‎app.js

+136-73
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,148 @@
1-
function init() {
2-
const width = 10;
3-
const height = width;
1+
window.addEventListener(
2+
'DOMContentLoaded',
3+
() => {
4+
const squareGrid = document.querySelector('.grid');
5+
const width = 10;
6+
const height = width;
7+
const squareGrid = width * height;
8+
const cells = [];
49

5-
const squareGrid = width * height;
610

7-
const squares = document.querySelector('.grid');
11+
for (let index = 0; index < squareGrid; index = index + 1) {
12+
const cell = document.createElement('grid');
13+
squares.appendChild(cell);
14+
cells.push(cell);
15+
}
816

9-
const cells = [];
17+
const squares = document.querySelectorAll('.grid div');
18+
const scoreDisplay = document.querySelector('span');
19+
const startBtn = document.querySelector('.start');
1020

11-
for (let index = 0; index < squareGrid; index = index + 1) {
12-
const cell = document.createElement('div');
13-
squares.appendChild(cell);
14-
cells.push(cell);
15-
}
16-
const squares = document.querySelectorAll('.grid div');
17-
const scoreDisplay = document.querySelector('span');
18-
const startBtn = document.querySelector('.start');
19-
20-
//////////////////////////////////////////////////////////////////////////////////
21-
22-
let currentIndex = 0;
23-
let appleIndex = 0;
24-
let bodySnake = [2, 1, 0]; /// 2 es la cabeza, 1 cuerpo y 0 tail (todo lo que proceda hay es 1)
25-
let direction = 1;
26-
let score = 0;
27-
let speed = 0.9;
28-
let intervalTime = 0;
29-
let interval = 0;
30-
31-
//to start, and restart the game
32-
function startGame() {
33-
bodySnake.forEach((index) => squares[index].classList.remove('snake'));
34-
squares[appleIndex].classList.remove('apple');
35-
clearInterval(interval);
36-
score = 0;
37-
randomApple();
38-
direction = 1;
39-
scoreDisplay.innerText = score;
40-
intervalTime = 700;
41-
bodySnake = [2, 1, 0];
42-
currentIndex = 0;
43-
bodySnake.forEach((index) => squares[index].classList.add('snake'));
44-
interval = setInterval(moveOutcomes, intervalTime);
45-
}
46-
/////////////////////////////////////////////////////////////////////////////////////////////////
47-
48-
// Eliminamos el ultimo item del array bodySnake, y la clase de 'snake' en TAIL.
49-
// Asi damos una nueva direccion con la cabeza del array.
50-
51-
const tail = bodySnake.pop();
52-
squares[tail].classList.remove('snake');
53-
bodySnake.unshift(bodySnake[0] + direction);
54-
55-
/////////////////////////////////////////////////////////////////////////////////////////////////
56-
57-
//
58-
// Añadir clase snake a tail cuando consigamos manzanas.BodySnake crece.
59-
// Sumamos score
60-
// Aumentamos la velocidad
61-
62-
if (squares[bodySnake[0]].classList.contains('apple')) {
63-
squares[bodySnake[0]].classList.remove('apple');
64-
squares[tail].classList.add('snake');
65-
bodySnake.push(tail);
66-
randomApple();
67-
score++;
68-
scoreDisplay.textContent = score;
69-
clearInterval(interval);
70-
intervalTime = intervalTime * speed;
71-
interval = setInterval(moveOutcomes, intervalTime);
21+
//////////////////////////////////////////////////////////////////////////////////
22+
23+
let currentIndex = 0;
24+
let appleIndex = 0;
25+
let bodySnake = [2, 1, 0]; /// 2 es la cabeza, 1 cuerpo y 0 tail (todo lo que proceda hay es 1)
26+
let direction = 1;
27+
let score = 0;
28+
let speed = 0.9;
29+
let intervalTime = 0;
30+
let interval = 0;
31+
32+
//Empezar y re-start el juego
33+
34+
function startGame() {
35+
bodySnake.forEach((index) => squares[index].classList.remove('snake'));
36+
bodySnake.forEach((index) => squares[index].classList.add('snake'));
37+
squares[appleIndex].classList.remove('apple');
38+
clearInterval(interval);
39+
score = 0;
40+
randomApple();
41+
direction = 1;
42+
scoreDisplay.innerText = score;
43+
intervalTime = 700;
44+
bodySnake = [2, 1, 0];
45+
currentIndex = 0;
46+
47+
interval = setInterval(overcomes, intervalTime);
48+
console.log(interval);
49+
}
50+
/////////////////////////////////////////////////////////////////////////////////////////////////
51+
52+
///////////////////////////////////////////////////////////////////////////////////////
53+
54+
function overcomes() {
55+
if (
56+
(bodySnake[0] + width >= width * width && direction === width) || //Chocamos con el bottom
57+
(bodySnake[0] % width === width - 1 && direction === 1) || //chocar muro derecho
58+
(bodySnake[0] % width === 0 && direction === -1) || //chocar muro izquiero
59+
(bodySnake[0] - width < 0 && direction === -width) || //chocar con el top
60+
squares[bodySnake[0] + direction].classList.contains('snake') // chocarnos nosotros mismos
61+
) {
62+
return clearInterval(interval); // Si cualquiera de lo anterior sucede. Se para el intervalo.
63+
}
64+
}
65+
66+
/////////////////////////////////////////////////////////////////////////////////////////////////
67+
68+
// Eliminamos el ultimo item del array bodySnake, y la clase de 'snake' en TAIL.
69+
// Asi damos una nueva direccion con la cabeza del array.
70+
71+
const tail = bodySnake.pop();
72+
squares[tail].classList.remove('snake');
73+
bodySnake.unshift(bodySnake[0] + direction);
74+
75+
/////////////////////////////////////////////////////////////////////////////////////////////////
76+
77+
// Se va apple, cuando pasamos por la clase que la contenga, Y generamos una nueva.
78+
// Añadir clase snake a tail cuando consigamos manzanas.Por tanto,BodySnake crece.
79+
// Sumamos score
80+
// Aumentamos la velocidad de snake
81+
82+
if (squares[bodySnake[0]].classList.contains('apple')) {
83+
squares[bodySnake[0]].classList.remove('apple');
84+
squares[tail].classList.add('snake');
85+
bodySnake.push(tail);
86+
randomApple();
87+
score++;
88+
scoreDisplay.textContent = score;
89+
clearInterval(interval);
90+
intervalTime = intervalTime * speed;
91+
interval = setInterval(overcomes, intervalTime);
92+
}
93+
squares[bodySnake[0]].classList.add('snake');
7294
}
73-
squares[bodySnake[0]].classList.add('snake');
74-
}
75-
////////////////////////////////////////////////////////////////////////////////////////////////////
95+
////////////////////////////////////////////////////////////////////////////////////////////////////
96+
97+
//Generar apples al azar
7698

77-
//generate new apple once apple is eaten
7899
function randomApple() {
79100
do {
80101
appleIndex = Math.floor(Math.random() * squares.length);
81-
} while (squares[appleIndex].classList.contains('snake')); //making sure apples dont appear on the snake
102+
} while (squares[appleIndex].classList.contains('snake')); // Apple no aparece encima de snake
82103
squares[appleIndex].classList.add('apple');
83104
}
84105

85-
document.addEventListener('DOMContentLoaded', init);
106+
////////////////////////////////////////////////////////////////////////////////////////////////
107+
108+
function control(e) {
109+
squares[currentIndex].classList.remove('snake');
110+
111+
if (e.keyCode === 39) {
112+
direction = 1; // ir a la derecha
113+
} else if (e.keyCode === 38) {
114+
direction = -width; // ir arriba
115+
} else if (e.keyCode === 37) {
116+
direction = -1; // ir izquiera
117+
} else if (e.keyCode === 40) {
118+
direction = +width; // ir hacia abajo
119+
}
120+
}
121+
122+
// function control(e) {
123+
// squares[currentIndex].classList.remove('snake');
124+
// switch (e.keyCode) {
125+
// case 37:
126+
// if (direction === -1) direction = 'left';
127+
// break;
128+
// case 38:
129+
// if (direction === -width) direction = 'up';
130+
// break;
131+
// case 39:
132+
// if (direction === 1) direction = 'right';
133+
// break;
134+
// case 40:
135+
// if (direction === +width) direction = 'down';
136+
// break;
137+
// }
138+
139+
function gameOver() {
140+
console.log('gameOver');
141+
142+
grid.classList.remove('.grid');
143+
grid.classList.add('dead');
144+
}
145+
146+
document.addEventListener('keyup', control);
147+
startBtn.addEventListener('click', startGame);
148+

‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>The Game / Ismael</title>
77
<link rel="stylesheet" href="./styles/normalize.css" />
8-
<link rel="stylesheet" href="./styles/style.css" />
8+
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
11-
<button class="start">PLAY</button>
1211
<div class="score">SCORE <span>0</span></div>
1312
<div>
1413
<div class="grid-wrapper">
1514
<div class="grid"></div>
1615
</div>
1716
</div>
18-
<script src="./app.js"></script>
17+
<button class="start">PLAY</button>
18+
<script src="app.js"></script>
1919
</body>
2020
</html>

‎styles/style.css ‎style.css

-3
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,4 @@ body {
4747
justify-content: center;
4848
font-size: 30px;
4949
text-align: center;
50-
font-family:
51-
background-color: teal;
52-
border-radious: 25px;
5350
}

0 commit comments

Comments
 (0)