码迷,mamicode.com
首页 > 其他好文 > 详细

2048

时间:2014-06-18 21:28:15      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:android   cWeb   style   class   blog   code   

问我为啥开发这个?答:闲的蛋疼!

各位看官看到如下代码可能发现有些不需要的方法,或者注释了某些css样式,而不是自己删掉,这是因为哥们开发了多个2048版本,有些方法就作为对应版本的接口了,没删掉。

本游戏支持pc端鼠标拖动和移动端触屏滑动(大小适配暂未做)

看代码:

html代码

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2048-bobo版</title>
<head>
</head>

<body>
<div id="wrap">
<div class="title"> 
    <div class="title_left"><img src="./images/logo.jpg" /></div>
    <div class="refresh"><img src="./images/refrush.png" /></div>
    <div class="title_right">
        <p class="title_right_top">目前分数:<span id="currentScore"></span></p>
        <p class="title_right_bottom">逼格:<span id="level">待定</span></p> 
    </div>
</div>
<div class="div_wrap" id="div_wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom">@author:波波</div>
</div>
</body>
</html>

css代码:

body{background:#fff0f2;}
    .div_wrap,.title
    {
        background:#bdab9d;    
        /*background:#57407c;*/
        width:500px;
        height:500px;
        margin:0 auto;        
        border-radius:10px;
    }
    .div_wrap div
    {        
        float:left;        
        height:107px;
        width:107px;
        line-height:2;
        background:#ccc0b2;
        /*background: #3d2963;*/
        margin:14.4px 0 0 14.4px;             
        text-align:center;
        font-size:50px; 
        vertical-align:middle;
        color:#fff;   
        font-weight:bolder;
        border-radius:10px;
    }
    div.num2
    {        
        background:#eee4da;        
    }
    div.num4
    {
        background:#f3ae79;
    }
    div.num8
    {
        background:#f59563;
    }
    div.num16
    {
        background:#f8795e;
    }
    div.num32
    {
        background:#edce71;
    }
    div.num64
    {
        background:#f65d3b;
    }
    div.num128
    {
        background:#edce71;
    }
    div.num256
    {
        background:#edcc61;
    }
    div.num512
    {
        background:#ecc850;
    }
    div.num1024
    {
        background:#edc53f;
    }
    div.num2048
    {
        background:#eee4da;
    }
    .title
    {
        width:500px;
        margin-bottom:10px;
        height:80px;
    }
    div.title_left,div.refresh
    {
        float:left;
        width:78px;
        background:#fff;
        height:80px;
        color:#000;
        border-radius:10px;
    }
    div.refresh 
    {
        background:#bdab9d;
    }
    div.refresh img
    {
        
        margin:0 0 0 100%;
        cursor:pointer;
    }
    div.title_left img
    {
        border-radius:10px;
        
    }
    div.title_right
    {
        float:right; 
        
        height:80px;
        margin:0 20px 0 0;
        
    }
    div.title_right .title_right_top,div.title_right .title_right_bottom
    {
        color:#fff;
        margin:5px;
        font-size:25px;
        line-height:1;
        font-weight:bolder;
        text-align:right;
    }
    div.title_right .title_right_bottom
    {
        color:#fff;
        margin:5px;
        font-size:20px;
        line-height:1;
    }
    #currentScore,#level
    {
        font-size:30px;
        font-weight:bolder;
        display:inline-block;
        width:50px;
        text-align:left;
    }
    #level
    {
        font-size: 20px;        
    }
    .bottom
    {
        text-align:center;
        font-size:12px;
        line-height:2;
        
    }

js代码:

<script  src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    /*@author:yichengbo*
    *此游戏持续改进开发*/
    $(function () {
        $("#wrap").height($(document).height());
        function game2048() {
            this.data = [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0]
            ];
            this.startX = 0;
            this.startY = 0;
            this.endX = 0;
            this.level = [];//逼格
            this.endY = 0;
            this.score = 0; //得分
            this.slide = false; //是否是可滑动的,默认是不可以滑动的,产生一个随机数
            this.init();
        }
        game2048.prototype = {
            numImage: function (num) {
                return "<img src=‘./images/" + num + ".gif‘/>";
            },
            /*0的位置随机生成一个随机的2或4*/
            randomNum: function () {
                var rand = Math.ceil(Math.random() * 4); //产生0-4的随机整数
                if (rand != 4) {//返回随机数为2和4的整数,2的概率是4概率的3倍
                    rand = 2;
                }
                //此处还有一种方法是生成一个0-15的随机数,从左到右,从上到下对数组元素位置编号
                var x = Math.floor(Math.random() * 4);
                var y = Math.floor(Math.random() * 4);
                if (this.data[x][y] == 0) {
                    this.data[x][y] = rand;
                }
                else {
                    this.randomNum();
                }
            },
            /*返回移动方向*/
            moveDirection: function (x, y) {
                var direction = "";
                if (x == 0 && y == 0)
                    return;
                if (Math.abs(x) > Math.abs(y)) {//左右滑动
                    if (x > 0)
                        direction = "right";
                    else
                        direction = "left";
                }
                else {//上下滑动
                    if (y > 0)//浏览器的y坐标轴向下是正的,向上是负的
                        direction = "down";
                    else
                        direction = "up";
                }
                return direction;
            },
            /*根据移动方向做处理*/
            move: function (direction) {
                switch (direction) {
                    case "up":
                        this.moveUp();
                        break;
                    case "right":
                        this.moveRight();
                        break;
                    case "down":
                        this.moveDown();
                        break;
                    case "left":
                        this.moveLeft();
                        break;
                }
            },
            /*重绘界面*/
            repraint: function () {
                var num = 0; //表示第几个方块
                for (var i = 0; i < 4; i++) {
                    for (var j = 0; j < 4; j++) {
                        num = i * 4 + j;
                        if (this.data[i][j] != 0) {
                            $(".div_wrap div").eq(num).removeClass();
                            $(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.data[i][j]);
                            //$(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.numImage(this.data[i][j]));
                        }
                        else {
                            $(".div_wrap div").eq(num).removeClass().html("");
                        }
                    }
                }
                $("#currentScore").html(this.score);
            },
            moveUp: function () {
                //i代表行号,j代表列号
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 3; m++) {//最差的情况是[2,0,0,0]移动到最右侧需要3次,所有在列上做一个3次循环
                        for (var i = 0; i < 3; i++) {
                            //把非0数字依次往上排
                            if (this.data[i][j] == 0 && this.data[i + 1][j] != 0) {
                                this.data[i][j] = this.data[i + 1][j];
                                this.data[i + 1][j] = 0;
                                this.slide = true; //有移动说明是可以滑动的
                            }
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var i = 0; i < 3; i++) {
                        if (this.data[i][j] != 0 && (this.data[i][j] == this.data[i + 1][j])) {
                            this.data[i][j] = 2 * this.data[i][j]; //合并
                            this.data[i + 1][j] = 0;
                            this.score += this.data[i][j];
                            this.slide = true; //有合并的就说明产生的新的0位置
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 2; m++) {//最差的情况是[0,4,0,0]移动到最右侧需要2次,所有在列上做一个2次循环
                        for (var i = 0; i < 3; i++) {
                            //把非0数字依次往上排
                            if (this.data[i][j] == 0 && this.data[i + 1][j] != 0) {
                                this.data[i][j] = this.data[i + 1][j];
                                this.data[i + 1][j] = 0;
                            }
                        }
                    }
                }
                if (this.slide) {
                    //滑动后,0的位置生成一个随机数
                    this.randomNum();
                }
                this.slide = false;
                this.repraint();
            },
            moveDown: function () {
                //i代表行号,j代表列号
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 3; m++) {//最差的情况是[2,0,0,0]移动到最右侧需要3次,所有在列上做一个3次循环
                        for (var i = 3; i > 0; i--) {
                            //把非0数字依次往下排
                            if (this.data[i][j] == 0 && this.data[i - 1][j] != 0) {
                                this.data[i][j] = this.data[i - 1][j];
                                this.data[i - 1][j] = 0;
                                this.slide = true; //有移动说明是可以滑动的
                            }
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var i = 3; i > 0; i--) {
                        if (this.data[i][j] != 0 && (this.data[i][j] == this.data[i - 1][j])) {
                            this.data[i][j] = 2 * this.data[i][j]; //合并
                            this.data[i - 1][j] = 0;
                            this.score += this.data[i][j];
                            this.slide = true; //有合并的就说明产生的新的0位置
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 2; m++) {//最差的情况是[0,4,0,0]移动到最右侧需要2次,所有在列上做一个2次循环
                        for (var i = 3; i > 0; i--) {
                            //把非0数字依次往下排
                            if (this.data[i][j] == 0 && this.data[i - 1][j] != 0) {
                                this.data[i][j] = this.data[i - 1][j];
                                this.data[i - 1][j] = 0;
                            }
                        }
                    }
                }
                if (this.slide) {
                    //滑动后,0的位置生成一个随机数
                    this.randomNum();
                }
                this.slide = false;
                this.repraint();
            },
            moveRight: function () {
                //i代表行号,j代表列号
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 3; m++) {
                        for (var i = 3; i > 0; i--) {
                            if (this.data[j][i] == 0 && this.data[j][i - 1] != 0) {
                                this.data[j][i] = this.data[j][i - 1];
                                this.data[j][i - 1] = 0;
                                this.slide = true; //有移动说明是可以滑动的
                            }
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var i = 3; i > 0; i--) {
                        if (this.data[j][i] != 0 && (this.data[j][i] == this.data[j][i - 1])) {
                            this.data[j][i] = 2 * this.data[j][i]; //合并
                            this.data[j][i - 1] = 0;
                            this.score += this.data[j][i];
                            this.slide = true; //有合并的就说明产生的新的0位置
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 2; m++) {
                        for (var i = 3; i > 0; i--) {
                            if (this.data[j][i] == 0 && this.data[j][i - 1] != 0) {
                                this.data[j][i] = this.data[j][i - 1];
                                this.data[j][i - 1] = 0;
                            }
                        }
                    }
                }
                if (this.slide) {
                    //滑动后,0的位置生成一个随机数
                    this.randomNum();
                }
                this.slide = false;
                this.repraint();
            },
            moveLeft: function () {
                //i代表行号,j代表列号
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 3; m++) {
                        for (var i = 0; i < 3; i++) {
                            if (this.data[j][i] == 0 && this.data[j][i + 1] != 0) {
                                this.data[j][i] = this.data[j][i + 1];
                                this.data[j][i + 1] = 0;
                                this.slide = true; //有移动说明是可以滑动的
                            }
                        }
                    }
                }

                for (var j = 0; j < 4; j++) {
                    for (var i = 0; i < 3; i++) {
                        if (this.data[j][i] != 0 && (this.data[j][i] == this.data[j][i + 1])) {
                            this.data[j][i] = 2 * this.data[j][i]; //合并
                            this.data[j][i + 1] = 0;
                            this.score += this.data[j][i];
                            this.slide = true;
                        }
                    }
                }
                for (var j = 0; j < 4; j++) {
                    for (var m = 0; m < 2; m++) {
                        for (var i = 0; i < 3; i++) {
                            if (this.data[j][i] == 0 && this.data[j][i + 1] != 0) {
                                this.data[j][i] = this.data[j][i + 1];
                                this.data[j][i + 1] = 0;
                            }
                        }
                    }
                }
                if (this.slide) {
                    //滑动后,0的位置生成一个随机数
                    this.randomNum();
                }
                this.slide = false;
                this.repraint();
            },
            touchOrMouse: function () {
                var _self = this;
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                var isTouch = bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM;
                if (isTouch) {
                    try {
                        /*document.createEvent("TouchEvent");*/
                        document.getElementById("wrap").addEventListener("touchstart", function (e) {
                            e.preventDefault();
                            this.startX = e.touches[0].pageX;
                            this.startY = e.touches[0].pageY;
                        });
                        document.getElementById("wrap").addEventListener("touchmove", function (e) {
                            e.preventDefault();
                            this.endX = e.touches[0].pageX;
                            this.endY = e.touches[0].pageY;
                        });
                        document.getElementById("wrap").addEventListener("touchend", function (e) {
                            e.preventDefault();
                            var x = this.endX - this.startX;
                            var y = this.endY - this.startY;
                            _self.move(_self.moveDirection(x, y));

                        });
                    } catch (e) {
                        alert("移动版异常");
                    }
                }
                else {
                    try {
                        document.getElementById("wrap").addEventListener(‘mousedown‘, function (e) {
                            e.preventDefault();
                            this.startX = Number(e.pageX);
                            this.startY = Number(e.pageY);
                            this.endX = this.startX;
                            this.endY = this.startY;

                        });
                        document.getElementById("wrap").addEventListener(‘mouseup‘, function (e) {
                            e.preventDefault();
                            this.endX = Number(e.pageX);
                            this.endY = Number(e.pageY);
                            var x = this.endX - this.startX;
                            var y = this.endY - this.startY;
                            _self.move(_self.moveDirection(x, y));
                        });
                    }
                    catch (e) {
                        alert("pc版异常");
                    }
                }
            },
            init: function () {
                var _self = this;
                this.randomNum();
                this.randomNum();
                //初始化两个随机的位置,然后随机放上2和4
                for (var i = 0; i < 4; i++) {
                    for (var j = 0; j < 4; j++) {
                        if (this.data[i][j] != 0) {
                            var num = i * 4 + j;
                            //$(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.numImage(this.data[i][j]));
                            $(".div_wrap div").eq(num).addClass("num" + this.data[i][j]).html(this.data[i][j]);
                        }
                    }
                }
                this.touchOrMouse();
                $(".refresh img").bind("click", function () {
                    location.reload();
                });
                $("#currentScore").html(this.score);
            }
        };
        var newGame = new game2048();
    })
</script>
<a id="" href="http://files.cnblogs.com/yichengbo/2048-%E7%AC%AC%E4%B8%89%E7%89%88.zip">游戏下载</a>

2048,布布扣,bubuko.com

2048

标签:android   cWeb   style   class   blog   code   

原文地址:http://www.cnblogs.com/yichengbo/p/3790373.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!