Estoy tratando de adaptar un código que encontré googleando para el juego Pong. Lo que intento es remplazar la pelota dibujada por una imagen de una pelota en imagen. Buscando en Internet sugieren que use el siguiente código:
var img = new Image(200,200);
img.src = "img.jpg";
contexto.clearRect(0,0,700,500);
contexto.drawImage(img, x, y);
El cual inserto casi al final del código en la sección "ball" pero esto no me resulta, y manda error. Todo falla cuando hago la modificación en pong js. al agregar esta linea ctx.drawImage(img, x, y);
.
Éste es el archivo js llamado pong.js
//=============================================================================
// PONG
//=============================================================================
Pong = {
Defaults: {
width: 640, // logical canvas width (browser will scale to physical canvas size - which is controlled by @media css queries)
height: 480, // logical canvas height (ditto)
wallWidth: 10,
balls: 1,
stats: true
},
//-----------------------------------------------------------------------------
initialize: function(runner, cfg) {
this.cfg = cfg;
this.runner = runner;
this.width = runner.width;
this.height = runner.height;
this.court = Object.construct(Pong.Court, this);
this.balls = this.constructBalls();
this.runner.start();
},
constructBalls: function() {
var balls = [];
for(var n = 0 ; n < this.cfg.balls ; n++)
balls.push(Object.construct(Pong.Ball, this));
return balls;
},
update: function(dt) {
for(var n = 0 ; n < this.balls.length ; n++)
this.balls[n].update(dt);
},
draw: function(ctx) {
this.court.draw(ctx);
for(var n = 0 ; n < this.balls.length; n++)
this.balls[n].draw(ctx);
},
//==========
// COURT
//=============================================================================
Court: {
initialize: function(pong) {
var w = pong.width;
var h = pong.height;
var ww = pong.cfg.wallWidth;
this.walls = [];
this.walls.push({x: 0, y: 0, width: w, height: ww});
this.walls.push({x: 0, y: h - ww, width: w, height: ww});
this.walls.push({x: 0, y: 0, width: ww, height: h});
this.walls.push({x: w-ww, y: 0, width: ww, height: h});
},
draw: function(ctx) {
ctx.fillStyle = '#96ef10';
for(var n = 0 ; n < this.walls.length ; n++)
ctx.fillRect(this.walls[n].x, this.walls[n].y, this.walls[n].width, this.walls[n].height);
}
},
// BALL
//=============================================================================
Ball: {
initialize: function(pong) {
this.pong = pong;
this.radius = Game.random(1, 30);
this.minX = pong.cfg.wallWidth + this.radius;
this.minY = pong.cfg.wallWidth + this.radius;
this.maxX = pong.width - pong.cfg.wallWidth - this.radius;
this.maxY = pong.height - pong.cfg.wallWidth - this.radius;
this.x = Game.random(this.minX, this.maxX);
this.y = Game.random(this.minY, this.maxY);
this.dx = (this.maxX - this.minX) / (Game.random(1, 10) * Game.randomChoice(1, -1));
this.dy = (this.maxY - this.minY) / (Game.random(1, 10) * Game.randomChoice(1, -1));
},
update: function(dt, leftPaddle, rightPaddle) {
this.x = this.x + (this.dx * dt);
this.y = this.y + (this.dy * dt);
if ((this.dx > 0) && (this.x > this.maxX)) {
this.x = this.maxX;
this.dx = -this.dx;
}
else if ((this.dx < 0) && (this.x < this.minX)) {
this.x = this.minX;
this.dx = -this.dx;
}
if ((this.dy > 0) && (this.y > this.maxY)) {
this.y = this.maxY;
this.dy = -this.dy;
}
else if ((this.dy < 0) && (this.y < this.minY)) {
this.y = this.minY;
this.dy = -this.dy;
}
},
draw: function(ctx) {
var w = h = this.radius * 2;
var img = new Image(200,200);
img.src = "pelota.png";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
ctx.fill();
// Si pongo esta linea ocurre el error /// ctx.drawImage(img, x, y);
ctx.closePath();
}
}
}; // Pong
Aquí dejo el código completo. Incluye el archivo pong.js de arriba y un segundo archivo JS llamado game.js que es un poco largo, pero este funciona correctamente:
/**** GAME.JS *****/
/*
Pong implemented with HTML features.
Version: 1.1
Author: David Laurell <david@laurell.nu>
License: GPLv3
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var game, canvas, ctx, soundLeft, soundRight, soundWall, gameTimeLast;
function init() {
canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");
soundLeft = document.getElementById("bounceLeft");
soundRight = document.getElementById("bounceRight");
soundWall = document.getElementById("bounceWall");
game = {
player : {
y : canvas.height / 2,
score : 0
},
computer : {
y : canvas.height / 2,
score : 0,
speed: 2
},
ball : {
x : canvas.width / 2,
y : canvas.height / 2,
vx : Math.round(Math.random()) ? 1 : -1,
vy : Math.random() * 4 - 2,
bounces : 0,
radius : 3,
reset: function() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vy = Math.random() * 4 - 2;
},
multiplier: .2,
maxspeed: 5
},
playerHeight : 80,
playerWidth : 4,
pause : false,
sound: true
};
document.onmousemove = moveMouse;
gameTimeLast = new Date();
update();
}
function moveMouse(e) {
var y;
if(!e) {
e = window.event;
y = e.event.offsetY;
}
else {
y = e.pageY;
}
y -= canvas.offsetTop;
if(y - game.playerHeight/2 >= 0 && y + game.playerHeight/2 <= canvas.height)
game.player.y = y;
}
function playSound(snd) {
if(game.sound) {
try {
if (!snd.paused) {
// Pause and reset it
snd.pause();
snd.currentTime = 0;
}
snd.play();
}
catch(e) {}
}
}
function update() {
dateTime = new Date();
gameTime = (dateTime - gameTimeLast);
if(gameTime < 0)
gameTime = 0;
moveAmount = gameTime > 0 ? gameTime / 10 : 1;
if (!game.pause) {
/* Move cpu player */
if(game.computer.y + 20 < game.ball.y && game.computer.y + game.playerHeight/2 <= canvas.height)
game.computer.y += game.computer.speed * moveAmount;
else if(game.computer.y - 20 > game.ball.y && game.computer.y - game.playerHeight/2 >= 0)
game.computer.y -= game.computer.speed * moveAmount;
/* Change direction of ball when hitting a wall */
if (game.ball.y + game.ball.radius > canvas.height
|| game.ball.y - game.ball.radius < 0) {
playSound(soundWall);
if(game.ball.y <= game.ball.radius)
game.ball.y = game.ball.radius;
else
game.ball.y = canvas.height - game.ball.radius;
game.ball.vy *= -1;
}
/* checking collision between ball and player */
if (game.ball.x + game.ball.radius >= canvas.width - game.playerWidth) {
if (game.ball.y + game.ball.radius >= game.player.y - game.playerHeight / 2
&& game.ball.y + game.ball.radius <= game.player.y + game.playerHeight / 2) {
playSound(soundRight);
if(game.ball.vx <= game.ball.maxspeed) {
game.ball.vx += game.ball.multiplier;
}
changeBallDirection(game.player);
} else {
game.computer.score++;
document.getElementById("computerScore").innerHTML = game.computer.score;
game.ball.reset();
game.ball.vx = -1;
}
}
/* checking collision between ball and cpu */
else if(game.ball.x - game.ball.radius <= game.playerWidth) {
if (game.ball.y + game.ball.radius >= game.computer.y - game.playerHeight / 2
&& game.ball.y + game.ball.radius <= game.computer.y + game.playerHeight / 2) {
playSound(soundLeft);
if(game.ball.vx >= -game.ball.maxspeed) {
game.ball.vx -= game.ball.multiplier;
}
changeBallDirection(game.computer);
} else {
game.player.score++;
document.getElementById("playerScore").innerHTML = game.player.score;
game.ball.reset();
game.ball.vx = 1;
}
}
game.ball.x += game.ball.vx * moveAmount;
game.ball.y += game.ball.vy * moveAmount;
}
draw();
setTimeout(update,1000/30);
gameTimeLast = dateTime;
}
function changeBallDirection(player) {
if(player.y > game.ball.y)
game.ball.vy -= (player.y - game.ball.y) / game.playerHeight * game.ball.maxspeed;
else if(player.y < game.ball.y)
game.ball.vy += (game.ball.y - player.y) / game.playerHeight * game.ball.maxspeed;
game.ball.vx *= -1;
}
/**
* Draw everything in the canvas
*/
function draw() {
if (!game.pause) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
/*
var bgFade = ctx.createLinearGradient(0,0,0,canvas.height);
bgFade.addColorStop(0, '#000');
bgFade.addColorStop(1, '#211');
ctx.fillStyle = bgFade;
ctx.fillRect(0, 0, canvas.width, canvas.height);
*/
ctx.fillStyle = "rgb(64,64,64)";
var size = 3;
for(var y=0;y<canvas.height;y+=size*3) {
ctx.fillRect(canvas.width / 2 - size/2, y, size, size);
}
// left player
ctx.fillStyle = "rgba(128,128,128,.8)";
ctx.fillRect(0, game.computer.y - game.playerHeight / 2,
game.playerWidth, game.playerHeight);
// right player
ctx.fillRect(canvas.width - game.playerWidth, game.player.y
- game.playerHeight / 2, game.playerWidth, game.playerHeight);
ctx.fillStyle = "rgba(192,192,192,8)";
ctx.fillRect(game.ball.x - game.ball.radius, game.ball.y
- game.ball.radius, game.ball.radius * 2, game.ball.radius * 2);
}
}
function intro() {
var playButton = document.getElementById('playButton');
playButton.onclick = function() {
document.getElementById('titleScreen').style.display = "none";
document.getElementById('playScreen').style.display = "block";
init();
}
var pauseButton = document.getElementById('pauseButton');
pauseButton.onclick = function() {
if (!game.pause) {
game.pause = true;
this.innerHTML = "Continue";
document.getElementById('pauseText').style.display = "block";
}
else {
game.pause = false;
this.innerHTML = "Pause";
document.getElementById('pauseText').style.display = "none";
}
}
var soundButton = document.getElementById('soundButton');
soundButton.onclick = function() {
if (!game.sound) {
game.sound = true;
this.innerHTML = "Turn off sound";
}
else {
game.sound = false;
this.innerHTML = "Turn on sound";
}
}
}
intro();
/**** PONG.JS *****/
//=============================================================================
// PONG
//=============================================================================
Pong = {
Defaults: {
width: 640, // logical canvas width (browser will scale to physical canvas size - which is controlled by @media css queries)
height: 480, // logical canvas height (ditto)
wallWidth: 10,
balls: 1,
stats: true
},
//-----------------------------------------------------------------------------
initialize: function(runner, cfg) {
this.cfg = cfg;
this.runner = runner;
this.width = runner.width;
this.height = runner.height;
this.court = Object.construct(Pong.Court, this);
this.balls = this.constructBalls();
this.runner.start();
},
constructBalls: function() {
var balls = [];
for(var n = 0 ; n < this.cfg.balls ; n++)
balls.push(Object.construct(Pong.Ball, this));
return balls;
},
update: function(dt) {
for(var n = 0 ; n < this.balls.length ; n++)
this.balls[n].update(dt);
},
draw: function(ctx) {
this.court.draw(ctx);
for(var n = 0 ; n < this.balls.length; n++)
this.balls[n].draw(ctx);
},
//==========
// COURT
//=============================================================================
Court: {
initialize: function(pong) {
var w = pong.width;
var h = pong.height;
var ww = pong.cfg.wallWidth;
this.walls = [];
this.walls.push({x: 0, y: 0, width: w, height: ww});
this.walls.push({x: 0, y: h - ww, width: w, height: ww});
this.walls.push({x: 0, y: 0, width: ww, height: h});
this.walls.push({x: w-ww, y: 0, width: ww, height: h});
},
draw: function(ctx) {
ctx.fillStyle = '#96ef10';
for(var n = 0 ; n < this.walls.length ; n++)
ctx.fillRect(this.walls[n].x, this.walls[n].y, this.walls[n].width, this.walls[n].height);
}
},
// BALL
//=============================================================================
Ball: {
initialize: function(pong) {
this.pong = pong;
this.radius = Game.random(1, 30);
this.minX = pong.cfg.wallWidth + this.radius;
this.minY = pong.cfg.wallWidth + this.radius;
this.maxX = pong.width - pong.cfg.wallWidth - this.radius;
this.maxY = pong.height - pong.cfg.wallWidth - this.radius;
this.x = Game.random(this.minX, this.maxX);
this.y = Game.random(this.minY, this.maxY);
this.dx = (this.maxX - this.minX) / (Game.random(1, 10) * Game.randomChoice(1, -1));
this.dy = (this.maxY - this.minY) / (Game.random(1, 10) * Game.randomChoice(1, -1));
},
update: function(dt, leftPaddle, rightPaddle) {
this.x = this.x + (this.dx * dt);
this.y = this.y + (this.dy * dt);
if ((this.dx > 0) && (this.x > this.maxX)) {
this.x = this.maxX;
this.dx = -this.dx;
}
else if ((this.dx < 0) && (this.x < this.minX)) {
this.x = this.minX;
this.dx = -this.dx;
}
if ((this.dy > 0) && (this.y > this.maxY)) {
this.y = this.maxY;
this.dy = -this.dy;
}
else if ((this.dy < 0) && (this.y < this.minY)) {
this.y = this.minY;
this.dy = -this.dy;
}
},
draw: function(ctx) {
var w = h = this.radius * 2;
var img = new Image(200,200);
img.src = "pelota.png";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
ctx.fill();
ctx.clearRect(0,0,700,500);
// Si pongo esta linea ocurre el error /// ctx.drawImage(img, x, y);
ctx.closePath();
}
}
}; // Pong
/**** CODIGO PARA INICIAR EL JUEGO ****/
Game.ready(function() {
Game.start('game', Pong);
});
body { background-image: url("cancha.jpg"); color: #AAA; font-size: 12pt; padding: 1em; }
#unsupported { border: 1px solid yellow; color: black; background-color: #FFFFAD; padding: 2em; margin: 1em; display: inline-block; }
#sidebar { width: 18em; height: 40em; float: left; font-size: 0.825em; background-color: #333; border: 1px solid white; padding: 1em; }
#sidebar h2 { color: white; text-align: center; margin: 0; }
#sidebar .parts { padding-left: 1em; list-style-type: none; margin-bottom: 2em; text-align: right; }
#sidebar .parts li a { color: white; text-decoration: none; }
#sidebar .parts li a:visited { color: white; }
#sidebar .parts li a:hover { color: white; text-decoration: underline; }
#sidebar .parts li a.selected { color: #F08010; }
#sidebar .parts li a i { color: #AAA; }
#sidebar .parts li a.selected i { color: #F08010; }
#sidebar .settings { line-height: 1.2em; height: 1.2em; text- align: right; }
#sidebar .settings.size { }
#sidebar .settings.speed { margin-bottom: 1em; }
#sidebar .settings label { vertical-align: middle; }
#sidebar .settings input { vertical-align: middle; }
#sidebar .settings select { vertical-align: middle; }
#sidebar .description { margin-bottom: 2em; }
#sidebar .description b { font-weight: normal; color: #FFF; }
@media screen and (min-width: 0px) {
#sidebar { display: none; }
#game { display: block; width: 480px; height: 360px; margin: 0 auto; }
}
@media screen and (min-width: 800px) {
#game { width: 640px; height: 480px; }
}
@media screen and (min-width: 1000px) {
#sidebar { display: block; }
#game { margin-left: 18em; }
}
@media screen and (min-width: 1200px) {
#game { width: 800px; height: 600px; }
}
@media screen and (min-width: 1600px) {
#game { width: 1024px; height: 768px; }
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<div id="sidebar">
<div class='description'>
<p>
Using the Game.Runner from the previous section. You can build a simple animation
by implementing the <b>update()</b> and <b>draw()</b> methods.
</p>
<p>
Here are some bouncing balls
</p>
</div>
</div>
<canvas id="game">
<div id="unsupported">
Sorry, this example cannot be run because your browser does not support the <canvas> element
</div>
</canvas>
x
ey
no las has definido en ningún momento. Intenta usandothis.x
ythis.y
. PD: Revisa bien el código incluido en la pregunta, porque se te ha olvidado incluir tugame.js