elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Poner sonido a Snake HTML5
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Poner sonido a Snake HTML5  (Leído 2,678 veces)
piete2

Desconectado Desconectado

Mensajes: 22



Ver Perfil
Poner sonido a Snake HTML5
« en: 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
  1. $(document).ready(function() {
  2.  
  3. // Creamos un contexto 2d de nuestro canvas
  4. var canvas = $("#snake")[0];
  5. var context = canvas.getContext("2d");
  6. var width = $("#snake").width();
  7. var height = $("#snake").height();
  8.  
  9. var cellWidth = 10;
  10. var d;
  11. var food;
  12. var score;
  13. var level = 6; // 1 El nivel más lento, 10 el nivel más rápido.
  14. // contiene el listado de celdas por donde pasa la serpiente
  15. var snake;
  16.  
  17. // El juego tiene la dirección "right" por defecto y se ejecuta la función paint
  18. // dependiendo el nivel que hayas configurado arriba
  19. function init()
  20. {
  21. d = "right";
  22. createSnake();
  23. createFood();
  24. score = 0;
  25.  
  26. if(typeof gameLoop != "undefined") {
  27. clearInterval(gameLoop);
  28. }
  29.  
  30. gameLoop = setInterval(paint, 500 / level);
  31. }
  32.  
  33. init();
  34.  
  35. // Creamos la serpiente
  36. function createSnake()
  37. {
  38. var length = 5;
  39. snake = [];
  40.  
  41. for(var i = length - 1; i >= 0; i--)
  42. {
  43. snake.push({ x: i, y: 0 });
  44. }
  45. }
  46.  
  47. //Creamos el recuado que tiene que comerse la serpiente
  48. function createFood()
  49. {
  50. food = {
  51. x: Math.round(Math.random() * (width - cellWidth) / cellWidth),
  52. y: Math.round(Math.random() * (height - cellWidth) / cellWidth),
  53.  
  54. };
  55. }
  56.  
  57. //Dibujamos la serpiente
  58. function paint()
  59. {
  60. context.fillStyle = "#ccc";
  61. context.fillRect(0, 0, width, height);
  62. context.strokeStyle = 'black';
  63. context.strokeRect(0, 0, width, height);
  64.  
  65. var nx = snake[0].x;
  66. var ny = snake[0].y;
  67.  
  68. if (d == "right") {
  69. nx++;
  70. } else if (d == "left") {
  71. nx--;
  72. } else if (d == "up") {
  73. ny--;
  74. } else if (d == "down") {
  75. ny++;
  76. }
  77.  
  78. if (nx == -1 || nx == width / cellWidth || ny == -1 || ny == height / cellWidth || checkCollision(nx, ny, snake)) {
  79. init();
  80. return;
  81. }
  82.  
  83. if(nx == food.x && ny == food.y) {
  84. var tail = {
  85. x: nx,
  86. y: ny
  87. function pla();
  88. };
  89. score++;
  90. createFood();
  91. } else {
  92. var tail = snake.pop();
  93.  
  94. tail.x = nx;
  95. tail.y = ny;
  96. }
  97.  
  98. snake.unshift(tail);
  99.  
  100. for(var i = 0; i < snake.length; i++) {
  101. var c = snake[i];
  102. paintCell(c.x, c.y);
  103. }
  104.  
  105. paintCell(food.x, food.y);
  106.  
  107. var scoreText = "Score: " + score;
  108.  
  109. context.fillText(scoreText, 5, height - 5);
  110. }
  111.  
  112. //Pintamos la celda
  113. function paintCell(x, y)
  114. {
  115. context.fillStyle = "red";
  116. context.fillRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
  117. context.strokeStyle = 'white';
  118. context.strokeRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
  119. }
  120.  
  121. //Verificiamos si hubo alguna colisión (si la hubo el juego se reinicia)
  122. function checkCollision(x, y, array)
  123. {
  124. for(var i = 0; i < array.length; i++)
  125. {
  126. if(array[i].x == x && array[i].y == y) {
  127. return true;
  128. }
  129. }
  130. return false;
  131. }
  132.  
  133. // Capturamos la pulsación de las teclas
  134. $(document).keydown(function(e) {
  135. var key = e.which;
  136.  
  137. if (key == "37" && d != "right") {
  138. d = "left";
  139. } else if (key == "38" && d != "down") {
  140. d = "up";
  141. } else if (key == "39" && d != "left") {
  142. d = "right";
  143. } else if (key == "40" && d != "up") {
  144. d = "down";
  145. }
  146. });
  147. });
  148.  

serpiente.html
Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.    <meta charset="utf-8">
  4. <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
  5. <script src="serpiente.js" type="text/javascript"></script>
  6.  
  7. .game
  8. {
  9. margin: 0 auto;
  10. width: 450px;
  11. }
  12. </style>
  13. </head>
  14.  
  15. <div class="game">
  16. <canvas id="snake" width="450" height="450"></canvas>
  17. </div>
  18. <audio controls autoplay loop>
  19.  <source src="horse.ogg" type="audio/ogg" >
  20.  <source src="horse.mp3" type="audio/mpeg">
  21. Your browser does not support the audio element.
  22. </audio>
  23. </body>
  24. </html>
  25.  

Gracias de antemano


En línea

Maurice_Lupin


Desconectado Desconectado

Mensajes: 356

GPS


Ver Perfil WWW
Re: Poner sonido a Snake HTML5
« Respuesta #1 en: 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 :D
Código
  1. var minim = new Minim();
  2. var audio1 = minim.loadFile("pac.mp3");
  3. audio1.play();
  4. //audio1.pause();
  5. //audio1.loop(); tambien hay mute
  6.  


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

Saludos.


En línea

Un error se comete al equivocarse.
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Poner sonido a Snake HTML5
« Respuesta #2 en: 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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
¿Como poner un sonido Wav como fondo de mi aplicacion?
Programación Visual Basic
TheGhost(Z) 7 3,508 Último mensaje 13 Noviembre 2013, 20:20 pm
por Danyfirex
juego SNAKE en C# « 1 2 »
.NET (C#, VB.NET, ASP)
lokot3 14 41,487 Último mensaje 2 Junio 2006, 19:39 pm
por SeniorX
Puedo poner codigos html5 en archivo php? ( no me funciona player )
Desarrollo Web
XXXXXX 3 4,649 Último mensaje 19 Junio 2010, 23:52 pm
por XXXXXX
[C] Juego snake
Programación C/C++
Dacan 4 4,958 Último mensaje 22 Marzo 2013, 05:32 am
por Dacan
Snake C++
Programación C/C++
paahca 0 1,478 Último mensaje 26 Noviembre 2015, 05:51 am
por paahca
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines