untuk membuat game tetris berbasi web statis (html & javascript) ternyata tidak susah lo
pertama dowbload dulu Jquery terbaru di Di sini
trus download tetris.js di sini
trus buat file baru pake editor apa aja deh
masukna script berikut ini
simpan dengan nama terserah dengan extensi html :)
coba jalankan dan selamat bermain tetris ya.... :)
pertama dowbload dulu Jquery terbaru di Di sini
trus download tetris.js di sini
trus buat file baru pake editor apa aja deh
masukna script berikut ini
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tetris in jQuery/JavaScript . http://www.devilzc0de.org</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
*{ font-size:12px; margin:0; padding:0; }
.button{ border:1px solid #000; width:85px; }
#level{ color:#00f; }
#lines{ color:#f0f; }
#score{ color:#f00; }
#control{ width:500px; margin-left:auto; margin-right:auto; text-align:center; line-height:22px; }
#info{ background-color: #87cefa; margin-bottom:6px; padding:8px; }
#wrapper{ width:220px; height:440px; margin-left:auto; margin-right:auto; display:block; border:3px solid #000; }
#preview{ width:40px; height:40px; display:block; border: 2px solid #777; float:left; background-color:#fff; }
#preview span{ width:8px; height:8px; border:1px solid #ddd; display:block; position:relative; float:left; }
.squareGrid{ width:20px; height:20px; border:1px solid #ddd; display:block; position:relative; float:left; }
.squareNoGrid{ width:20px; height:20px; display:block; border:1px solid #fff; position:relative; float:left; }
.seq0{ background-color:#f00; }
.seq1{ background-color:#02cc02; }
.seq2{ background-color:#00f; }
.seq3{ background-color:#c9c902; }
.seq4{ background-color:#f0f; }
.seq5{ background-color:#02b7b7; }
.seq6{ background-color:#000; }
.seq7{ background-color:#008; }
.seq8{ background-color:#800; }
.seq9{ background-color:#080; }
.seq10{ background-color:#880; }
.seq11{ background-color:#088; }
.seq12{ background-color:#808; }
.seq13{ background-color:#9932cc; }
.seq14{ background-color:#ff69b4; }
.seq15{ background-color:#3cb371; }
.seq16{ background-color:#008080; }
.seq17{ background-color:#800080; }
.seq18{ background-color:#808000; }
.shadow{ background-color:#bbb; }
-->
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tetris.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var t = new Tetris();
$('#go').click(function(){
t.gameStart(); this.blur();
});
$('#pause').toggle(
function(){ t.gamePause(); this.blur(); },
function(){ t.gameResume(); this.blur(); }
);
$('#grid').toggle(
function(){ t.hideGrid(); this.blur(); },
function(){ t.showGrid(); this.blur(); }
);
$('#shadow').toggle(
function(){ t.hideShadow(); this.blur(); },
function(){ t.showShadow(); this.blur(); }
);
});
//]]>
</script>
</head>
<body>
<div id="info">
<div>
<a href="http://www.devilzc0de.org" target="_blank">devilzc0de.org</a>
<a href="#" target="_blank">Tetris in jQuery/JavaScript</a>
</div>
<div id="control">
<div id="preview"></div>
<b>LEVEL:</b> <span id="level">1</span>
<b>LINES:</b> <span id="lines">0</span>
<b>SCORE:</b> <span id="score">0</span><br />
<input type="button" id="go" value="Go!" class="button" />
<input type="button" id="pause" value="Pause" class="button" disabled="disabled" />
<input type="button" id="grid" value="Hide grids" class="button" />
<input type="button" id="shadow" value="Hide shadow" class="button" disabled="disabled" />
</div>
</div>
<div id="wrapper"></div>
<div id="debug"></div>
</body>
</html>simpan dengan nama terserah dengan extensi html :)
coba jalankan dan selamat bermain tetris ya.... :)
No comments:
Post a Comment