iptton 发表于 2010-5-20 01:33

【代码接龙】javascript/html/css 版俄罗斯方块

RT,有兴趣动手的同学可以把你的代码帖上来。不需要一步完成。

欢迎就代码所有存在的问题拍砖


代码不求兼容所有浏览器,能用得到html5,css3更好!!不过最好能在你的代码前面定明在哪些浏览器下可运行。

以下代码只是临时想到的一个不完整的框架。在ie7 / firefox下没有脚本错误
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
        //工具函数
        function $(id){return document.getElementById(id);}

       
        //变量
        var brickSize=10;
        var timer=null;
        var interval=200;
        var intervalIncreament=.8;
       
        // 创建关卡
        function createLevel(l){
                clearScene();
                for(var i=0;i<l;++i){
                        createRandomBrick(i);
                }
        }
       
        //为每行产生随机砖块
        function createRandomBrick(line){
               
        }
       
        //清空旧关卡数据
        function clearScene(){
                $("container").innerHTML="";
        }
       
        // 按键事件侦听入口
        function onKeyDown(e){
                e = e?e:window.event;//ie兼容
                var keyCode = e.keyCode;
                var keyFunction = keyFunctions;
                if(keyFunction){
                        keyFunction();
                }
        }
       
        //对应各按键的处理函数
        var keyFunctions={
                '37':function(){//左
                        alert('左');
                },
                '38':function(){//上
                        alert('上');
                },
                '39':function(){//右
                        alert('右');
                },
                '40':function(){//下
                        alert('下');
                }
        }
       
        function ticker(){
               
        }
       
        function startGameTimer(){
                timer = setInterval(ticker,interval);
        }
        function stopGameTimer(){
                clearInterval(timer);
        }
       
        function startGame(level){
                level=level?level:0;
                createLevel(level);
                startGameTimer();
        }
       
       
        function onStartButtonClicked(){
                startGame(0);
                $("startButton").disabled="disable";
                $("pauseButton").disabled="";
        }
        function onPauseButtonClicked(){
                stopGameTimer();
                $("startButton").disabled="";
                $("pauseButton").disabled="disable";
        }
       
        //初始化html元素
        function initialDom(){
                $("startButton").disabled="";
                $("pauseButton").disabled="disable";
        }
       
        //初始化事件绑定
        function initialEvent(){
                document.onkeydown=onKeyDown;
                $("startButton").onclick=onStartButtonClicked;
                $("pauseButton").onclick=onPauseButtonClicked;
        }
       
        window.onload=function(){
                initialDom();
                initialEvent();
        };
</script>
<style>
        .centerAlign{
                margin:0 auto; /* 有指定宽度时 */
                text-align:center;/* 无指定宽度时 */
        }
</style>
</head>
<body>
        <div id="container" class="centerAlign" style="width:300px;height:400px;border:solid 1px #666;">
        </div>
        <div class="centerAlign">
                <button id="startButton">开始</button>
                <button id="pauseButton">暂停</button>
        </div>
</body>
</html>
页: [1]
查看完整版本: 【代码接龙】javascript/html/css 版俄罗斯方块