使用JavaScript完成一个简单的赛车小游戏

最新推荐文章于 2024-05-07 19:26:20 发布

陈老说

最新推荐文章于 2024-05-07 19:26:20 发布

阅读量1.6w

点赞数 8

文章标签：山月剧明哥 JavaScript游戏案例前端游戏有趣的游戏案例学习

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/81091310

版权

HTML5 JavaScript 游戏开发赛车游戏碰撞检测

关键词由CSDN通过智能技术生成

效果图：

需求分析：

1、在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加

2、用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车

3、当路人小车与用户小车碰撞，游戏结束

素材图片：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赛车游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
        }
        #bg {
            position: relative;
            margin: 0 auto;
            width: 320px;
            background: url(racing.png) repeat-y;
        }
        .box, #mybox {
            position: absolute;
            width: 45px;
            height: 60px;
            background-color: #333;
        }
        #mybox {
            background-color: red;
        }

    </style>
</head>
<body>
<div id="bg">
  <div id="mybox"></div>

    <script>
        window.onload = function () {
            alert('使用左右方向键或者A,D字母控制小车左右移动\n\n点击确定按钮开始游戏')
            // 捕获背景（父元素）
            var bg = this.document.getElementById('bg');
            // 获取屏幕高度,赋予背景
            var h = this.document.documentElement.clientHeight;
            var w = bg.clientWidth;
            bg.style.height = h + 'px';
            // 生成box
            function createBox() {
                var box = this.document.createElement('div')
                box.setAttribute('class', 'box');
                // 生成的位置---> 22;88;172;238 四个赛道随机生成
                var randNum = Math.random();
                var deltai = (((w - 20) / 4) - boxw) / 2;
                var i = deltai + 10; // 起始横坐标
                if (randNum < 0.25) {
                    box.style.left = i + 'px';
                } else if (randNum >= 0.25 && randNum < 0.5) {
                    box.style.left = i + boxw + (2 * deltai) + 'px';
                } else if (randNum >= 0.5 && randNum < 0.75) {
                    box.style.left = i + (2 * boxw) + (4 * deltai) + 'px';
                } else {
                    box.style.left = i + (3 * boxw) + (6 * deltai) + 'px';
                };
                bg.appendChild(box);
                moveBox(box); // 为每个box绑定对象
                end(box);
            };
            // 每隔t毫秒向父元素添加一个box
            var t = 1500;
            function add() {
                // console.log('add');
                createBox();
            };
            setInterval(function () {
                add();
            }, t);
            // 使得每个box运动起来
            var deltaX = 1;
            var time = 10;
            function moveBox(obj) {
                deltaX += 0.1;
                var pos = 0;
                var id = setInterval(move, time);
                function move() {
                    if (pos == (h - boxh)) {
                        clearInterval(id);
                        bg.removeChild(obj); // 移除运动到底的box
                    } else {
                        pos += deltaX;
                        obj.style.top = pos + 'px';
                    }
                }
            }
            // 加入自定义小车
            var mybox = this.document.getElementById('mybox');
            var boxh = mybox.clientHeight;
            var boxw = mybox.clientWidth;
            // 指定初始位置
            mybox.style.top = h - boxh - 10 + 'px';
            mybox.style.left = w / 2 + 'px';
            var speed = 10;

            function moveLeft() {
                if (mybox.offsetLeft >= 25) {
                    mybox.style.left = mybox.offsetLeft - speed + 'px';
                }
            };
            function moveRight() {
                if (mybox.offsetLeft <= w - boxw - 20) {
                    mybox.style.left = mybox.offsetLeft + speed + 'px';
                }
            };
            var sensitivity = 30; // 控制方向灵敏度，越小越灵敏
            setInterval(function () {
                switch (dir) {
                    case 65:
                        moveLeft();
                        break;
                    case 37:
                        moveLeft();
                        break;
                    case 68:
                        moveRight();
                        break;
                    case 39:
                        moveRight();
                        break;
                }
            }, sensitivity);
            // 边缘判断
            function end(obj) {
                var v = deltaX / time;
                var x = h - 10 - 2 * boxh;
                var t = x / v;
                setTimeout(function () {
                    var deltaMin = obj.offsetLeft;
                    var deltaMax = obj.offsetLeft + boxw;
                    if (mybox.offsetLeft <= deltaMax && mybox.offsetLeft >= deltaMin) {
                        alert('Game End');
                        window.location.reload();
                    }
                }, t + 300);
            };
            // 绑定键盘事件
            this.document.onkeydown = function (event) {
                event = event || window.event;
                // up 38 w 87；down 40 s 83；left 37 a 65；right 39 d 68
                dir = event.keyCode;
            };
            this.document.onkeyup = function () {
                dir = 0;
            };
        }
    </script>
</div>
</body>
</html>

陈老说

关注

8
点赞
踩
57

收藏

觉得还不错? 一键收藏
打赏
4
评论
使用JavaScript完成一个简单的赛车小游戏

效果图：需求分析：1、在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加2、用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车3、当路人小车与用户小车碰撞，游戏结束素材图片：源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...
复制链接

扫一扫