javascript实现2048游戏示例
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了javascript实现2048游戏示例,需要的朋友可以参考下
原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。
代码如下:&!DOCTYPE&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&2048&/title&&link rel="stylesheet" type="text/css" href="css/2048.css" /&&!-- &script type="text/javascript" src="/jquery-latest.js"&&/script& --&&script type="text/javascript" src="js/2048.js"&&/script&&/head&
&body&&&div id="div2048"&&&&&&&& &a id="start"&tap to start :-)&/a&&&& &/div&&/body&&/html&
2048.css 代码如下:@charset "utf-8";
#div2048{&&& width: 500&&& height: 500&&& background-color: #b8af9e;&&& margin: 0&&& position:}#start{&&& width: 500&&& height: 500&&& line-height: 500&&& display:&&& text-align:&&& font-size: 30&&& background: #f2b179;&&& color: #FFFFFF;}#div2048 div.tile{&&& margin: 20px 0px 0px 20&&& width: 100&&& height: 40&&& padding: 30px 0;&&& font-size: 40&&& line-height: 40&&& text-align:&&& float:}#div2048 div.tile0{&background: #ccc0b2;}#div2048 div.tile2{&&& color: #7c736a;&&& background: #eee4}#div2048 div.tile4{&&& color: #7c736a;&&& background: #ece0c8;}#div2048 div.tile8{&&& color: #fff7&&& background: #f2b179;}#div2048 div.tile16{&&& color:#fff7&&& background:#f59563;}#div2048 div.tile32{&&& color:#fff7&&& background:#f57c5f;}#div2048 div.tile64{&&& color:#fff7&&& background:#f65d3b;}#div2048 div.tile128{&&& color:#fff7&&& background:#edce71;}#div2048 div.tile256{&&& color:#fff7&&& background:#edcc61;}#div2048 div.tile512{&&& color:#fff7&&& background:#ecc850;}#div2048 div.tile1024{&&& color:#fff7&&& background:#edc53f;}#div2048 div.tile2048{&&& color:#fff7&&& background:#eec22e;}
2048.js 代码如下:function game2048(container){&this.container =&this.tiles = new Array(16);}
game2048.prototype = {&init: function(){&&for(var i = 0, len = this.tiles. i & i++){&&&var tile = this.newTile(0);&&&tile.setAttribute('index', i);&&&this.container.appendChild(tile);&&&this.tiles[i] =&&}&&this.randomTile();&&this.randomTile();&},&newTile: function(val){&&var tile = document.createElement('div');&&this.setTileVal(tile, val)&&&},&setTileVal: function(tile, val){&&tile.className = 'tile tile' +&&tile.setAttribute('val', val);&&tile.innerHTML = val & 0 ? val : '';&},&randomTile: function(){&&var zeroTiles = [];&&for(var i = 0, len = this.tiles. i & 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){&&&&switch(direction){&&&case 'W':&&&&for(var i = 4, len = this.tiles. i & i++){&&&&&j =&&&&&while(j &= 4){&&&&&&this.merge(this.tiles[j - 4], this.tiles[j]);&&&&&&j -= 4;&&&&&}&&&&}&&&&&&&case 'S':&&&&for(var i = 11; i &= 0; i--){&&&&&j =&&&&&while(j &= 11){&&&&&&this.merge(this.tiles[j + 4], this.tiles[j]);&&&&&&j += 4;&&&&&}&&&&}&&&&&&&case 'A':&&&&for(var i = 1, len = this.tiles. i & i++){&&&&&j =&&&&&while(j % 4 != 0){&&&&&&this.merge(this.tiles[j - 1], this.tiles[j]);&&&&&&j -= 1;&&&&&}&&&&}&&&&&&&case 'D':&&&&for(var i = 14; i &= 0; i--){&&&&&j =&&&&&while(j % 4 != 3){&&&&&&this.merge(this.tiles[j + 1], this.tiles[j]);&&&&&&j += 1;&&&&&}&&&&}&&&&&&}&&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. i & i++){&&&if(this.tiles[i].getAttribute('val') == 2048){&&&&&&&}&&}&},&over: function(){&&for(var i = 0, len = this.tiles. i & i++){&&&if(this.tiles[i].getAttribute('val') == 0){&&&&&&&}&&&if(i % 4 != 3){&&&&if(this.equal(this.tiles[i], this.tiles[i + 1])){&&&&&&&&&}&&&}&&&if(i & 12){&&&&if(this.equal(this.tiles[i], this.tiles[i + 4])){&&&&&&&&&}&&&}&&}&&&},&clean: function(){&&for(var i = 0, len = this.tiles. i & i++){&&&this.container.removeChild(this.tiles[i]);&&}&&this.tiles = new Array(16);&}}
var game, startB
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,&if(window.event){&&// IE&&keynum = e.keyC&}&else if(e.which){&&// Netscape/Firefox/Opera&&keynum = e.&}&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?';&&&&&}&&game.move(keychar);&}}
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具早就想自己写一个2048游戏了，昨晚闲着没事，终于写了一个
如下图，按方向键开始玩吧。
如果觉得操作不方便，请直接打开链接玩吧：
附上源代码链接：
个人博客地址：&
新浪微博：
欢迎读者交流讨论并提出宝贵意见。
阅读(...) 评论()利用php可以编写2048小游戏吗_百度知道
利用php可以编写2048小游戏吗
为什么不试试JavaScript；事件触发，但很笨重可以实现
其他类似问题
为您推荐：
小游戏的相关知识
下载知道APP
随时随地咨询
出门在外也不愁2048game 使用html以及css，javascript实现电脑版 游戏
244万源代码下载-
&文件名称: 2048game& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 34 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：使用html以及css，javascript实现电脑版2048游戏-Using html and css, javascript computerized version 2048 Games
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&2048game\2048.css&&........\2048.js&&........\2048game.html&&........\index.html&&........\jquery-2.1.4.min.js&&........\main2048.js&&........\showanimation2048.js&&........\support2048.js&&2048game
&输入关键字，在本站244万海量源码库中尽情搜索：