clestonv/game-01.markdown

## game-01.markdown

      
    Raw
  

              game-01.markdown
            
          
    Game 01

A Pen by Cleberson Osorio on CodePen.
License.

  
## index.html
 <body>
   <h1>Game da Dilminha</h1>
   <canvas id="canvas" width="640" height="480">
   </canvas>
   <h1>Creditos:</h1>
   <a href="https://alexandreaquiles.com.br/2016/02/25/criando-um-jogo-em-javascript-1/">Tutorial</a>
   <p>Agracimento ao <i>Alexandre Aquiles</i> pelo tutorial</p>
 </body>

## script.js
var canvas = document.getElementById("canvas");
var contexto = canvas.getContext("2d");
var gameOver = false;
var pontos = 0;

function desenhaPontos() {
  contexto.fillStyle = "black";
  contexto.font="12pt Monospace";
  contexto.fillText(pontos, 5, 20);
}

function desenhaFundo(){
    //preenche o fundo com cinza escuro
  contexto.fillStyle = "dimgray";
  contexto.fillRect(0, 0, canvas.width, canvas.height);

  //calcada superior
  contexto.fillStyle = "lightgray";
  contexto.fillRect(0,0, canvas.width, 80);

  // calcada inferior
  contexto.fillStyle = "lightgray";
  contexto.fillRect(0, 380, canvas.width, 100);

  //faixas
  contexto.fillStyle= "white";
  for(var i = 0; i < 25; i++){
    //faixa superior
    contexto.fillRect(i*30-5, 185, 20, 4);

    //faixa inferior
    contexto.fillRect(i*30-5, 280, 20, 4);
  }
}

function desenhaImagem() {
  contexto.drawImage(imagem, x, y, imagem.width, imagem.height);
}

//Construtor JavaScript
function Sprite(caminhoDaImagem, xInicial, yInicial){
  this.x = xInicial;
  this.y = yInicial;

  this.imagem = new Image();
  this.imagem.src = caminhoDaImagem;

  var that = this;
  this.imagem.onload = function() {
        that.largura = that.imagem.width;
        that.altura = that.imagem.height;
        that.desenhaImagem();
  }

  this.desenhaImagem = function() {
    contexto.drawImage(this.imagem, this.x, this.y, this.largura, this.altura);
    contexto.strokeStyle = "darkred";
    contexto.lineWidth = 0.2;
    contexto.strokeRect(this.x, this.y, this.largura, this.altura);
  }

  this.move = function(dx, dy) {
    this.x += dx;
    this.y += dy;
    //limites
    if(this.x > canvas.width) {
        this.x = -this.largura;
        }
    else if (this.x < -this.largura ) {
        this.x = canvas.width;
        }
    if(this.y > canvas.height - this.altura + 5) {
        this.y -= dy;
       }
    else if (this.y <= -5 ) {
        this.y = canvas.height - this.altura;
        }
  }

  this.colidiu = function(outro) {
    var colidiuNoXTopo = outro.x >= this.x && outro.x <= (this.x + this.largura);
    var colidiuNoYTopo = outro.y >= this.y && outro.y <= (this.y + this.altura);
    var colidiuNoXBase = (outro.x + outro.largura) >= this.x && (outro.x + outro.largura) <= (this.x + this.largura);
    var colidiuNoYBase = (outro.y + outro.altura) >= this.y && (outro.y + outro.altura) <= (this.y + this.altura);
    return (colidiuNoXTopo && colidiuNoYTopo) || (colidiuNoXBase && colidiuNoYBase);
  }
}

var dilminha = new Sprite("http://a-dilminha.appspot.com/dilminha.png", 320, 400);
dilminha.passou = function() {
  if (this.y <= 0) {
        this.y = canvas.height - this.altura;
        return true;
      }
      return false;
};
var yellowCar = new Sprite("http://a-dilminha.appspot.com/carrinho-amarelo.png", -10, 300);
var blueCar = new Sprite("http://a-dilminha.appspot.com/carrinho-azul.png", 560, 200);
var copCar = new Sprite("http://a-dilminha.appspot.com/carrinho-policia.png", 10, 100);

