CSS样式：

html,body{
            height: 100%;
            overflow: hidden;
            padding: 0;
            margin:0;
        }
        .games{
            height: 100%;
            background: url(images/road.png) repeat-x bottom;
        }
        .games .sky{
            background: url(images/sky.png) repeat-x center;
            height: 512px;
        }
        .games .person{
            width: 122px;
            height: 104px;
            background: url(images/1.png) no-repeat center;
            background-size: cover;
            position: absolute;
            left: 10px;
            bottom: 80px;
            animation: myani 1s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            z-index: 1;
        }
        
        @keyframes myani{
            0%{
                background-image: url(images/1.png);
            }
            10%{
                 background-image: url(images/2.png);
            }
            20%{
                 background-image: url(images/3.png);
            }
            30%{
                 background-image: url(images/4.png);
            }
            40%{
                 background-image: url(images/5.png);
            }
            50%{
                 background-image: url(images/6.png);
            }
            60%{
                 background-image: url(images/7.png);
            }
            70%{
                 background-image: url(images/8.png);
            }
            80%{
                 background-image: url(images/9.png);
            }
            90%{
                 background-image: url(images/10.png);
            }
            100%{
                 background-image: url(images/11.png);
            }
        }
        .hinder{
            width: 170px;
            height: 88px;
            background: url(images/hinder.png) no-repeat center;
            background-size: cover;
            position: absolute;
            bottom: 80px;
        }
        .msg{
            width: 200px;
            line-height: 100px;
            background: #FFF;
            border: #CCC solid 1px;
            position: absolute;
            text-align:center;
        }
        .msg2{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .msg2 .close{
            position: absolute;
            top: -60px;
            right: 5px;
        }

Javascript代码:

var bakx=0;
        var bakTimeId;
        var createHinderTimeId;
        var moveHinderTimeIdArr=new Array();
        
        function $(id){
            return document.getElementById(id);
        }
        
        //显示窗口
        function showMsg(){
            var width=$("msg").offsetWidth;
            var height=$("msg").offsetHeight;
            console.log(height);
            console.log(document.body.offsetHeight);
            $("msg").style.left=(document.body.offsetWidth-width)/2+"px";
            $("msg").style.top=(document.body.offsetHeight-height)/2+"px";
        }
        
        //初始化背景
        function initBak(){
            bakTimeId=setInterval(function(){
                $("games").style.backgroundPositionX=bakx+"px";
                $("sky").style.backgroundPositionX=bakx+"px";
                bakx-=5;
            },20);
        }
        
        //跳
        function jump(){
            var top=$("person").offsetTop;
            var left=$("person").offsetLeft;
            if(document.body.offsetHeight-$("person").offsetHeight-top==80){
                top-=220;
                left+=220;
                $("person").style.top=top+"px";
                 $("person").style.left=left+"px";
                setTimeout(function(){
                    top+=220;
                    $("person").style.top=top+"px";
                },200);
            }
        }
        
        //向左移动
        function moveLeft(){
            var left=$("person").offsetLeft;
            left-=5;
            $("person").style.left=left+"px";
        }
        
        //向右移动
        function moveRight(){
            var left=$("person").offsetLeft;
            left+=5;
            $("person").style.left=left+"px";
        }
        
        //初始化键盘事件
        function initKeyDown(){
            document.onkeydown=function(){
                switch(event.keyCode){
                    case 32:
                        jump();
                        break;
                    case 37:
                        moveLeft();
                        break;
                    case 39:
                        moveRight();
                        break;
                }
            }
        }
        
        //创建障碍物
        function createHinder(){
            var hinder=document.createElement("div");
            hinder.className="hinder";
            hinder.style.left=document.body.offsetWidth+Math.random()*document.body.offsetWidth+"px";
            $("games").appendChild(hinder);
            moveHinder(hinder);
        }
        
        //移动障碍物
        function moveHinder(hinder){
            var moveHinderTimeId=setInterval(function(){
                var left=hinder.offsetLeft;
                var top=hinder.offsetTop;
                left-=5;
                hinder.style.left=left+"px";
                //判断人是否碰到障碍物
                var personLeft=$("person").offsetLeft;
                var personTop=$("person").offsetTop;
                var personWidth=$("person").offsetWidth;
                var personHeight=$("person").offsetHeight;
                var hinderWidth=hinder.offsetWidth;
                var hinderHeight=hinder.offsetHeight;
                if(personLeft+personWidth>=left
                   &&personLeft+personWidth<=left+hinderWidth){
                    console.log("game over");
                    clearInterval(bakTimeId);
                    clearInterval(createHinderTimeId);
                    for(var timeId of moveHinderTimeIdArr){
                        clearInterval(timeId);
                    }
                    $("person").style.animationIterationCount=0;
                    showMsg();
                }
            },20);
            moveHinderTimeIdArr.push(moveHinderTimeId);
        }
        
        
        //初始化障碍物
        function initHinder(){
            var time=2000+Math.random()*5000;
            createHinderTimeId=setInterval(createHinder,time);
        }
        
        //点击关闭
        function initClose(){
            $("close").onclick=function(){
                $("msg").style.left=-500+"px";
                restart();
            }
        }
        
        function restart(){
            initBak();
            initKeyDown();
            initHinder();
            initClose();
            var hinders=document.getElementsByClassName("hinder");
            for(var hinder of hinders){
                hinder.style.display="none";
            }
            $("person").style.animationIterationCount="infinite";
            $("person").style.left=10+"px";
        }
        
        function start(){
            initBak();
            initKeyDown();
            initHinder();
            initClose();
        }
        
        function init(){
            start();
        }
        window.onload=init;

html代码:

<body>
    <div id="games">
        <div id="sky"></div>
        <div id="person"></div>
    </div>
    <div id="msg">
       <div>
            <span id="close">关闭</span>
            <h1>Game Over</h1>
       </div>
    </div>
</body>

实现效果截图：