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
$(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
<!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
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
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.
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 (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 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement)