Añadidos juegos
This commit is contained in:
19
serpiente/index.html
Normal file
19
serpiente/index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Snake Game</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Juego de la Serpiente</h1>
|
||||
<p>Usa las flechas del teclado para mover la serpiente. ¡Come y crece!</p>
|
||||
<div id="game-container">
|
||||
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
||||
</div>
|
||||
<div id="score">Puntaje: <span id="score-value">0</span></div>
|
||||
<button id="restart-btn">Reiniciar</button>
|
||||
<div id="game-over-message"></div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
116
serpiente/script.js
Normal file
116
serpiente/script.js
Normal file
@@ -0,0 +1,116 @@
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const scoreSpan = document.getElementById('score-value');
|
||||
const restartBtn = document.getElementById('restart-btn');
|
||||
const gameOverDiv = document.getElementById('game-over-message');
|
||||
|
||||
// Parámetros del juego
|
||||
const gridSize = 20; // Tamaño de cada celda
|
||||
const tileCount = 20; // El área es de 20x20 celdas
|
||||
let snake, direction, food, score, gameInterval, gameOver;
|
||||
|
||||
function startGame() {
|
||||
snake = [
|
||||
{x: 10, y: 10},
|
||||
{x: 9, y: 10},
|
||||
{x: 8, y: 10}
|
||||
];
|
||||
direction = 'right';
|
||||
score = 0;
|
||||
gameOver = false;
|
||||
scoreSpan.textContent = score;
|
||||
gameOverDiv.textContent = '';
|
||||
placeFood();
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, 100);
|
||||
}
|
||||
|
||||
function placeFood() {
|
||||
food = {
|
||||
x: Math.floor(Math.random() * tileCount),
|
||||
y: Math.floor(Math.random() * tileCount)
|
||||
};
|
||||
// Asegúrate que la comida no aparece en la serpiente
|
||||
if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
|
||||
placeFood();
|
||||
}
|
||||
}
|
||||
|
||||
function gameLoop() {
|
||||
// Mueve la serpiente
|
||||
const head = {x: snake[0].x, y: snake[0].y};
|
||||
switch (direction) {
|
||||
case 'left': head.x--; break;
|
||||
case 'up': head.y--; break;
|
||||
case 'right': head.x++; break;
|
||||
case 'down': head.y++; break;
|
||||
}
|
||||
|
||||
// Choca con pared
|
||||
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
|
||||
endGame();
|
||||
return;
|
||||
}
|
||||
// Choca consigo mismo
|
||||
if (snake.some(seg => seg.x === head.x && seg.y === head.y)) {
|
||||
endGame();
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(head);
|
||||
|
||||
// Come la comida
|
||||
if (head.x === food.x && head.y === food.y) {
|
||||
score++;
|
||||
scoreSpan.textContent = score;
|
||||
placeFood();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
drawGame();
|
||||
}
|
||||
|
||||
function drawGame() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Dibuja la comida
|
||||
ctx.fillStyle = "#fc5185";
|
||||
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
|
||||
|
||||
// Dibuja la serpiente
|
||||
for (let i = 0; i < snake.length; i++) {
|
||||
ctx.fillStyle = i === 0 ? "#ffd700" : "#145991";
|
||||
ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
|
||||
}
|
||||
}
|
||||
|
||||
function changeDirection(e) {
|
||||
if (gameOver) return;
|
||||
switch (e.key) {
|
||||
case "ArrowLeft":
|
||||
if (direction !== "right") direction = "left";
|
||||
break;
|
||||
case "ArrowUp":
|
||||
if (direction !== "down") direction = "up";
|
||||
break;
|
||||
case "ArrowRight":
|
||||
if (direction !== "left") direction = "right";
|
||||
break;
|
||||
case "ArrowDown":
|
||||
if (direction !== "up") direction = "down";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
clearInterval(gameInterval);
|
||||
gameOver = true;
|
||||
gameOverDiv.textContent = "¡Fin del juego! Puntaje final: " + score;
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', changeDirection);
|
||||
restartBtn.onclick = startGame;
|
||||
|
||||
// Inicia el juego
|
||||
startGame();
|
||||
130
serpiente/styles.css
Normal file
130
serpiente/styles.css
Normal file
@@ -0,0 +1,130 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #142850;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Encabezado */
|
||||
h1 {
|
||||
margin-top: 2.2rem;
|
||||
color: #00a8cc;
|
||||
font-size: clamp(1.5rem, 4vw, 2.7rem);
|
||||
}
|
||||
|
||||
/* Contenedor del juego */
|
||||
#game-container {
|
||||
margin: 2rem auto;
|
||||
display: block;
|
||||
background: #27496d;
|
||||
border-radius: 1em;
|
||||
box-shadow: 0 2px 10px #1119;
|
||||
padding: 1.1em;
|
||||
max-width: 98vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Canvas responsive */
|
||||
canvas {
|
||||
background: #dae1e7;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 0.65em;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
aspect-ratio: 1/1;
|
||||
height: auto;
|
||||
box-shadow: 0 2px 10px #27496d44;
|
||||
}
|
||||
|
||||
/* Score */
|
||||
#score {
|
||||
font-size: clamp(1.1em, 2vw, 1.4em);
|
||||
margin-top: 1em;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
/* Game over mensaje */
|
||||
#game-over-message {
|
||||
font-size: clamp(1.1em, 3vw, 1.5em);
|
||||
color: #fc5185;
|
||||
margin-top: 1em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
/* Botón restart */
|
||||
#restart-btn {
|
||||
margin-top: 1.1em;
|
||||
font-size: clamp(1em, 2vw, 1.18em);
|
||||
padding: 0.6em 2em;
|
||||
border: none;
|
||||
border-radius: 0.6em;
|
||||
background: #00a8cc;
|
||||
color: #fafafa;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
box-shadow: 0 2px 8px #00a8cc44;
|
||||
}
|
||||
#restart-btn:hover,
|
||||
#restart-btn:active {
|
||||
background: #145991;
|
||||
}
|
||||
|
||||
/* ==== Pantallas móviles ==== */
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
margin-top: 5vw;
|
||||
font-size: clamp(1.2rem, 7vw, 2em);
|
||||
}
|
||||
#game-container {
|
||||
border-radius: 6vw;
|
||||
padding: 5vw;
|
||||
margin-top: 6vw;
|
||||
margin-bottom: 8vw;
|
||||
box-shadow: 0 2px 10px #1c254080;
|
||||
}
|
||||
canvas {
|
||||
max-width: 99vw;
|
||||
border-radius: 5vw;
|
||||
}
|
||||
#score {
|
||||
font-size: clamp(1em, 8vw, 1.6em);
|
||||
margin-top: 4vw;
|
||||
}
|
||||
#game-over-message {
|
||||
font-size: clamp(1em, 8vw, 1.3em);
|
||||
margin-top: 4vw;
|
||||
}
|
||||
#restart-btn {
|
||||
font-size: clamp(1em, 8vw, 1.45em);
|
||||
padding: 1em 12vw;
|
||||
border-radius: 6vw;
|
||||
margin-top: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==== Pantallas muy pequeñas ==== */
|
||||
@media (max-width: 340px) {
|
||||
#game-container {
|
||||
padding: 2vw;
|
||||
border-radius: 11vw;
|
||||
}
|
||||
canvas {
|
||||
border-radius: 10vw;
|
||||
}
|
||||
#restart-btn {
|
||||
font-size: clamp(0.9em, 8vw, 1.14em);
|
||||
padding: 0.9em 3vw;
|
||||
border-radius: 10vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user