HTML5小游戏

一款Canvas做的小游戏.模仿自游戏 赤髪の怨霊 中的电脑游戏.

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;
        }
        canvas{
            margin:0 auto;
            border:5px white solid;
            box-shadow:0 0 10px white;
        }
    </style>
    <script>
        var ctx;
        var matrix=new Array(
            [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 win=new Array(
            [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 padding=50;
        var fps=60;
        var box_size=30,box_border=3;
        var x=2,y=2;
        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,4,4);
            ctx.fillRect(x_right+2,y_top+2,4,4);
            ctx.fillRect(x_left+2,y_bottom+2,4,4);
            ctx.fillRect(x_right+2,y_bottom+2,4,4);
        }
        function drawBox(color,x,y){
            var background=Color.Box[color].Background;
            var border=Color.Box[color].Border;
            x*=40;
            y*=40;
            x+=padding;
            y+=padding;
            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);
        }
        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);
                }
            }
            setTimeout(draw,1000/fps);
        }
        function checkMatrix(){
            if(matrix.toString()===win.toString()){
                draw();
                alert("( ゜- ゜)つロ  乾杯~");
                window.location="http://www.bilibili.tv/video/av335864/";
            }
        }
        document.onkeydown=function(e){
            switch(e.keyCode){
                case Key.Left:
                    if(x>0)x--;
                    break;
                case Key.Right:
                    if(x<4)x++;
                    break;
                case Key.Up:
                    if(y>0)y--;
                    break;
                case Key.Down:
                    if(y<4)y++;
                    break;
                case Key.Enter:
                    changeMatrix();
                    checkMatrix();
                    break;
            }
        };
        window.onload=function(){
            ctx=document.getElementById('canvas').getContext('2d');
            setTimeout(draw,1000/fps);
        };
    </script>
</head>  
<body scroll="no" scrolling="false">  
    <canvas id="canvas" width="290px" height="290px">
        <p>浏览器太老啦!请使用Chrome,Firefox,Opera等现代浏览器访问.</p>
    </canvas>
    <p>方向键控制 回车键翻转 将所有格子变为灰白即可通关</p>
</body>  
</html>