javascript版1024游戏源码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2048</title>
    <style>
        *{margin: 0; padding: 0}
        #div1024{width: 600px; margin: 50px auto;overflow: hidden}
        .main{float: left;margin-right: 50px;}
        li{list-style:none}
        .main>li{width: 328px;overflow: hidden}
        .main>li ul li{border: 1px solid #6666ff;width: 80px;height: 80px;border-collapse:collapse; text-align: center;line-height: 80px;font-size: 36px;float: left
        }
    </style>
</head>
<body>
<div id="div1024">
<ul class="main">
    <li class="line0"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line1"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line2"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line3"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
</ul>
    <div style="float: left; margin-top: 120px;">
    <div>分数:<span id="score">0</span></div>
    <div>计数:<span id="step">0</span></div>
    <div>玩法:<span id="tips">用方向键操作</span></div>
    <div>提示:<span id="tip"></span></div>
    </div>
</div>
<script>
    window.onload=function(){
var game={
    // 随机产生的数字
    num:0,
    //剩余空格
    counts:0,
    score:0,
    step:0,
    //横向数组与纵向数组
    arr:[],
    arr1:[],
    init:function(){
        game.style()
        document.getElementById(‘tip‘).innerHTML=‘游戏开始啦...‘
        this.add()
        this.add()
    },
    add:function(){
        var x=false,y=false
        Math.random() > 0.5 ? this.num=2 :this.num=4
        var Lindex=Math.floor(Math.random()*4),
                Rindex=Math.floor(Math.random()*4),
                dom=document.getElementsByClassName(‘line‘+Lindex)[0].getElementsByTagName(‘li‘)[Rindex]
        if(dom.innerHTML==‘‘) {
            dom.className=‘style‘+this.num
            dom.innerHTML=this.num
        }
        else{
            this.count()
            if(this.counts==0){
                //判断横向是否有值相同
                outerloop0:
                for(var i=0;i<4;i++){
                    for(var j=0;j<this.arr[i].length-1;j++){
                        if(this.arr[i][j]==this.arr[i][j+1]){
                          x=true
                            break outerloop0;
                        }
                    }
                }
                //判断纵向是否有值相同
                outerloop1:
                for(var i=0;i<4;i++){
                    for(var j=0;j<this.arr1[i].length-1;j++){
                        if(this.arr1[i][j]==this.arr1[i][j+1]){
                          y=true
                            break outerloop1
                        }
                    }
                }
                if(!x && !y ){
                  alert(‘gameovar,你的分数是‘+this.score)
                }else if(x){
                    if(arguments[0].keyCode==37 || arguments[0].keyCode==39){
                        this.step++
                    }
                }
                else if(y){
                    if(arguments[0].keyCode==38 || arguments[0].keyCode==40){
                        this.step++
                    }
                }
            }else{
                this.add()
            }
        }
    },
    left:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=0;j<this.arr[i].length-1;j++){
                if(this.arr[i][j]==this.arr[i][j+1]){
                    this.score+=this.arr[i][j]*2
                    this.arr[i][j]+=this.arr[i][j]
                    this.arr[i].splice(j+1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[m].className=‘‘
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[m].innerHTML=‘‘
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[j].innerHTML=this.arr[i][j]
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[j].className=‘style‘+this.arr[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    right:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=this.arr[i].length-1;j>0;j--){
                if(this.arr[i][j]==this.arr[i][j-1]){
                    this.score+=this.arr[i][j-1]*2
                    this.arr[i][j]+=this.arr[i][j]
                    this.arr[i].splice(j-1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[m].className=‘‘
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[m].innerHTML=‘‘
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[3-j].innerHTML=this.arr[i][len-1-j]
                document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[3-j].className=‘style‘+this.arr[i][len-1-j]
            }
        }
        if(this.counts!=0) this.step++
        this.log(this.arr)
    },
    up:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=0;j<this.arr1[i].length-1;j++){
                if(this.arr1[i][j]==this.arr1[i][j+1]){
                    this.score+=this.arr1[i][j]*2
                    this.arr1[i][j]+=this.arr1[i][j]
                    this.arr1[i].splice(j+1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr1[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName(‘line‘+m)[0].getElementsByTagName(‘li‘)[i].className=‘‘
                document.getElementsByClassName(‘line‘+m)[0].getElementsByTagName(‘li‘)[i].innerHTML=‘‘
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName(‘line‘+j)[0].getElementsByTagName(‘li‘)[i].innerHTML=this.arr1[i][j]
                document.getElementsByClassName(‘line‘+j)[0].getElementsByTagName(‘li‘)[i].className=‘style‘+this.arr1[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    down:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=this.arr1[i].length-1;j>0;j--){
                if(this.arr1[i][j]==this.arr1[i][j-1]){
                    this.score+=this.arr1[i][j-1]*2
                    this.arr1[i][j]+=this.arr1[i][j]
                    this.arr1[i].splice(j-1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr1[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName(‘line‘+m)[0].getElementsByTagName(‘li‘)[i].className=‘‘
                document.getElementsByClassName(‘line‘+m)[0].getElementsByTagName(‘li‘)[i].innerHTML=‘‘
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName(‘line‘+(4-len+j))[0].getElementsByTagName(‘li‘)[i].innerHTML=this.arr1[i][j]
                document.getElementsByClassName(‘line‘+(4-len+j))[0].getElementsByTagName(‘li‘)[i].className=‘style‘+this.arr1[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    count:function(){
        var inner,
                inner1,
                m= 0,
                n=0
        this.counts=0
        //横向数组,用于左右操作
        for(var i=0;i<4;i++){
            this.arr[i]=[]
             m=0
            for(var j=0;j<4;j++){
               inner=document.getElementsByClassName(‘line‘+i)[0].getElementsByTagName(‘li‘)[j].innerHTML
                if(inner){
                    this.arr[i][m]=Number(inner)
                    m++
                }
                    else{
                        this.counts++
                    }
                }
        }
        this.log(this.arr)
        //纵向数组用于上下操作
        for(var x=0;x<4;x++){
            this.arr1[x]=[]
        }
        for(var x=0;x<4;x++){
             n=0
            for(var y=0;y<4;y++){
                inner1=document.getElementsByClassName(‘line‘+y)[0].getElementsByTagName(‘li‘)[x].innerHTML
                if(inner1){
                    this.arr1[x][n]=Number(inner1)
                    n++
                }
            }
        }
    },
    log:function(x){
        console.log(x)
    },
    update:function(){
        document.getElementById(‘score‘).innerHTML=this.score
        document.getElementById(‘step‘).innerHTML=this.step
        var tip=document.getElementById(‘tip‘)
        var max=this.arr.toString().split(‘,‘)
        function sort(a,b){return a-b}
       max=max.sort(sort)[max.length-1]
        if(max==512){tip.innerHTML=‘加油加油...‘}
        if(max==1024){tip.innerHTML=‘唉哟,不错喔...‘}
        if(max==2048){tip.innerHTML=‘恭喜你成功了,太厉害了...‘}
        if(max==4096){tip.innerHTML=‘超神了...‘}
        if(max==8192){tip.innerHTML=‘XX,出现bug了...‘}
    },
    style:function(){
        var values=[2,4,8,16,32,64,128,256,512,1024,2048,4096,8192],
                add=0.075,
                styles=‘‘
        for(var i=0;i<values.length;i++){
            styles+=‘.style‘+values[i]+‘{background-color:hsla(360,50%,50%,‘+add+‘);}\r\n‘
            add+=0.075
        }
        document.getElementsByTagName(‘style‘)[0].innerHTML+=styles
    }
}
game.init()
document.onkeydown=function(e){
    game.count()
    e=e || window.event
    switch (e.keyCode){
        case 37 :
            game.left()
            game.add(e)
            game.update()
            break
        case 38 :
            game.up()
            game.add(e)
            game.update()
            break
        case 39 :
            game.right()
            game.add(e)
            game.update()
            break
        case 40 :
            game.down()
            game.add(e)
            game.update()
            break
        default :
            break
    }
}
    }
</script>
</body>
</html>
时间: 2024-10-16 23:23:56

javascript版1024游戏源码的相关文章

安卓版猜拳游戏源码

安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的使用和学习. <ignore_js_op> <ignore_js_op> <ignore_js_op>  详细说明:http://android.662p.com/thread-4914-1-1.html 安卓版猜拳游戏源码,布布扣,bubuko.com

iOS版打地鼠游戏源码

打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款完整版休闲类游戏源码. 源码下载:http://code.662p.com/view/6306.html<ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> 详细说明:http://ios.662

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

横版格斗游戏 cocos2d-x游戏源码

请大家赏个脸,如果感兴趣的看一下,含金量非常高的横版格斗游戏源码,  我的淘宝网址: Beat 'Em Up Game 名将.恐龙.拳皇.三国战纪.战国传承,一个个响当当的名字,承载了80后多少儿时的梦想.横版格斗过关游戏,曾经是最受大众欢迎的一种类型,拳拳到肉的打击感,轻风飘逸的一招一式,还有怒涛般的连击技,令无数玩家如痴如醉.这种游戏也一度是游戏性最强的游戏,但在卡牌横行,快餐文化泛滥的今天,这种游戏已经失去了往日的光彩,但这不是游戏本身的错,而主要在于游戏厂商的急功近利.这种游戏不同于纯界

Beat &#39;Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源码出售

请大家赏个脸,如果感兴趣的看一下,含金量非常高的横版格斗游戏源码,  我的淘宝网址: Beat 'Em Up Game 名将.恐龙.拳皇.三国战纪.战国传承,一个个响当当的名字,承载了80后多少儿时的梦想.横版格斗过关游戏,曾经是最受大众欢迎的一种类型,拳拳到肉的打击感,轻风飘逸的一招一式,还有怒涛般的连击技,令无数玩家如痴如醉.这种游戏也一度是游戏性最强的游戏,但在卡牌横行,快餐文化泛滥的今天,这种游戏已经失去了往日的光彩,但这不是游戏本身的错,而主要在于游戏厂商的急功近利.这种游戏不同于纯界

Beat &#39;Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源码

浓缩精华,专注战斗! 游戏的本质是什么?界面?养成?NoNo! 游戏来源于对实战和比赛的模拟,所以它的本源就是对抗!就是战斗!是挥洒热血的一种方式! 一个游戏最复杂最难做的是什么?UI?商城?各种升级系统?NoNo,还是战斗! 名将.恐龙.拳皇.三国战纪.战国传承,一个个响当当的名字,承载了80后多少儿时的梦想.横版格斗过关游戏,曾经是最受大众欢迎的一种类型,拳拳到肉的打击感,轻风飘逸的一招一式,还有怒涛般的连击技,令无数玩家如痴如醉.这种游戏也一度是游戏性最强的游戏,但在卡牌横行,快餐文化泛滥

HTML5小游戏源码收藏

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

飞行熊猫游戏源码android版

这款游戏是前一段时间完成的一个项目,飞行熊猫游戏源码android版,飞行熊猫基于cocos2d游戏引擎开发,包括了谷歌admob广告支持,没有任何版权问题,大家可以自由修改和上传应用商店. 1.本游戏支持无限关卡. 2.源码包也包括了游戏PSD格式资源文件,可自行修改图片. 3.自适应各种屏幕分辨率, 支持android2.1+ 源码下载: http://code.662p.com/view/6682.html <ignore_js_op> <ignore_js_op> <

html5 canvas简易版捕鱼达人游戏源码

插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触发的. 找htm5,html5教程,html开发的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的,请联系涂志海,再解决,嘿嘿) 下 载 演示地址 下载说明: 1.解压密码:tuzhihai.com 2.只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板. 3.如果