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