Projeto do curso

Mi proyecto del curso: Introducción a la programación en JavaScript
Mi proyecto del curso: Introducción a la programación en JavaScript

  • 293
  • 0
  • 0
Mi proyecto del curso: Introducción a la programación en JavaScript 1
Mi proyecto del curso: Introducción a la programación en JavaScript 2
Mi proyecto del curso: Introducción a la programación en JavaScript 3
Mi proyecto del curso: Introducción a la programación en JavaScript 4
Mi proyecto del curso: Introducción a la programación en JavaScript 5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dinosaurio Chrome</title>
<style>

* {
padding: 0;
margin: 0;
}

body{
height: 100vh;
background: #705757;
display: flex;
align-items: center;
}

.contenedor {
width: 1300px;
height: 600px;
margin: 0 auto;

position: relative;

background: linear-gradient(#b7d6c7, transparent) #ffe2d1;/*linear-gradient(#90ebff, white);*/
transition: background-color 1s linear;
overflow: hidden;
}

.mediodia {
background-color: #ffdcf3;
}

.tarde {
background-color: #ffadad;
}

.noche {
background-color: #aca8c7;
}

.dino {
width: 84px;
height: 84px;

position: absolute;
bottom: 22px;
left: 42px;
z-index: 2;

background: url(dino.png) repeat-x 0px 0px;
background-size: 336px 84px;
background-position-x: 0px;

}

.dino-corriendo {
animation: animarDino 0.25s steps(2) infinite;
}
.dino-estrellado {
background-position-x: -252px;
}

.suelo {
width: 200%;
height: 42px;

position: absolute;
bottom: 0;
left: 0;

background: url(suelo.png) repeat-x 0px 0px;
background-size: 50% 42px;

}

.cactus{
width: 40px;
height: 90px;

position: absolute;
bottom: 16px;
left: 600px;
z-index: 1;

background: url(cactus1.png) no-repeat;
}
.cactus2{
width: 90px;
height: 60px;

background: url(cactus2.png) no-repeat;
}

.nube{
width: 92px;
height: 26px;

position: absolute;
z-index: 0;

background: url(nube.png) no-repeat;
background-size: 92px 26px;
}

.score{
width: 100px;
height: 30px;

position: absolute;
top: 5px;
right: 15px;
z-index: 10;

color: #e6623a;
font-family: Verdana;
font-size: 30px;
font-weight: bold;
text-align: right;
}

.game-over{
display: none;

position: absolute;
width: 100%;

text-align: center;
color: #000000;
font-size: 30px;
font-family: Verdana;
font-weight: 700;
}

@keyframes animarDino{
from{
background-position-x: -84px;
}
to{
background-position-x: -252px;
}
}

</style>
</head>
<body>

<div class="contenedor">

<div class="suelo"></div>

<div class="dino dino-corriendo"></div>

<div class="score">0</div>

</div>

<div class="game-over">Fin del juego</div>

<script>

//****** GAME LOOP ********//

var time = new Date();
var deltaTime = 0;

if(document.readyState === "complete" || document.readyState === "interactive"){
setTimeout(Init, 1);
}else{
document.addEventListener("DOMContentLoaded", Init);
}

function Init() {
time = new Date();
Start();
Loop();
}

function Loop() {
deltaTime = (new Date() - time) / 1000;
time = new Date();
Update();
requestAnimationFrame(Loop);
}

//****** GAME LOGIC ********//

var sueloY = 22;
var velY = 0;
var impulso = 900;
var gravedad = 2500;

var dinoPosX = 42;
var dinoPosY = sueloY;

var sueloX = 0;
var velEscenario = 1280/3;
var gameVel = 1;
var score = 0;

var parado = false;
var saltando = false;

var tiempoHastaObstaculo = 2;
var tiempoObstaculoMin = 0.7;
var tiempoObstaculoMax = 1.8;
var obstaculoPosY = 16;
var obstaculos = [];

var tiempoHastaNube = 0.5;
var tiempoNubeMin = 0.7;
var tiempoNubeMax = 2.7;
var maxNubeY = 270;
var minNubeY = 100;
var nubes = [];
var velNube = 0.5;

var contenedor;
var dino;
var textoScore;
var suelo;
var gameOver;

function Start() {
gameOver = document.querySelector(".game-over");
suelo = document.querySelector(".suelo");
contenedor = document.querySelector(".contenedor");
textoScore = document.querySelector(".score");
dino = document.querySelector(".dino");
document.addEventListener("keydown", HandleKeyDown);
}

function Update() {
if(parado) return;

MoverDinosaurio();
MoverSuelo();
DecidirCrearObstaculos();
DecidirCrearNubes();
MoverObstaculos();
MoverNubes();
DetectarColision();

velY -= gravedad * deltaTime;
}

function HandleKeyDown(ev){
if(ev.keyCode == 32){
Saltar();
}
}

function Saltar(){
if(dinoPosY === sueloY){
saltando = true;
velY = impulso;
dino.classList.remove("dino-corriendo");
}
}

function MoverDinosaurio() {
dinoPosY += velY * deltaTime;
if(dinoPosY < sueloY){

TocarSuelo();
}
dino.style.bottom = dinoPosY+"px";
}

function TocarSuelo() {
dinoPosY = sueloY;
velY = 0;
if(saltando){
dino.classList.add("dino-corriendo");
}
saltando = false;
}

function MoverSuelo() {
sueloX += CalcularDesplazamiento();
suelo.style.left = -(sueloX % contenedor.clientWidth) + "px";
}

function CalcularDesplazamiento() {
return velEscenario * deltaTime * gameVel;
}

function Estrellarse() {
dino.classList.remove("dino-corriendo");
dino.classList.add("dino-estrellado");
parado = true;
}

function DecidirCrearObstaculos() {
tiempoHastaObstaculo -= deltaTime;
if(tiempoHastaObstaculo <= 0) {
CrearObstaculo();
}
}

function DecidirCrearNubes() {
tiempoHastaNube -= deltaTime;
if(tiempoHastaNube <= 0) {
CrearNube();
}
}

function CrearObstaculo() {
var obstaculo = document.createElement("div");
contenedor.appendChild(obstaculo);
obstaculo.classList.add("cactus");
if(Math.random() > 1.0) obstaculo.classList.add("cactus2");
obstaculo.posX = contenedor.clientWidth;
obstaculo.style.left = contenedor.clientWidth+"px";

obstaculos.push(obstaculo);
tiempoHastaObstaculo = tiempoObstaculoMin + Math.random() * (tiempoObstaculoMax-tiempoObstaculoMin) / gameVel;
}

function CrearNube() {
var nube = document.createElement("div");
contenedor.appendChild(nube);
nube.classList.add("nube");
nube.posX = contenedor.clientWidth;
nube.style.left = contenedor.clientWidth+"px";
nube.style.bottom = minNubeY + Math.random() * (maxNubeY-minNubeY)+"px";

nubes.push(nube);
tiempoHastaNube = tiempoNubeMin + Math.random() * (tiempoNubeMax-tiempoNubeMin) / gameVel;
}

function MoverObstaculos() {
for (var i = obstaculos.length - 1; i >= 0; i--) {
if(obstaculos[i].posX < -obstaculos[i].clientWidth) {
obstaculos[i].parentNode.removeChild(obstaculos[i]);
obstaculos.splice(i, 1);
GanarPuntos();
}else{
obstaculos[i].posX -= CalcularDesplazamiento();
obstaculos[i].style.left = obstaculos[i].posX+"px";
}
}
}

function MoverNubes() {
for (var i = nubes.length - 1; i >= 0; i--) {
if(nubes[i].posX < -nubes[i].clientWidth) {
nubes[i].parentNode.removeChild(nubes[i]);
nubes.splice(i, 1);
}else{
nubes[i].posX -= CalcularDesplazamiento() * velNube;
nubes[i].style.left = nubes[i].posX+"px";
}
}
}

function GanarPuntos() {
score++;
textoScore.innerText = score;
if(score == 30){
gameVel = 1.5;
contenedor.classList.add("mediodia");
}else if(score == 100) {
gameVel = 2;
contenedor.classList.add("tarde");
} else if(score == 150) {
gameVel = 3;
contenedor.classList.add("noche");
}
suelo.style.animationDuration = (3/gameVel)+"s";
}

function GameOver() {
Estrellarse();
gameOver.style.display = "block";
}

function DetectarColision() {
for (var i = 0; i < obstaculos.length; i++) {
if(obstaculos[i].posX > dinoPosX + dino.clientWidth) {

break;
}else{
if(IsCollision(dino, obstaculos[i], 10, 30, 15, 20)) {
GameOver();
}
}
}
}

function IsCollision(a, b, paddingTop, paddingRight, paddingBottom, paddingLeft) {
var aRect = a.getBoundingClientRect();
var bRect = b.getBoundingClientRect();

return !(
((aRect.top + aRect.height - paddingBottom) < (bRect.top)) ||
(aRect.top + paddingTop > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width - paddingRight) < bRect.left) ||
(aRect.left + paddingLeft > (bRect.left + bRect.width))
);
}

</script>
</body>
</html>

Mi proyecto del curso: Introducción a la programación en JavaScript 9
Curtir
Pinterest
Salvar nos favoritos
0 comentários

Faça login ou cadastre-se Gratuitamente para comentar

Entrar Entre de Graça