html制作2048教程,JavaScript_javascript制作2048游戏，2048.html <!DOCTYPE> <htm - phpStudy

javascript制作2048游戏

2048.html

2048

tap to start :-)

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 ? 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);

}

}

以上所诉就是本文的全部内容了，希望大家能够喜欢。相关阅读:

Ubuntu修改命令提示符PS1教程(非常详细)

C++进程共享数据封装成类实例

javascript 面向对象封装与继承

Java多线程的实现方式比较(两种方式比较)

Win10过了30天以后该怎么怎么无损降级回滚？

使用vertical-align实现input和img对齐

jquery实现下拉框功能效果【实例代码】

java制作android 日历代码分享

C#检测pc光驱里是否插入了光盘的方法

Oracle插入日期数据常见的2个问题和解决方法

Win10专业版怎么通过设置项开启广告软件拦截?

举例说明JavaScript中的实例对象与原型对象

JS使用cookie实现DIV提示框只显示一次的方法

jQuery中$.fn的用法示例介绍