javascript制作2048游戏
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
javascript制作2048游戏
这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
2048.html
<!DOCTYPE
<html xmlns=““
<head
<meta http-equiv=“Content-Type”content=“text/html; charset=utf-8” /
<title2048</title
<link rel=“stylesheet” type=“text/css”href=“css/2048.css” /
<!-- <script type=“text/javascript”src=“ --
<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: 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;
}
2048.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 ?