Breakout in CSS/JavaScript

c0dex10h

New Member
Messages
13
Reaction score
0
Points
1
A little breakout game done in CSS/JavaScript. Just copy the following code, and save it as an html file.
Click the mouse to start / pause the game.

EDIT: Updated code. Should now work with firefox. Sorry about that.

Enjoy. :)
HTML:
<!-- breakout in CSS/JavaScript - www.c0de.it -->
<html>
<head></head>
<body>
<center>
<div id="box" onmousemove="movemouse(event)">
<style>
.box{cursor:default; position:relative; background-color:#888888; width:400px; height:300px; overflow:hidden; border-radius:5px 5px 20px 20px; border:2px solid black; box-shadow:inset 5px 5px 8px -2px #444444;}
.brick{position:absolute; border-radius:6px; border:2px solid #000000; width:60px; height:20px; box-shadow:5px 5px 8px -2px #444444;}
.paddle{position:absolute; top:270px; border-radius:20px; border:2px solid #000000; background-color:#00FF00; width:60px; height:15px; box-shadow:5px 5px 8px -2px #444444; z-index:11;}
.ball{position:absolute; top:150px; left:190px; z-index:1; border-radius:10px; border:1px solid #000000; background-color:#FFFFFF; width:20px; height:20px; box-shadow:5px 5px 8px -2px #444444;}
.info{color:white; background-color:transparent; font-family:arial; font-size:20;}
.message{background-color:transparent; position:relative; top:170px; width:100%; z-index:2; font-size:64px; font-family:arial; color:#CCCCCC; text-align:center;}
</style>
<script>
var _box = document.getElementById('box');
    _box.className = "box";
    _box.onclick = mouseclick;
var _info = document.createElement("table");
    _info.style.width = "90%";
    _box.appendChild(_info);
var _inforow = document.createElement("tr");
    _info.appendChild(_inforow);
var _score = document.createElement("td");
    _score.className = "info";
    _score.style.textAlign = "left";
    _inforow.appendChild(_score);
var _lives = document.createElement("td");
    _lives.className = "info";
    _lives.style.textAlign = "right";
    _inforow.appendChild(_lives);
var _paddle = document.createElement("div");
    _paddle.className = "paddle";
    _box.appendChild(_paddle);
var _ball = document.createElement("div");
    _ball.className = "ball";
    _box.appendChild(_ball);
var _message = document.createElement("div");
    _message.className = "message";
    _message.innerHTML = "Level: 1";
    _box.appendChild(_message);
var bricks = new Array(20);
for (var j = 0; j < bricks.length; j++) {
    var temp = document.createElement("div");
        temp.id = "b"+j;
        temp.className = "brick";
        _box.appendChild(temp);
}
var score = 0;
var lives = 3;
var level = 1;
var speed = 1;
var broken = 0;
var posX = 0;
var bx = 190;
var by = 150;
var bxv = 0;
var byv = 5;
var pause = 1;
var gameover = 0;
reloadbricks();
updateinfo();
setInterval('draw()',1000/30)

//------- end of main entry point --------//

function movemouse(evt){
  posX = evt.pageX || (document.documentElement && document.documentElement.clientX) || (window.event && window.event.clientX);
  posX = posX - _box.offsetLeft - 30;
  if (posX < 0) { posX = 0 }
  if (posX > 336) { posX = 336 }
  _paddle.style.left=posX+"px";
}

function reloadbricks(){
  var x = 0;
  var y = 0;
  for (var j = 0; j < bricks.length; j++) {
    var a = new Array(3);
    a[0] = 30+(x*68); // X
    a[1] = 30+(y*28); // Y
    a[2] = "rgb("+(Math.round(Math.random()*255)+0)+","+(Math.round(Math.random()*255)+0)+","+(Math.round(Math.random()*255)+0)+")"; // C
    x++; if(x>4) { x=0; y++; }
    bricks[j] = a;
  }
  for (var j = 0; j < bricks.length; j++) {
    brickid$ = "b"+j;
    document.getElementById(brickid$).style.left = bricks[j][0];
    document.getElementById(brickid$).style.top = bricks[j][1];
    document.getElementById(brickid$).style.backgroundColor = bricks[j][2];
  }
}

function mouseclick(){
  if (gameover != 1){
    pause = 1 - pause;
    _message.innerHTML = "PAUSED";
    if (pause) {
      _message.style.visibility = "visible";
    }
    else {
      _message.style.visibility = "hidden";
    }
  }
  else {
    score = 0;
    lives = 3;
    level = 1;
    speed = 1;
    broken = 0;
    posX = 0;
    bx = 190;
    by = 150;
    bxv = 0;
    byv = 5;
    pause = 1;
    gameover = 0;
    _message.innerHTML = "Level: "+level;
    updateinfo();
    reloadbricks();
  }
}

function draw() {
  if (pause != 1){
    bx = bx + (bxv*speed);
    by = by + (byv*speed);
    if ((bx<0)&(bxv<0)) {bxv=-bxv}
    if ((bx>378)&(bxv>0)) {bxv=-bxv}
    if ((by>247)&(by<270)){
      if ((bx > posX-22) & (bx < posX+60) &(byv>0)) {
        byv=-byv;
        bxv =  ((bx - posX) - 22)/5;
      }
    }
    if (by>300){
      if (lives==0) {
        _message.innerHTML="Game Over";
        _message.style.visibility="visible";
        gameover = 1;
      }
      else {
        lives = lives - 1;
        by = 150;
        bx = 190;
        bxv = 0;
        pause = 1;
        _message.innerHTML="Level: "+level;
        _message.style.visibility="visible";
      }
    }
    if (by<0){byv=-byv}
    for (var j = 0; j < bricks.length; j++){
    brickid$ = "b"+j;
      if ( (bx > bricks[j][0]-21) & (bx < bricks[j][0] + 65) & (by > bricks[j][1] -22) & (by < bricks[j][1] + 25) ) {
        if ((byv<0) & (by > bricks[j][1])) {byv=-byv;}
        else {
          if ((bxv>0) & (bx < bricks[j][0])) {bxv=-bxv;}
          else {
            if ((bxv<0) & (bx > bricks[j][0])) {bxv=-bxv;}
            else {
              if ((byv>0) & (by < bricks[j][1])) {byv=-byv; }
            }
          }
        }
        score=score+1;
        document.getElementById(brickid$).style.left = 10000;
        bricks[j][0]=-1000;
        bricks[j][1]=-1000;
        bricks[j][2]=0;
        broken=broken+1;
        if(broken==20) {
          level=level+1;
          if (level<20) { speed = 1+(level/10) }
          else { speed = 1+(19/10) }
          broken=0;
          bxv = 0;
          byv = 5;
          by = 150;
          bx = 190;
          pause = 1;
          _message.innerHTML="Level: "+level;
          _message.style.visibility="visible";
          reloadbricks();
        }
      }
    }
    _ball.style.left = bx + "px";
    _ball.style.top = by + "px";
    updateinfo();
  }
}

function updateinfo() {
  _score.innerHTML="Score: "+score;
  var lives$ = "";
  for (i=0; i<lives; i++) {lives$=lives$+" O"}
  _lives.innerHTML = lives$;
}
</script>
</div>
</center>
</body>
</html>
<!-- c0de the planet -->
 
Last edited:

c0dex10h

New Member
Messages
13
Reaction score
0
Points
1
I've updated the code (a bit of cleanup) and it should now work with Firefox. :)
 

fretwizz

Member
Messages
106
Reaction score
3
Points
18
I'd like to find the easiest thing to build that actually requires the use of objects in javascript.
 

rick

New Member
Messages
7
Reaction score
1
Points
3
Really like this - the script is much shorter than you'd expect and game plays really smoothly

@fretwizz A game is a good thing to do if you're looking for something to program using js objects - with a game you can make it as simple or complex as you want
 
Top