document.onkeydown = function(event) {

  if(gameOver) {
        return;
     }

  //executando quando algo  for digitado
  switch(event.which) {
    case 37: //para esquerda
      dilminha.move(-10, 0);
      if(dilminha.passou()) {
        pontos++;
     }
      // passando o limite da esquerda, aparecera a direita
      if(x < -imagem.width){
         x = canvas.width;
         }
      break;
    case 38: //para cima
      dilminha.move(0, -10);
      if(dilminha.passou()) {
        pontos++;
     }
      // passando o limite superior, aparecera abaixo
      if(y <= -5){
         y = canvas.height - imagem.height;
         }
      break;
    case 39: //para direita
      dilminha.move(10, 0);
      if(dilminha.passou()) {
        pontos++;
     }
      // passando o limite da direita, aparecerá a esquerda
      if(x > canvas.width){
         x = -imagem.width;
         }
      break;
    case 40: // para baixo
      dilminha.move(0, 10)
      if(dilminha.passou()) {
        pontos++;
     }
      // se novo y passou o limite inferior, desfaz a soma
      if(y > canvas.height - imagem.height + 5){
         y -= 10;
         }
      break;
  }

}

setInterval(function(){
  //desenha fundo e imagens
  desenhaFundo();
  desenhaPontos();
  dilminha.desenhaImagem();
  yellowCar.desenhaImagem();
  blueCar.desenhaImagem();
  copCar.desenhaImagem();

  if(gameOver) {
     contexto.fillStyle = "red";
     contexto.font = "Bold 80px Sans";
     contexto.fillText("Game Over", canvas.width/16, canvas.height/2+20);
     return;
     }
  // movimenta carros
  yellowCar.move(7, 0);
  blueCar.move(-5, 0);
  copCar.move(10, 0);

  if(yellowCar.colidiu(dilminha)
     || blueCar.colidiu(dilminha)
     || copCar.colidiu(dilminha)) {
    gameOver = true;
  }
}, 50);

//IMPONDO LIMITES

## style.css
canvas {
  border: solid black;
  margin: 0px auto;
  display: block;
}

