Poner sonido a Snake HTML5

piete2 · 28 Septiembre 2017, 10:14 AM

Hola amigos. Es un proyecto en el que necesito poner un tono (el mio llamado pac.mp3) cuando la serpiente come.

Tengo esta parte de código:

serpiente.js

Código (javascript) [Seleccionar]

$(document).ready(function() {
 
 // Creamos un contexto 2d de nuestro canvas
 var canvas = $("#snake")[0];
 var context = canvas.getContext("2d");
 var width = $("#snake").width();
 var height = $("#snake").height();

 var cellWidth = 10;
 var d;
 var food;
 var score;
 var level = 6; // 1 El nivel más lento, 10 el nivel más rápido.
 // contiene el listado de celdas por donde pasa la serpiente
 var snake;
 
 // El juego tiene la dirección "right" por defecto y se ejecuta la función paint
 // dependiendo el nivel que hayas configurado arriba
 function init()
 {
  d = "right"; 
  createSnake();
  createFood();
  score = 0;

  if(typeof gameLoop != "undefined") {
   clearInterval(gameLoop);
  }
 
  gameLoop = setInterval(paint, 500 / level);
 }
 
 init();

 // Creamos la serpiente
 function createSnake()
 {
  var length = 5;
  snake = []; 
 
  for(var i = length - 1; i >= 0; i--)
  {
   snake.push({ x: i, y: 0 });
  }
 }

 //Creamos el recuado que tiene que comerse la serpiente
 function createFood()
 {
  food = {
   x: Math.round(Math.random() * (width - cellWidth) / cellWidth), 
   y: Math.round(Math.random() * (height - cellWidth) / cellWidth), 
   
  };
 }

 //Dibujamos la serpiente
 function paint()
 {
  context.fillStyle = "#ccc";
  context.fillRect(0, 0, width, height);
  context.strokeStyle = 'black';
  context.strokeRect(0, 0, width, height);
  
  var nx = snake[0].x;
  var ny = snake[0].y;
  
  if (d == "right") {
   nx++;
  } else if (d == "left") {
   nx--;
  } else if (d == "up") {
   ny--;
  } else if (d == "down") {
   ny++;
  }
  
  if (nx == -1 || nx == width / cellWidth || ny == -1 || ny == height / cellWidth || checkCollision(nx, ny, snake)) {   
   init();
    return;
  }
  
  if(nx == food.x && ny == food.y) {
   var tail = {
    x: nx, 
    y: ny
    function pla();
   };
   score++;
   createFood();
  } else {
   var tail = snake.pop(); 
 
   tail.x = nx;
   tail.y = ny;
  }
  
  snake.unshift(tail); 
  
  for(var i = 0; i < snake.length; i++) {
   var c = snake[i];
   paintCell(c.x, c.y);
  }

  paintCell(food.x, food.y);
  
  var scoreText = "Score: " + score;
  
  context.fillText(scoreText, 5, height - 5);
 }
 
 //Pintamos la celda 
 function paintCell(x, y)
 {
  context.fillStyle = "red";
  context.fillRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
  context.strokeStyle = 'white';
  context.strokeRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
 }
 
 //Verificiamos si hubo alguna colisión (si la hubo el juego se reinicia)
 function checkCollision(x, y, array)
 {
  for(var i = 0; i < array.length; i++)
  {
   if(array[i].x == x && array[i].y == y) {
    return true;
   }
  }
   return false;
 }
  
 // Capturamos la pulsación de las teclas
 $(document).keydown(function(e) {
  var key = e.which;
  
  if (key == "37" && d != "right") {
   d = "left";
  } else if (key == "38" && d != "down") {
   d = "up";
  } else if (key == "39" && d != "left") {
   d = "right";
  } else if (key == "40" && d != "up") {
   d = "down";
  }
 });
});

serpiente.html

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
 <script src="serpiente.js" type="text/javascript"></script>
 
 <style>
  .game
  {
   margin: 0 auto;
   width: 450px;
  }
 </style>
</head>
 
<body>
<div class="game">
 <canvas id="snake" width="450" height="450"></canvas>
</div>
<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg" >
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 
</body>
</html>

Gracias de antemano

Maurice_Lupin · 29 Septiembre 2017, 19:58 PM

Hola piete2, para el sonido uso esta clase https://github.com/Pomax/Pjs-2D-Game-Engine/blob/master/minim.js
Claro que lo uso con pequeñas modificaciones como el nivel de volumen

Código (javascript) [Seleccionar]

var minim = new Minim();
var audio1 = minim.loadFile("pac.mp3");
audio1.play();
//audio1.pause();
//audio1.loop(); tambien hay mute

Para hacer juegos con el canvas podría interesarte esta librería http://processingjs.org/

Saludos.

ivancea96 · 29 Septiembre 2017, 22:50 PM

Con HTML5, puedes usar la clase Audio (que funciona igual que el elemento <audio>.
Aquí enlace a ese elemento: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

Aquí enlace a su padre, HTMLMediaElement, del que hereda las funcionalidades inherentes a los elementos multimedia (start, stop, loop, muted, volume, y varios más): https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

Test Foro de elhacker.net SMF 2.1

Poner sonido a Snake HTML5

piete2

Maurice_Lupin

ivancea96