HTML5小游戏 增强版

这篇文章里提到的HTML5小游戏增强版,增加了鼠标/触摸屏支持,增强了执行效率.

DEMO

由于DEMO的页面经过压缩(洁癖)的关系,完整代码将在下面给出.

因为博主是个懒人,所以这次也没有给出注释.

<!DOCTYPE html>  
<html>  
<head>  
    <title>♂</title>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <style>
        body,canvas{
            color:white;
            text-align:center;
            background:black;
            text-shadow:0 0 1px white;
        }
        canvas{
            margin:0 auto;
            border:5px white solid;
            box-shadow:0 0 10px white;
        }
    </style>
    <script>
        var canvas,ctx;
        var matrix=[
            [1,1,1,1,1],
            [1,1,1,1,1],
            [1,1,1,1,1],
            [1,1,1,1,1],
            [1,1,1,1,1]
        ];
        var matrix_string=matrix.toString();
        var win=[
            [5,5,5,5,5],
            [5,5,5,5,5],
            [5,5,5,5,5],
            [5,5,5,5,5],
            [5,5,5,5,5]
        ];
        var win_string=win.toString();
        var padding=50;
        var box_size=30,box_border=3;
        var x=2,y=2;
        var left_top=padding,right_bottom=4*40+padding+box_size;
        var Key={
            Left:37,
            Up:38,
            Right:39,
            Down:40,
            Enter:13
        };
        var Color={
            Red:1,
            Blue:2,
            Green:3,
            Yellow:4,
            White:5,
            Box:{
                1:{
                    Background:'#FCBCB5',
                    Border:'#C97769'
                },
                2:{
                    Background:'#A7C6E8',
                    Border:'#7CABD5'
                },
                3:{
                    Background:'#C4DEC1',
                    Border:'#96C369'
                },
                4:{
                    Background:'#FCEB54',
                    Border:'#F7D310'
                },
                5:{
                    Background:'#C3C3C3',
                    Border:'#F9F9F9'
                }
            },
            Selected:{
                Background:'#CCCDCE',
                Border:'#E8E9E7'
            }
        };
        function changeColor(c){
            return c<Color.White?c+1:Color.Red;
        }
        function changeMatrix(e){
            var sx=x,sy=y;
            matrix[sx][sy]=changeColor(matrix[sx][sy]);
            if(sx>0)matrix[sx-1][sy]=changeColor(matrix[sx-1][sy]);
            if(sx<4)matrix[sx+1][sy]=changeColor(matrix[sx+1][sy]);
            if(sy>0)matrix[sx][sy-1]=changeColor(matrix[sx][sy-1]);
            if(sy<4)matrix[sx][sy+1]=changeColor(matrix[sx][sy+1]);
        }
        function drawSelected(){
            var x_left=padding+x*40-3,x_right=padding+x*40+box_size-4;
            var y_top=padding+y*40-3,y_bottom=padding+y*40+box_size-4;
            var background=Color.Selected.Background;
            var border=Color.Selected.Border;
            ctx.fillStyle=border;
            ctx.fillRect(x_left,y_top,7,7);
            ctx.fillRect(x_right,y_top,7,7);
            ctx.fillRect(x_left,y_bottom,7,7);
            ctx.fillRect(x_right,y_bottom,7,7);
            ctx.fillStyle=background;
            ctx.fillRect(x_left+2,y_top+2,3,3);
            ctx.fillRect(x_right+2,y_top+2,3,3);
            ctx.fillRect(x_left+2,y_bottom+2,3,3);
            ctx.fillRect(x_right+2,y_bottom+2,3,3);
        }
        function drawBox(color,x,y){
            var background=Color.Box[color].Background;
            var border=Color.Box[color].Border;
            x=x*40+padding;
            y=y*40+padding;
            ctx.shadowOffsetX=0;
            ctx.shadowOffsetY=0;
            ctx.shadowBlur=10;
            ctx.shadowColor=border;
            ctx.fillStyle=background;
            ctx.fillRect(x,y,box_size,box_size);
            ctx.fillStyle=border;
            x+=box_border;y+=box_border;
            ctx.fillRect(x,y,box_size-2*box_border,box_size-2*box_border);
            ctx.fillStyle=background;
            x+=box_border;y+=box_border;
            ctx.fillRect(x,y,box_size-4*box_border,box_size-4*box_border);
            ctx.shadowBlur=0;
        }
        function draw(){
            ctx.clearRect(0,0,300,300);
            drawSelected();
            for(var x=0;x<5;x++){
                for(var y=0;y<5;y++){
                    drawBox(matrix[x][y],x,y);
                }
            }
        }
        function checkMatrix(){
            if(matrix_string===win_string){
                draw();
                alert("( ゜- ゜)つロ  乾杯~");
                window.location="http://www.bilibili.tv/video/av335864/";
            }
        }
        function getLocation(value){
            if(value<=0*40+padding+box_size){
                return 1;
            }else if(value>=1*40+padding && value<=1*40+padding+box_size){
                return 2;
            }else if(value>=2*40+padding && value<=2*40+padding+box_size){
                return 3;
            }else if(value>=3*40+padding && value<=3*40+padding+box_size){
                return 4;
            }else if(value>=4*40+padding && value<=4*40+padding+box_size){
                return 5;
            }
            return 0;
        }
        window.onload=function(){
            canvas=document.getElementById('canvas');
            ctx=canvas.getContext('2d');
            setTimeout(draw,0);
            document.onkeydown=function(e){
                switch(e.keyCode){
                    case Key.Left:
                        if(x>0)x--;
                        setTimeout(draw,0);
                        break;
                    case Key.Right:
                        if(x<4)x++;
                        setTimeout(draw,0);
                        break;
                    case Key.Up:
                        if(y>0)y--;
                        setTimeout(draw,0);
                        break;
                    case Key.Down:
                        if(y<4)y++;
                        setTimeout(draw,0);
                        break;
                    case Key.Enter:
                        setTimeout(draw,0);
                        changeMatrix();
                        checkMatrix();
                        break;
                }
            };
            canvas.onclick=function(e){
                var o={x:e.offsetX-5,y:e.offsetY-5};
                if(o.x>=left_top && o.x<=right_bottom && o.y>=left_top && o.y<=right_bottom){
                    var tx=getLocation(o.x);
                    var ty=getLocation(o.y);
                    if(tx && ty){
                        x=tx-1;
                        y=ty-1;
                        setTimeout(draw,0);
                        changeMatrix();
                        checkMatrix();
                    }
                }
            };
        };
    </script>
</head>  
<body scroll="no" scrolling="false" onselectstart="return false;">  
    <canvas id="canvas" width="290px" height="290px">
        <p>浏览器太老啦!请使用Chrome,FIrefox,Opera等现代浏览器访问.</p>
    </canvas>
    <p>方向键控制+回车键翻转/鼠标点击 将所有格子变为灰白即可通关</p>
</body>  
</html>  

PS:这游戏能否正常通关有待思考.