...

View Full Version : Game problem



naranyra
07-28-2011, 07:19 PM
Hi,
i made a game,where you controll a paddle to bounce back a ball and it hits the bricks on top.
The problem is that my eventhandlers don't work after i've added delay function,to make a counter(counting from 3 to 1 before game starts).
Any tips?Is it scope problem?


var ballx = 100;
var bally = 100; //coord x and y,radius of a ball
var ballr = 10;
var recx;
var recy; //coord x and y,width and height of a paddle
var recw = 100;
var rech = 15;
var dx = 2; //x coord step for animated movement of ball
var dy = 2; //y coord step for animated movement of ball
var rx = 5; //x coord step for animated movement of paddle
var WIDTH; //width of main canvas
var HEIGHT; //height of main canvas
var ctx; //drawn shape
var leftDown = false;
var rightDown = false; //keyboard arrow buttons
var upDown = false;
var downDown = false;
var mouseXmin;
var mouseXmax;
var intervalId;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var y=4;

window.addEventListener("load",init,false); //event for loading main func
window.addEventListener("keydown",buttonpressed,false); //event for checking if button is pressed
window.addEventListener("keyup",buttonreleased,false); //event to check if button is released
window.addEventListener("mousemove",mousemoved,false); //event for controlling paddle with mouse movement

function init_mouse(){ //initialize coord for mouse movement

mouseXmin = document.getElementById('can').offsetLeft;
mouseXmax = mouseXmin + (WIDTH-recw); //doesn't work that pretty...check?

}

function init_bricks(){ //initialize bricks

NROWS = 5;
NCOLS = 3;
BRICKWIDTH = (WIDTH/NCOLS) - 1;
BRICKHEIGHT = 15;
PADDING = 1;

bricks = new Array(NROWS);
for(i=0; i<NROWS; i++){
bricks[i] = new Array(NCOLS);
for(j=0; j<NCOLS; j++){
bricks[i][j] = 1;
}
}
}

function mousemoved(e){ //function that enables movement of paddle with mouse

if(e.pageX > mouseXmin && e.pageX < mouseXmax) recx = e.pageX ;//- mouseXmin; <---why would you need that?Movement is bugyy! FIX:)

}

function buttonpressed(e){ //to check if any of keyboard arrow buttons are pressed

if(e.which==37) { leftDown = true; }
if(e.which==39) { rightDown = true; }
if(e.which==40) { upDown = true; }
if(e.which==38) { downDown = true; }

}

function buttonreleased(e){ //function to check if button up,down,left or right is released

if(e.which==37) { leftDown = false; }
if(e.which==39) { rightDown = false; }
if(e.which==40) { upDown = false; }
if(e.which==38) { downDown = false; }

}

function clear(){ //function to clear the stage

ctx.clearRect(0,0,800,600);

}

function circle(x,y,r){ //function to draw circle shape

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

}

function rect(x,y,w,h){ //function to draw rectangle shape

ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();

}

function checkforCoallision(){ //checks for borders of main canvas and if ball hits the paddle

if(ballx + dx > WIDTH-ballr || ballx + dx < ballr) dx = -dx;
if(bally + dy < ballr ) dy = -dy;
else if (bally + dy > HEIGHT - ballr){
if(ballx + ballr > recx && ballx + ballr < recx + recw)
dy = -dy;
else {clearInterval(intervalId); alert('Game Over,Baby!');} bounce();}

}

function draw(){ //function that draws the desired shapes and animates them

clear(); //clears the main canvas,so the animation would look smooth

checkforCoallision(); //checks for borders of main canvas and if ball hits the paddle

if(leftDown) recx -= rx; //enables movement of paddle right and left
if(rightDown) recx += rx;

for(i=0; i<NROWS; i++){ //drawing bricks
for(j=0; j<NCOLS; j++){
if(bricks[i][j] == 1) { //checking if brick exists
rect(j * (BRICKWIDTH+PADDING)+PADDING,i * (BRICKHEIGHT+PADDING) + PADDING, BRICKWIDTH, BRICKHEIGHT)
}
}
}

//have we hit a brick?
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(bally/rowheight);
col = Math.floor(ballx/colwidth);
//if so, reverse the ball and mark the brick as broken
if (bally < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
}

circle(ballx,bally,ballr);
rect(recx,recy,recw,rech);

ballx += dx;
bally += dy;

}



/* function init(){
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;

} */

function delay() {

if(y<=0) {
document.getElementById('content2').innerHTML = "<canvas id='can' width='300' height='300'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>";
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;
}
else {
Object = document.getElementById('content2');
y = y - 1;
Object.innerHTML = "<div style='text-align:center;width:25em;margin: 0px auto;height:100px;position:absolute;top:50%;margin-top:-50px;'>"+y+"</div>";
setTimeout("delay()", 1000);}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum