找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发 JS小游戏

2018-07-22 分类：JavaScript 阅读(623) 评论(0)

jsp前端开发工具|前端架构 前端开发工具|简易前端开发工具

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端游戏开发框架</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .info {
            width: 500px;
            margin: 30px auto;
            text-align: center;
        }
        .view {
            width: 500px;
            height: 500px;
            outline: solid 5px #333;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            cursor: ew-resize;
        }
        .box {
            width: 30px;
            height: 30px;
            border: solid 2px red;
            position: absolute;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class=”info”>你托起了球共计
        <span class=”score”>0</span> 次</div>
    <div class=”info”>你的最大连击数：
        <span class=”comb”>0</span> 次</div>
    <div class=”view”>
        <div class=”box”>2B</div>
    </div>
    <div class=”info”>Bug: 球速太快会抓不到的</div>
    <script>
        (function (global) {
            ‘use strict’;
            var $box = $(‘.box’);
            var $score = $(‘.score’);
            var $comb = $(‘.comb’);
            var score = 0;
            var comb = 0;
            var maxComb = 0;
            var $dropInter;
            function $update(dom, val) {
                dom.innerHTML = val;
            }
            function $(selector) {
                return document.querySelector(selector);
            }
            function setPos(x, y) {
                // console.log($box);
                $box.style.left = x + ‘px’;
                $box.style.top = y + ‘px’;
            }
            function initPos() {
                var x = randomNumber(0, 470),
                    y = randomNumber(10, 20);
                setPos(x, y);
            }
            function randomNumber(min, max) {
                return Math.floor(Math.random() * (max – min)) + min;
            }
            var gameSpeed = 16;
            var g = 50 * gameSpeed / 1000; //重力加速度
            function startDrop() {
                var x = $box.offsetLeft,
                    y = $box.offsetTop;
                // console.log(x, y);
                var y_speed = 0; //初始速度
                var x_speed = 10;
                $dropInter = setInterval(function () {
                    y_speed += g;
                    y += y_speed;
                    x += x_speed;
                    setPos(x, y);
                    if (y >= 470) {
                        comb = 0; //落地comb清零
                        y_speed = randomNumber(-25, -5);
                        x_speed = randomNumber(-10, 10);
                        // clearInterval($dropInter);
                        // initPos();
                    } else if (y < 0) {
                        y_speed = randomNumber(1, 5); //触顶回弹
                        x_speed = randomNumber(-10, 10);
                    }
                    if (x >= 470) {
                        x_speed = randomNumber(-10, -3);
                    } else if (x < 0) {
                        x_speed = randomNumber(3, 10);
                    }
                }, gameSpeed);
                document.onkeydown = function (e) {
                    if (e.keyCode === 32) {
                        y_speed = randomNumber(-15, -5);;
                    }
                };
                $box.onmouseenter = function () {
                    score++;
                    comb++;
                    console.log(comb, maxComb);
                    if (comb > maxComb) {
                        maxComb = comb;
                        $update($comb, maxComb);
                    }
                    $update($score, score);
                    $box.style.borderColor = ‘blue’;
                    $box.style.color = ‘white’;
                    $box.style.backgroundColor = ‘blue’;
                    y_speed = -15;
                    x_speed = randomNumber(-3, 3);
                };
                $box.onmouseleave = function () {
                    $box.style.borderColor = ‘red’;
                    $box.style.color = ‘red’;
                    $box.style.backgroundColor = ‘white’;
                }
            }
            global.setPos = setPos;
            global.initPos = initPos;
            global.startDrop = startDrop;
            initPos();
            startDrop();
        })(window);
    </script>
</body>
</html>

前端和安卓开发工具|新手用的前端开发工具|linux环境前端开发工具

赞(0)
前端开发者 » 前端开发 JS小游戏
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论