skip to main |
skip to sidebar
Para poner el famoso juego de tetris
utilizando jQuery
y tetris
.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tetris with jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tetris.js"></script>
<link rel="stylesheet" type="text/css" href="tetris.css"/>
</head>
<body>
<h1>Tetris with jQuery</h1>
<div id="tetris">
<div id="grid">
<table>
<tr><td id="a1"></td><td id="a2"></td><td id="a3"></td><td id="a4"></td><td id="a5"></td><td id="a6"></td><td id="a7"></td><td id="a8"></td><td id="a9"></td><td id="a10"></td></tr>
<tr><td id="b1"></td><td id="b2"></td><td id="b3"></td><td id="b4"></td><td id="b5"></td><td id="b6"></td><td id="b7"></td><td id="b8"></td><td id="b9"></td><td id="b10"></td></tr>
<tr><td id="c1"></td><td id="c2"></td><td id="c3"></td><td id="c4"></td><td id="c5"></td><td id="c6"></td><td id="c7"></td><td id="c8"></td><td id="c9"></td><td id="c10"></td></tr>
<tr><td id="d1"></td><td id="d2"></td><td id="d3"></td><td id="d4"></td><td id="d5"></td><td id="d6"></td><td id="d7"></td><td id="d8"></td><td id="d9"></td><td id="d10"></td></tr>
<tr><td id="e1"></td><td id="e2"></td><td id="e3"></td><td id="e4"></td><td id="e5"></td><td id="e6"></td><td id="e7"></td><td id="e8"></td><td id="e9"></td><td id="e10"></td></tr>
<tr><td id="f1"></td><td id="f2"></td><td id="f3"></td><td id="f4"></td><td id="f5"></td><td id="f6"></td><td id="f7"></td><td id="f8"></td><td id="f9"></td><td id="f10"></td></tr>
<tr><td id="g1"></td><td id="g2"></td><td id="g3"></td><td id="g4"></td><td id="g5"></td><td id="g6"></td><td id="g7"></td><td id="g8"></td><td id="g9"></td><td id="g10"></td></tr>
<tr><td id="h1"></td><td id="h2"></td><td id="h3"></td><td id="h4"></td><td id="h5"></td><td id="h6"></td><td id="h7"></td><td id="h8"></td><td id="h9"></td><td id="h10"></td></tr>
<tr><td id="i1"></td><td id="i2"></td><td id="i3"></td><td id="i4"></td><td id="i5"></td><td id="i6"></td><td id="i7"></td><td id="i8"></td><td id="i9"></td><td id="i10"></td></tr>
<tr><td id="j1"></td><td id="j2"></td><td id="j3"></td><td id="j4"></td><td id="j5"></td><td id="j6"></td><td id="j7"></td><td id="j8"></td><td id="j9"></td><td id="j10"></td></tr>
<tr><td id="k1"></td><td id="k2"></td><td id="k3"></td><td id="k4"></td><td id="k5"></td><td id="k6"></td><td id="k7"></td><td id="k8"></td><td id="k9"></td><td id="k10"></td></tr>
<tr><td id="l1"></td><td id="l2"></td><td id="l3"></td><td id="l4"></td><td id="l5"></td><td id="l6"></td><td id="l7"></td><td id="l8"></td><td id="l9"></td><td id="l10"></td></tr>
<tr><td id="m1"></td><td id="m2"></td><td id="m3"></td><td id="m4"></td><td id="m5"></td><td id="m6"></td><td id="m7"></td><td id="m8"></td><td id="m9"></td><td id="m10"></td></tr>
<tr><td id="n1"></td><td id="n2"></td><td id="n3"></td><td id="n4"></td><td id="n5"></td><td id="n6"></td><td id="n7"></td><td id="n8"></td><td id="n9"></td><td id="n10"></td></tr>
<tr><td id="o1"></td><td id="o2"></td><td id="o3"></td><td id="o4"></td><td id="o5"></td><td id="o6"></td><td id="o7"></td><td id="o8"></td><td id="o9"></td><td id="o10"></td></tr>
<tr><td id="p1"></td><td id="p2"></td><td id="p3"></td><td id="p4"></td><td id="p5"></td><td id="p6"></td><td id="p7"></td><td id="p8"></td><td id="p9"></td><td id="p10"></td></tr>
<tr><td id="q1"></td><td id="q2"></td><td id="q3"></td><td id="q4"></td><td id="q5"></td><td id="q6"></td><td id="q7"></td><td id="q8"></td><td id="q9"></td><td id="q10"></td></tr>
<tr><td id="r1"></td><td id="r2"></td><td id="r3"></td><td id="r4"></td><td id="r5"></td><td id="r6"></td><td id="r7"></td><td id="r8"></td><td id="r9"></td><td id="r10"></td></tr>
</table>
</div>
<div id="next">
<table>
<tr><td id="x00"></td><td id="x10"></td><td id="x20"></td><td id="x30"></td></tr>
<tr><td id="x01"></td><td id="x11"></td><td id="x21"></td><td id="x31"></td></tr>
<tr><td id="x02"></td><td id="x12"></td><td id="x22"></td><td id="x32"></td></tr>
<tr><td id="x03"></td><td id="x13"></td><td id="x23"></td><td id="x33"></td></tr>
</table>
</div>
<div id="stats">
<div>Level: <span id="level">1</span></div>
<div>Lines: <span id="lines">0</span></div>
<div>Score: <span id="score">0</span></div>
</div>
<div id="cmd">
<input id="start" type="button" value="start"/><br/>
<input id="stop" type="button" value="stop" disabled="disabled"/>
</div>
<div id="info">
<div>Left: J</div>
<div>Right: L</div>
<div>Rotate: I</div>
<div>Down: K</div>
</div>
</div>
<div id="overlay"></div>
<a id="src" href="tetris.js">Source code</a>
</body>
</html>
Tetris.js
/*
* Tetris with jQuery - 2006/06/25
* see: http://en.wikipedia.org/wiki/Category:Tetris
* http://en.wikipedia.org/wiki/Tetris_Worlds
* be careful: http://en.wikipedia.org/wiki/Tetris_effect
* Copyright (c) 2006 Franck Marcia
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
var tetris = {
// Shape colors
colors: ['#eaeaea','#ff6600','#ffff00','#0000ff',
'#cc00ff','#00ff00','#66ccff','#ff0000'],
// Starting line for each shape
startAt: [0, -1, -1, -1, 0, -1, -1, 0],
// Points per number of lines
points: [0, 40, 100, 300, 1200],
// Combination of each shape
shapes: [
// none
[],
// I
[[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]]],
// T
[[[0,0,0,0],[1,1,1,0],[0,1,0,0],[0,0,0,0]],
[[0,1,0,0],[1,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,1,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],
// L
[[[0,0,0,0],[1,1,1,0],[1,0,0,0],[0,0,0,0]],
[[1,1,0,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[0,1,1,0],[0,0,0,0]]],
// J
[[[1,0,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,1,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,0,0,0],[1,1,1,0],[0,0,1,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[1,1,0,0],[0,0,0,0]]],
// Z
[[[0,0,0,0],[1,1,0,0],[0,1,1,0],[0,0,0,0]],
[[0,0,1,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],
// S
[[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]]],
// O
[[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]]],
// Pre-load elements of the grid
init: function() {
var i, j, k;
tetris.cells = [];
for (i = -3; i < 18; ++i) {
tetris.cells[i] = [];
for (j = 1; j < 11; ++j) {
k = String.fromCharCode(i + 97);
tetris.cells[i][j] = $(['#', k, j].join(''));
}
}
tetris.bound = $.browser == 'msie' ? '#tetris' : window;
},
// Initialize to start the game
start: function() {
// Stats
tetris.level = 0;
tetris.lines = 0;
tetris.score = 0;
// Array which contains data of the grid
tetris.grid = [
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]];
$('#grid td').css('backgroundColor', tetris.colors[0]);
$('#start').unclick(tetris.start).val('pause').click(tetris.pause);
$('#stop').set('disabled', false);
$(tetris.bound).keypress(tetris.key);
tetris.next = tetris.newShape();
tetris.shift();
tetris.duration = 600;
tetris.refresh();
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration);
},
// Define the action to be fired depending on key entry
key: function(e) {
switch(e.charCode || e.keyCode) {
case 74: case 106: tetris.moveLeft(); break; // J
case 76: case 108: tetris.moveRight(); break; // L
case 75: case 107: tetris.moveDown(); break; // K
case 73: case 105: tetris.rotate(); break; // I
}
return false;
},
// Generate an random shape
newShape: function() {
var r = 1 + Math.random() * 7;
return parseInt(r > 7 ? 7 : r, 10);
},
// Define then draw the next shape
setNext: function() {
var i, j, s, c, d, n = tetris.colors[0];
tetris.next = tetris.newShape();
s = tetris.shapes[tetris.next][0];
c = tetris.colors[tetris.next];
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
d = s[i][j] ? c : n;
$(['#x', j, i].join('')).css('backgroundColor', d);
}
}
},
// The next shape becomes the current one; reset coordinates
shift: function() {
tetris.cur = tetris.next;
tetris.x = tetris.x0 = 4;
tetris.y = tetris.startAt[tetris.cur];
tetris.y0 = tetris.y - 2;
tetris.r = tetris.r0 = 0;
tetris.curShape = tetris.shapes[tetris.cur];
if (tetris.canGo(0, tetris.x, tetris.y)) {
tetris.setNext();
return true;
}
return false;
},
// Pause the game
pause: function() {
$(tetris.bound).unkeypress(tetris.key);
window.clearInterval(tetris.timer);
tetris.timer = null;
$('#start').unclick(tetris.pause).val('resume').click(tetris.resume);
},
// Resume the game
resume: function() {
$(tetris.bound).keypress(tetris.key);
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration);
$('#start').unclick(tetris.resume).val('pause').click(tetris.pause);
},
// Stop the game
gameOver: function() {
var i, j;
// Manage buttons
if (tetris.timer) {
$(tetris.bound).unkeypress(tetris.key);
window.clearInterval(tetris.timer);
tetris.timer = null;
$('#start').unclick(tetris.pause).val('start').click(tetris.start);
} else {
$('#start').unclick(tetris.resume).val('start').click(tetris.start);
}
$('#stop').set('disabled', true);
// Draw everything in white
for (i = 0; i < 18; ++i) {
for (j = 1; j < 11; ++j) {
if (tetris.grid[i][j]) {
tetris.cells[i][j].css('backgroundColor', '#ffffff');
}
}
}
tetris.draw(tetris.r0, tetris.x0, tetris.y0, '#ffffff');
},
// Check overlays
canGo: function(r, x, y) {
var i, j;
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[r][j][i] && tetris.grid[y + j] &&
tetris.grid[y + j][x + i]) {
return false;
}
}
}
return true;
},
// Move the current shape to the left
moveLeft: function() {
if (tetris.canGo(tetris.r, tetris.x - 1, tetris.y)) {
--tetris.x;
tetris.refresh();
}
},
// Move the current shape to the right
moveRight: function() {
if (tetris.canGo(tetris.r, tetris.x + 1, tetris.y)) {
++tetris.x;
tetris.refresh();
}
},
// Rotate the current shape
rotate: function() {
var r = tetris.r == tetris.curShape.length - 1 ? 0 : tetris.r + 1;
if (tetris.canGo(r, tetris.x, tetris.y)) {
tetris.r0 = tetris.r;
tetris.r = r;
tetris.refresh();
}
},
// Move down the current shape
moveDown: function() {
if (tetris.canGo(tetris.r, tetris.x, tetris.y + 1)) {
++tetris.y;
tetris.refresh();
} else {
tetris.touchDown();
}
},
// The current shape touches down
touchDown: function() {
var i, j, k, r, f;
// mark the grid
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[tetris.r][j][i] &&
tetris.grid[tetris.y + j]) {
tetris.grid[tetris.y + j][tetris.x + i] = tetris.cur;
}
}
}
// search complete lines
f = 0;
for (i = 17, k = 17; i > -1 && f < 4; --i, --k) {
if (tetris.grid[i].join('').indexOf('0') == -1) {
// Complete lines become white
for (j = 1; j < 11; ++j) {
tetris.cells[k][j].css('backgroundColor', '#ffffff');
}
++f;
for (j = i; j > 0; --j) {
tetris.grid[j] = tetris.grid[j - 1].concat();
}
++i;
}
}
// animate
if (f) {
window.clearInterval(tetris.timer);
tetris.timer = window.setTimeout(function(){tetris.after(f);}, 100);
}
// try to continue
if (tetris.shift()) {
tetris.refresh();
} else {
tetris.gameOver();
}
},
// Finish the touchdown process
after: function(f) {
var i, j, l = (tetris.level < 20 ? tetris.level : 20) * 25;
// stats
tetris.lines += f;
if (tetris.lines % 10 === 0) {
tetris.level = tetris.lines / 10;
}
window.clearTimeout(tetris.timer);
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration - l);
tetris.score += (tetris.level + 1) * tetris.points[f];
// redraw the grid
for (i = 0; i < 18; ++i) {
for (j = 1; j < 11; ++j) {
tetris.cells[i][j].css('backgroundColor',
tetris.colors[tetris.grid[i][j]]);
}
}
tetris.refresh();
},
// Draw the current shape
draw: function(r, x, y, c) {
var i, j;
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[r][j][i]) {
tetris.cells[y + j][x + i].css('backgroundColor', c);
}
}
}
},
// Refresh the grid
refresh: function() {
// remove from the old position
tetris.draw(tetris.r0, tetris.x0, tetris.y0, tetris.colors[0]);
// draw to the next one
tetris.draw(tetris.r, tetris.x, tetris.y, tetris.colors[tetris.cur]);
// change stats
$('#level').html(tetris.level + 1);
$('#lines').html(tetris.lines);
$('#score').html(tetris.score);
// reset coordinates
tetris.x0 = tetris.x;
tetris.y0 = tetris.y;
tetris.r0 = tetris.r;
}
};
// Everything starts here
$(window).load(function() {
tetris.init();
$('#grid table, #next table').css('backgroundColor', tetris.colors[0]);
$('#start').click(tetris.start);
$('#stop').click(tetris.gameOver);
});
Descargar jQuery
Entradas
0 comentarios
Publicar un comentario