前端开发碰壁反弹小游戏

web前端开发技术 html
前端开发技术发展方向
前端开发技术难题

利用碰壁反弹写的一个小游戏,功能没有太多,也可以玩,有什么bug或者希望改进的欢迎大家指出啦

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>标题</title>
        <meta name=”keywords” content=”” />
        <meta name=”description” content=”” />
        <style>
            .outer {
                width: 300px;
                height: 450px;
                border: 3px solid black;
                float: left;
            }
            #box {
                width: 70px;
                height: 15px;
                background-color: #52c6f3;
                position: absolute;
                bottom: 5px;
                left: 110px;
            }
            .ball {
                width: 20px;
                height: 20px;
                border-radius: 10px;
                border: 1px solid #a5e642;
                background-color: #a5e642;
                display: none;
            }
            .outer {
                position: relative;
            }
            .ball {
                position: absolute;
            }
            .kongzhi {
                height: 450px;
                width: 110px;
                float: left;
                margin-left: 10px;
            }
            button {
                border-radius: 10px;
                height: 25px;
                width: 60px;
            }
            #df {
                position: absolute;
                top: 150px;
                width: 300px;
                display: none;
            }
            h1 {
                background-color: black;
                color: white;
                text-align: center;
            }
            #df h3 {
                text-align: center;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id=”outer” class=”outer”>
            <div id=”ball” class=”ball”></div>
            <div id=”box”></div>
            <div id=”df”>
                <h1>Game Over</h1>
                <h3 id=”ff”>得分:</h3>
            </div>
        </div>
        <div class=”kongzhi”>
            <button id=”start”>开始</button>
            <p style=”color:skyblue”>左右控制移动点击开始</p>
            <h2>得分:</h2>
            <h2 id=”fs”></h2>
        </div>
        <script>
            var z,
                y,
                n = 0
            var outer = document.getElementById(‘outer’)
            var ball = document.getElementById(‘ball’)
            var start = document.getElementById(‘start’)
            var ff = document.getElementById(‘ff’)
            var df = document.getElementById(‘df’)
            var fs = document.getElementById(‘fs’)
            var box = document.getElementById(‘box’)
            var posX = 150
            var posY = 0
            var moveX = true
            var moveY = true
            var timer = null
            var timer1, timer2
            function clear() {
                clearInterval(timer)
                clearInterval(timer1)
                clearInterval(timer2)
            }
            window.onload = pos
            function pos() {
                ball.style.left = posX + ‘px’
                ball.style.left = posY + ‘px’
            }
            start.onclick = function() {
                clear()
                ball.style.display = ‘block’
                df.style.display = ‘none’
                timer = setInterval(move, 5)
                timer2 = setInterval(function() {
                    n = n + 1
                    fs.innerHTML = n
                }, 100)
                key()
                x = Math.round(Math.random() * 300) //从第二次开始小球的位置随机开始
                posX = x
                posY = 0
            }
            function move() {
                //小球的移动
                if (moveX) {
                    if (posX > 0) {
                        posX–
                        ball.style.left = posX + ‘px’
                    } else {
                        moveX = false
                    }
                } else {
                    if (posX < outer.clientWidth – ball.offsetWidth) {
                        posX++
                        ball.style.left = posX + ‘px’
                    } else {
                        moveX = true
                    }
                }
                if (moveY) {
                    if (posY > 0) {
                        posY–
                        ball.style.top = posY + ‘px’
                    } else {
                        moveY = false
                    }
                } else {
                    if (posY < outer.clientHeight – ball.offsetHeight – 15) {
                        posY++
                        ball.style.top = posY + ‘px’
                    } else {
                        if (
                            box.offsetLeft > ball.offsetLeft ||
                            box.offsetLeft + box.offsetWidth < ball.offsetLeft
                        ) {
                            clear()
                            df.style.display = ‘block’
                            ff.innerHTML = ‘得分:’ + n
                            n = 0 //判断小条是否接到小球,否,游戏结束
                        }
                        moveY = true
                    }
                }
            }
            function key() {
                document.onkeydown = function(ev) {
                    var ev = ev || window
                    switch (ev.keyCode) {
                        case 37:
                            z = true
                            break
                        case 39:
                            y = true
                            break
                    }
                }
                document.onkeyup = function(ev) {
                    var ev = ev || window
                    switch (ev.keyCode) {
                        case 37:
                            z = false
                            break
                        case 39:
                            y = false
                            break
                    }
                }
                timer1 = setInterval(function() {
                    if (z) {
                        if (box.offsetLeft > 0) {
                            box.style.left =
                                (box.offsetLeft – 2 < 0
                                    ? 0
                                    : box.offsetLeft – 2) + ‘px’
                        }
                    }
                    if (y) {
                        if (box.offsetLeft < 230) {
                            box.style.left =
                                (box.offsetLeft + 2 > 400
                                    ? 400
                                    : box.offsetLeft + 2) + ‘px’
                        }
                    }
                }, 10) //左右移动的小条
            }
        </script>
    </body>
</html>
web前端跨平台开发技术
web前端开发技术布局
web前端开发技术复习
» 本文来自:前端开发者 » 《前端开发碰壁反弹小游戏》
» 本文链接地址:https://www.rokub.com/7908.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!