h1 {
  text-align: center;
  margin: 0px;
}
	<body>
	<h1>Game da Dilminha</h1>
	<canvas id="canvas" width="640" height="480">
	</canvas>
	<h1>Creditos:</h1>
	<a href="https://alexandreaquiles.com.br/2016/02/25/criando-um-jogo-em-javascript-1/">Tutorial</a>
	<p>Agracimento ao <i>Alexandre Aquiles</i> pelo tutorial</p>
	</body>
	var canvas = document.getElementById("canvas");
	var contexto = canvas.getContext("2d");
	var gameOver = false;
	var pontos = 0;

	function desenhaPontos() {
	contexto.fillStyle = "black";
	contexto.font="12pt Monospace";
	contexto.fillText(pontos, 5, 20);
	}

	function desenhaFundo(){
	//preenche o fundo com cinza escuro
	contexto.fillStyle = "dimgray";
	contexto.fillRect(0, 0, canvas.width, canvas.height);

	//calcada superior
	contexto.fillStyle = "lightgray";
	contexto.fillRect(0,0, canvas.width, 80);

	// calcada inferior
	contexto.fillStyle = "lightgray";
	contexto.fillRect(0, 380, canvas.width, 100);

	//faixas
	contexto.fillStyle= "white";
	for(var i = 0; i < 25; i++){
	//faixa superior
	contexto.fillRect(i*30-5, 185, 20, 4);

	//faixa inferior
	contexto.fillRect(i*30-5, 280, 20, 4);
	}
	}

	function desenhaImagem() {
	contexto.drawImage(imagem, x, y, imagem.width, imagem.height);
	}

	//Construtor JavaScript
	function Sprite(caminhoDaImagem, xInicial, yInicial){
	this.x = xInicial;
	this.y = yInicial;

	this.imagem = new Image();
	this.imagem.src = caminhoDaImagem;

	var that = this;
	this.imagem.onload = function() {
	that.largura = that.imagem.width;
	that.altura = that.imagem.height;
	that.desenhaImagem();
	}

	this.desenhaImagem = function() {
	contexto.drawImage(this.imagem, this.x, this.y, this.largura, this.altura);
	contexto.strokeStyle = "darkred";
	contexto.lineWidth = 0.2;
	contexto.strokeRect(this.x, this.y, this.largura, this.altura);
	}

	this.move = function(dx, dy) {
	this.x += dx;
	this.y += dy;
	//limites
	if(this.x > canvas.width) {
	this.x = -this.largura;
	}
	else if (this.x < -this.largura ) {
	this.x = canvas.width;
	}
	if(this.y > canvas.height - this.altura + 5) {
	this.y -= dy;
	}
	else if (this.y <= -5 ) {
	this.y = canvas.height - this.altura;
	}
	}

	this.colidiu = function(outro) {
	var colidiuNoXTopo = outro.x >= this.x && outro.x <= (this.x + this.largura);
	var colidiuNoYTopo = outro.y >= this.y && outro.y <= (this.y + this.altura);
	var colidiuNoXBase = (outro.x + outro.largura) >= this.x && (outro.x + outro.largura) <= (this.x + this.largura);
	var colidiuNoYBase = (outro.y + outro.altura) >= this.y && (outro.y + outro.altura) <= (this.y + this.altura);
	return (colidiuNoXTopo && colidiuNoYTopo) \|\| (colidiuNoXBase && colidiuNoYBase);
	}
	}

	var dilminha = new Sprite("http://a-dilminha.appspot.com/dilminha.png", 320, 400);
	dilminha.passou = function() {
	if (this.y <= 0) {
	this.y = canvas.height - this.altura;
	return true;
	}
	return false;
	};
	var yellowCar = new Sprite("http://a-dilminha.appspot.com/carrinho-amarelo.png", -10, 300);
	var blueCar = new Sprite("http://a-dilminha.appspot.com/carrinho-azul.png", 560, 200);
	var copCar = new Sprite("http://a-dilminha.appspot.com/carrinho-policia.png", 10, 100);

	document.onkeydown = function(event) {

	if(gameOver) {
	return;
	}

	//executando quando algo for digitado
	switch(event.which) {
	case 37: //para esquerda
	dilminha.move(-10, 0);
	if(dilminha.passou()) {
	pontos++;
	}
	// passando o limite da esquerda, aparecera a direita
	if(x < -imagem.width){
	x = canvas.width;
	}
	break;
	case 38: //para cima
	dilminha.move(0, -10);
	if(dilminha.passou()) {
	pontos++;
	}
	// passando o limite superior, aparecera abaixo
	if(y <= -5){
	y = canvas.height - imagem.height;
	}
	break;
	case 39: //para direita
	dilminha.move(10, 0);
	if(dilminha.passou()) {
	pontos++;
	}
	// passando o limite da direita, aparecerá a esquerda
	if(x > canvas.width){
	x = -imagem.width;
	}
	break;
	case 40: // para baixo
	dilminha.move(0, 10)
	if(dilminha.passou()) {
	pontos++;
	}
	// se novo y passou o limite inferior, desfaz a soma
	if(y > canvas.height - imagem.height + 5){
	y -= 10;
	}
	break;
	}

	}

	setInterval(function(){
	//desenha fundo e imagens
	desenhaFundo();
	desenhaPontos();
	dilminha.desenhaImagem();
	yellowCar.desenhaImagem();
	blueCar.desenhaImagem();
	copCar.desenhaImagem();

	if(gameOver) {
	contexto.fillStyle = "red";
	contexto.font = "Bold 80px Sans";
	contexto.fillText("Game Over", canvas.width/16, canvas.height/2+20);
	return;
	}
	// movimenta carros
	yellowCar.move(7, 0);
	blueCar.move(-5, 0);
	copCar.move(10, 0);

	if(yellowCar.colidiu(dilminha)
	\|\| blueCar.colidiu(dilminha)
	\|\| copCar.colidiu(dilminha)) {
	gameOver = true;
	}
	}, 50);

	//IMPONDO LIMITES
	canvas {
	border: solid black;
	margin: 0px auto;
	display: block;
	}

	h1 {
	text-align: center;
	margin: 0px;
	}