站长资源网络编程
javascript制作2048游戏
简介2048.html20</div>
<div class="news_infos"><div id="MyContent"><p><strong>2048.html</strong></p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2048</title>
<link rel="stylesheet" type="text/css" href="css/2048.css" />
<!-- <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-latest.js">
<p><strong>2048.css</strong></p>
<div class="htmlcode">
<pre class="brush:css;">
@charset "utf-8";
#div2048
{
width: 500px;
height: 500px;
background-color: #b8af9e;
margin: 0 auto;
position: relative;
}
#start
{
width: 500px;
height: 500px;
line-height: 500px;
display: block;
text-align: center;
font-size: 30px;
background: #f2b179;
color: #FFFFFF;
}
#div2048 div.tile
{
margin: 20px 0px 0px 20px;
width: 100px;
height: 40px;
padding: 30px 0;
font-size: 40px;
line-height: 40px;
text-align: center;
float: left;
}
#div2048 div.tile0{
background: #ccc0b2;
}
#div2048 div.tile2
{
color: #7c736a;
background: #eee4da;
}
#div2048 div.tile4
{
color: #7c736a;
background: #ece0c8;
}
#div2048 div.tile8
{
color: #fff7eb;
background: #f2b179;
}
#div2048 div.tile16
{
color:#fff7eb;
background:#f59563;
}
#div2048 div.tile32
{
color:#fff7eb;
background:#f57c5f;
}
#div2048 div.tile64
{
color:#fff7eb;
background:#f65d3b;
}
#div2048 div.tile128
{
color:#fff7eb;
background:#edce71;
}
#div2048 div.tile256
{
color:#fff7eb;
background:#edcc61;
}
#div2048 div.tile512
{
color:#fff7eb;
background:#ecc850;
}
#div2048 div.tile1024
{
color:#fff7eb;
background:#edc53f;
}
#div2048 div.tile2048
{
color:#fff7eb;
background:#eec22e;
}</pre>
</div>
<p><strong>2048.js </strong></p>
<div class="htmlcode">
<pre class="brush:js;">
function game2048(container)
{
this.container = container;
this.tiles = new Array(16);
}
game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] = tile;
}
this.randomTile();
this.randomTile();
},
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
return tile;
},
setTileVal: function(tile, val){
tile.className = 'tile tile' + val;
tile.setAttribute('val', val);
tile.innerHTML = val > 0 ? val : '';
},
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
}
}
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);
},
move:function(direction){
var j;
switch(direction){
case 'W':
for(var i = 4, len = this.tiles.length; i < len; i++){
j = i;
while(j >= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
j -= 4;
}
}
break;
case 'S':
for(var i = 11; i >= 0; i--){
j = i;
while(j <= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
j += 4;
}
}
break;
case 'A':
for(var i = 1, len = this.tiles.length; i < len; i++){
j = i;
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
j -= 1;
}
}
break;
case 'D':
for(var i = 14; i >= 0; i--){
j = i;
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
j += 1;
}
}
break;
}
this.randomTile();
},
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
}
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
}
}
},
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
},
max: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 2048){
return true;
}
}
},
over: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
if(this.tiles[i].getAttribute('val') == 0){
return false;
}
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
return false;
}
}
if(i < 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
return false;
}
}
}
return true;
},
clean: function(){
for(var i = 0, len = this.tiles.length; i < len; i++){
this.container.removeChild(this.tiles[i]);
}
this.tiles = new Array(16);
}
}
var game, startBtn;
window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
}
}
window.onkeydown = function(e){
var keynum, keychar;
if(window.event){ // IE
keynum = e.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) > -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
return;
}
game.move(keychar);
}
}</pre>
</div>
<p>以上所诉就是本文的全部内容了，希望大家能够喜欢。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/114646.html" title="javascript实现简单的贪吃蛇游戏">javascript实现简单的贪吃蛇游戏</a></p>
<p>下一篇：<a href="/3g/1/114648.html" title="JavaScript模拟实现继承的方法">JavaScript模拟实现继承的方法</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>