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.
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:
