Connect 4 for 2 players

Gallery
1

Connect 4 game for 2 players:
www.gamespace.eu5.org/connect4

5 Likes
2

Thanks for sharing this!

One suggestion on the design. Rather than just flashing the winning row, it would be nice if you also exposed all the hidden moves so that players can see the board when a game ends.

You might also want to consider making the “hiding” optional, to also support fun play for younger players.

3

If there is hiding it doesn’t occur on the browser I am using (pale moon.) I suppose there could be a wait for key press before moving on to the next game. The idea is to churn out a lot of games that might hold some interest for 5 to 30 minutes for a website, and not worry about quality so much.
I’ll take your comment as a bug report and fix it later when I put the real web-site up in few months. I can’t actually install chrome on the piece of junk laptop I have and piece of junk Linux setup I have.

4

I see.

Yes, your bottom three rows are black, hiding the pieces played there. I assumed that was intentional to make the game harder.

54%20PM
Screen Shot 2019-04-06 at 9.50.54 PM.png1152Ă—1182 66.8 KB

Google Chrome Version 73.0.3683.86 (Official Build) (64-bit)

5

That’s a really odd bug!!!
I did go into the pixels array and mess about with the alpha channel of the blue front part.
That is so that the tokens can appear to fall behind it.
All the black parts should have been transformed to transparent.
Me look code.

6

Okay, I replaced the pixels array code with get()/set() code. Maybe there is something up with the pixelDensity() method.

  var transparent=[0,0,0,0];
  for(var i=0;i<560;i++)
    for(var j=0;j<480;j++){
       var c=boardgraphic.get(i,j);
       if(c[2]===0) boardgraphic.set(i,j,transparent);  // if not blue
    }
//boardgraphic.loadPixels();
//var d=boardgraphic.pixelDensity();
//for(var i=0;i<d*560*480*4;i+=4){
//  if(boardgraphic.pixels[i+2]==0) boardgraphic.pixels[i+3]=0;
//}
  boardgraphic.updatePixels();
7

works great now. all pieces visible at all times.