利用JS实现的网页赛车小游戏

最新推荐文章于 2024-05-16 02:28:14 发布
最新推荐文章于 2024-05-16 02:28:14 发布
阅读量1.9k 收藏 14
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53254126/article/details/125468946
版权

​ 今天学完了JavaScript基础,打算做个网页小游戏练练手,想来想去,想起了小时候那种游戏机里的赛车游戏,于是做了一个玩玩,效果如下:

在这里插入图片描述

通过操纵最底下的小车来回躲避上方随机出来的三个障碍车辆从而使游戏进行,是不是找到了小时候的味道?

​ 那么是怎么做的呢? 首先定义这几个小车共同的模型框架(从上图也能看见 a~g代表每个小车内部的7个方块):

 <div class="car">
            <div class="a">
                <div class="black-block"></div>
            </div>
            <div class="b">
                <div class="black-block"></div>
            </div>
            <div class="c">
                <div class="black-block"></div>
            </div>
            <div class="d">
                <div class="black-block"></div>
            </div>
            <div class="e">
                <div class="black-block"></div>
            </div>
            <div class="f">
                <div class="black-block"></div>
            </div>
            <div class="g">
                <div class="black-block"></div>
            </div>
        </div>

然后通过绝对定位设定障碍车辆和玩家控制小车的初始位置.

接下来,通过move()函数让障碍小车向下移动:

//移动函数
function move(obj, attr, target, speed, callback) {
    clearInterval(obj.timer);
    var newValue;
    obj.timer = setInterval(function () {
        if (parseInt(getStyle(obj, attr)) < target) {
            obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + "px";
            newValue = parseInt(obj.style[attr]);
            if (newValue > target) {
                newValue = target;
            }
            if (newValue == target) {
                obj.style[attr] = newValue + "px";
                clearInterval(obj.timer);
                callback && callback();
            }
        }
        else if (parseInt(getStyle(obj, attr)) > target) {
            obj.style[attr] = parseInt(getStyle(obj, attr)) - speed + "px";
            newValue = parseInt(obj.style[attr]);
            if (newValue < target) {
                newValue = target;
            }
            if (newValue == target) {
                obj.style[attr] = newValue + "px";
                clearInterval(obj.timer);
                callback && callback();
            }
        }
    }, 20);
}
//获取属性值
function getStyle(obj, attr) {
    return getComputedStyle(obj, null)[attr];
}

并通过碰撞检测函数实时监测己方小车是否与对面车辆相碰:

//碰撞函数
function collide(obj1, obj2) {
    if (!(obj1.offsetTop + obj1.offsetHeight <= obj2.offsetTop
        || obj1.offsetLeft + obj1.offsetWidth <= obj2.offsetLeft
        || obj1.offsetLeft >= obj2.offsetLeft + obj2.offsetWidth
        || obj1.offsetTop >= obj2.offsetTop + obj2.offsetHeight)) {
        alert("碰上了");
        //重置障碍赛车位置
        oppsiteCar1.style.top = "190px"
        oppsiteCar2.style.top = "-40px"
        oppsiteCar3.style.top = "95px"
        //重置速度
        speed = 2;
        //重置分数
        scores = 0;
    }
}

以上就是主要的部分了,当然最重要的是,如何确实障碍小车刷新之后的间距?这点,我用了一个方法:

//设置障碍车辆1
setInterval(function () {
    if (oppsiteCar1.offsetTop != 560) {
        move(oppsiteCar1, "top", 560, speed);
    } else {
        // 障碍车辆1必须与障碍车辆2保持能让赛车通过的间距
        oppsiteCar1.style.top = parseInt(oppsiteCar2.style.top) - parseInt(Math.random() * 300 + 300) + "px";
    }
}, 30);

思路就是:车辆1(图片上方左一)开始游戏的时候是在车辆2的前面先通过游戏整体的下边框,所以就让车辆1重置时候的位置通过算法保证车辆1和2之间的间距能有一个车的距离就行.

好了,以上就是游戏整体思路的介绍.

整体代码如下:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Racing game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 跑道模型 */
        #container {
            width: 220px;
            height: 560px;
            background-color: #bed6ca;
            position: relative;
            overflow: hidden;
            margin-top: 60px;
        }

        /* 赛车整体模型 */
        .car {
            width: 70px;
            height: 95px;
            /* background-color: #bfa; */
            position: absolute;
        }

        .car>div {
            width: 20px;
            height: 20px;
            background-color: #bed6ca;
            box-sizing: border-box;
            border: 1px solid #1c342c;
            position: absolute;
        }

        .black-block {
            width: 12px;
            height: 12px;
            background-color: #1c342c;
            margin-top: 3px;
            margin-left: 3px;
        }

        .a {
            left: 25px;
        }

        .b {
            top: 25px;
        }

        .c {
            top: 25px;
            left: 25px;
        }

        .d {
            top: 25px;
            left: 50px;
        }

        .e {
            top: 50px;
            left: 25px;
        }

        .f {
            top: 75px;
        }

        .g {
            top: 75px;
            left: 50px;
        }

        /* 我的赛车 */
        .car:first-child {
            top: 460px;
            left: 75px;
        }

        /* 三个障碍车辆 */
        .car:nth-child(2) {
            /* 初始化位置 */
            left: 0px;
            top: 190px;
        }

        .car:nth-child(3) {
            /* 初始化位置 */
            left: 75px;
            top: -40px;
        }

        .car:nth-child(4) {
            /* 初始化位置 */
            left: 150px;
            top: 95px;
        }

        /* 计分板 */
        #score {
            background-color: #bed6ca;
            width: 220px;
            height: 60px;
            font-size: 30px;
            color: #1c342c;
            position: absolute;
            top: 0;
        }
    </style>
    <script>
        window.onload = function () {
            //获取我的赛车
            var myCar = document.querySelectorAll(".car")[0];
            //获取障碍车辆
            var oppsiteCar1 = document.querySelectorAll(".car")[1];
            var oppsiteCar2 = document.querySelectorAll(".car")[2];
            var oppsiteCar3 = document.querySelectorAll(".car")[3];
            //定义速度
            var speed = 2;
            //获取分数
            var scoreBlock = document.getElementById("score");
            var scores = 0;
            //定义方向
            var dir;
            //屏幕绑定获取键位事件,并让我的赛车移动
            document.onkeydown = function (event) {
                dir = event.keyCode;
                //←
                if (dir == 37 && myCar.offsetLeft) {
                    myCar.style.left = myCar.offsetLeft - 75 + "px";
                }
                //→
                if (dir == 39 && myCar.offsetLeft != 150) {
                    myCar.style.left = myCar.offsetLeft + 75 + "px";
                }
            }
            //设置速度随着时间的增长
            setInterval(function () {
                speed += 0.001;
            }, 20)
            //判断是否碰撞
            setInterval(function () {
                collide(myCar, oppsiteCar3);
                collide(myCar, oppsiteCar2);
                collide(myCar, oppsiteCar1);
                //设置分数
                scores++;
                scoreBlock.innerHTML = "Score : " + scores;
            }, 30)
            //设置障碍车辆1
            setInterval(function () {
                if (oppsiteCar1.offsetTop != 560) {
                    move(oppsiteCar1, "top", 560, speed);
                } else {
                    // 障碍车辆1必须与障碍车辆2保持能让赛车通过的间距
                    oppsiteCar1.style.top = parseInt(oppsiteCar2.style.top) - parseInt(Math.random() * 300 + 300) + "px";
                }
            }, 30);
            //设置障碍车辆2
            setInterval(function () {
                if (oppsiteCar2.offsetTop != 560) {
                    move(oppsiteCar2, "top", 560, speed);
                } else {
                    // 障碍车辆2必须与障碍车辆1保持能让赛车通过的间距
                    oppsiteCar2.style.top = parseInt(oppsiteCar1.style.top) - parseInt(Math.random() * 300 + 300) + "px";
                }
            }, 30);
            //设置障碍车辆3
            setInterval(function () {
                if (oppsiteCar3.offsetTop != 560) {
                    move(oppsiteCar3, "top", 560, speed);
                } else {
                    //车辆3的位置随机刷
                    oppsiteCar3.style.top = -Math.random() * 400 + "px";
                }
            }, 30);
            //碰撞函数
            function collide(obj1, obj2) {
                if (!(obj1.offsetTop + obj1.offsetHeight <= obj2.offsetTop
                    || obj1.offsetLeft + obj1.offsetWidth <= obj2.offsetLeft
                    || obj1.offsetLeft >= obj2.offsetLeft + obj2.offsetWidth
                    || obj1.offsetTop >= obj2.offsetTop + obj2.offsetHeight)) {
                    alert("碰上了");
                    //重置障碍赛车位置
                    oppsiteCar1.style.top = "190px"
                    oppsiteCar2.style.top = "-40px"
                    oppsiteCar3.style.top = "95px"
                    //重置速度
                    speed = 2;
                    //重置分数
                    scores = 0;
                }
            }
            //移动函数
            function move(obj, attr, target, speed, callback) {
                clearInterval(obj.timer);
                var newValue;
                obj.timer = setInterval(function () {
                    if (parseInt(getStyle(obj, attr)) < target) {
                        obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + "px";
                        newValue = parseInt(obj.style[attr]);
                        if (newValue > target) {
                            newValue = target;
                        }
                        if (newValue == target) {
                            obj.style[attr] = newValue + "px";
                            clearInterval(obj.timer);
                            callback && callback();
                        }
                    }
                    else if (parseInt(getStyle(obj, attr)) > target) {
                        obj.style[attr] = parseInt(getStyle(obj, attr)) - speed + "px";
                        newValue = parseInt(obj.style[attr]);
                        if (newValue < target) {
                            newValue = target;
                        }
                        if (newValue == target) {
                            obj.style[attr] = newValue + "px";
                            clearInterval(obj.timer);
                            callback && callback();
                        }
                    }
                }, 20);
            }
            //获取属性值
            function getStyle(obj, attr) {
                return getComputedStyle(obj, null)[attr];
            }
        }
    </script>
</head>

<body>
    <div id="container">
        <div class="car">
            <div class="a">
                <div class="black-block"></div>
            </div>
            <div class="b">
                <div class="black-block"></div>
            </div>
            <div class="c">
                <div class="black-block"></div>
            </div>
            <div class="d">
                <div class="black-block"></div>
            </div>
            <div class="e">
                <div class="black-block"></div>
            </div>
            <div class="f">
                <div class="black-block"></div>
            </div>
            <div class="g">
                <div class="black-block"></div>
            </div>
        </div>
        <div class="car">
            <div class="a">
                <div class="black-block"></div>
            </div>
            <div class="b">
                <div class="black-block"></div>
            </div>
            <div class="c">
                <div class="black-block"></div>
            </div>
            <div class="d">
                <div class="black-block"></div>
            </div>
            <div class="e">
                <div class="black-block"></div>
            </div>
            <div class="f">
                <div class="black-block"></div>
            </div>
            <div class="g">
                <div class="black-block"></div>
            </div>
        </div>
        <div class="car">
            <div class="a">
                <div class="black-block"></div>
            </div>
            <div class="b">
                <div class="black-block"></div>
            </div>
            <div class="c">
                <div class="black-block"></div>
            </div>
            <div class="d">
                <div class="black-block"></div>
            </div>
            <div class="e">
                <div class="black-block"></div>
            </div>
            <div class="f">
                <div class="black-block"></div>
            </div>
            <div class="g">
                <div class="black-block"></div>
            </div>
        </div>
        <div class="car">
            <div class="a">
                <div class="black-block"></div>
            </div>
            <div class="b">
                <div class="black-block"></div>
            </div>
            <div class="c">
                <div class="black-block"></div>
            </div>
            <div class="d">
                <div class="black-block"></div>
            </div>
            <div class="e">
                <div class="black-block"></div>
            </div>
            <div class="f">
                <div class="black-block"></div>
            </div>
            <div class="g">
                <div class="black-block"></div>
            </div>
        </div>
    </div>
    <div id="score">Score : 0</div>
</body>

</html>
衛國同學
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
赛车游戏代码大全html,赛车游戏代码
weixin_39634438的博客
06-04 2164
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Co nst D = 100 '方格的宽度Const BT = 3000 '跑道底部的y坐标Dim l1(22) As Integer '每层跑道左边有几个方块Dim l2(22) As Integer '每层跑道右边有几个方块Dim cx As Single '赛车的在x轴的位置Dim cy As IntegerDim i As IntegerPriv...
使用JavaScript完成一个简单的赛车小游戏
热门推荐
明哥
03-21 1万+
效果图： 需求分析： 1、在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加 2、用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车 3、当路人小车与用户小车碰撞，游戏结束 素材图片： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
html5过山车游戏源码
01-17
html5过山车游戏源码 有兴趣的朋友可以参考下 所以请不要商用，仅限学习使用
使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏(1)
最新发布
2401_84976170的博客
05-16 871
这是游戏的截图：1.有计算抓住的怪物的数量2.有背景，英雄，怪物。
利用js制作的简单网页小游戏
Ayingpan的博客
03-28 1万+
利用html和js制作的简单的网页小游戏 这个是我第一次利用js制作wang’y
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】
小猴子喝牛奶的博客
05-03 730
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】序言目录结构新增依赖代码一览world/index.js代码代码解读运行结果 序言 本章将调整相机角度，让整个游戏界面看起来不是一张纸… 目录结构 资源目录里面的结构不变，点击传送门快速查看。 |__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__geometries 定制的物体类文件夹 | |__materials 材质
3d网页小游戏 | 公路赛车 源码
01-06
总的来说，【3D网页小游戏 | 公路赛车 源码】展示了HTML5和WebGL在游戏开发中的强大能力，同时结合JavaScript实现了丰富的互动性和跨平台兼容性。对于想要学习游戏开发或者深入了解HTML5技术的开发者来说，这是一个...
超好玩的html5微信赛车小游戏源码
09-22
"超好玩的html5微信赛车小游戏源码"正是基于这一技术，为用户提供了丰富的娱乐体验。这款html5疯狂赛车游戏，融合了躲避障碍物和速度竞赛的元素，旨在带给玩家刺激与激情。 首先，我们要了解HTML5的核心特性。HTML5...
H5开发的赛车小游戏功能齐全
03-07
本文将围绕“H5开发的赛车小游戏功能齐全”这一主题，深入探讨H5技术在赛车游戏开发中的应用，以及如何构建一个功能完备的H5赛车小游戏。 首先，H5（HTML5）是第五代超文本标记语言，它的出现极大地扩展了HTML的...
H5小游戏源码 交通赛车.zip
10-14
《H5小游戏源码：交通赛车》是一款基于HTML5技术开发的在线竞速...总结，H5小游戏源码“交通赛车”提供了一个很好的学习平台，通过深入研究和实践，你能够掌握H5游戏开发的关键技术，为创作自己的H5游戏奠定坚实基础。
赛车游戏(html+CSS+javascript).rar
07-30
这个压缩包文件“赛车游戏(html+CSS+javascript).rar”包含了一个使用HTML、CSS和JavaScript技术实现的赛车小游戏。这个游戏的开发是前端开发者利用Web技术为用户创造互动体验的一个实例。接下来，我们将深入探讨...
js网页开发小游戏
05-11
js网页开发小游戏,直接点击运行，也可以用dw或者sw打开自己学习调节。非常好玩的小游戏。适合初学者
JS 网页小游戏 打地鼠， 初学者Demo
08-03
网页版打地鼠游戏，代码结构简单清晰，适合入门学习。打开后可以直接运行，无需配置环境。
javascript编写的小游戏
01-18
上班无聊吗？下载一个js写的小游戏玩玩把，什么超级玛丽，坦克大战，贪吃蛇等等，玩过之后不妨再学习一下。
网页 小游戏 java script html
06-30
简单 网页 游戏 Javascript html 入门
网页用javascript做小游戏
01-05
这是个html文件，打开后，用鼠标点一下红褐色的方块，小方块就粘住鼠标了。移动鼠标，使小方块不要被四个蓝色的方块碰到，也不要碰到黑色边界，看看你能坚持多少秒……
html游戏代码_html5实现简单别踩白块小游戏
weixin_40006977的博客
11-13 1万+
内容介绍1.简介别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网页版的，先上一张游戏效果图：属于简化版别踩白块，代码相对较为简单易学，主要涉及通过 javascript 操作元素节点的增删以及属性节点（class）的操作。2.知识点HTML/CSSJavaScript元素节点增删属性节点操作3.项目架构 puzzle |index.html |css/index.cs...
html实现经典赛车小游戏
xcLeigh
05-09 2761
html实现经典赛车小游戏源码，1.通过键盘的 上左右 键，控制汽车行走。2.通过canvas进行公路图形绘制。
《游戏学习》| 3d网页小游戏 | 公路赛车 源码
洛阳泰山的博客
01-11 2935
Three.js 是一款基于 JavaScript 的开源 3D 图形库，它简化了在 Web 浏览器中创建和展示 3D 图形的过程。下面将详细介绍 Three.js 的特点、使用方式以及其提供的主要功能。
python制作赛车小游戏的功能实现
06-02
制作赛车小游戏可以使用Python中的Pygame模块。以下是一些实现游戏的基本功能的方法： 1. 创建游戏窗口和背景：使用Pygame创建一个窗口，并在窗口中加载背景图像。 2. 加载游戏元素：加载玩家图像，赛车图像和其他游戏元素。 3. 碰撞检测：使用Pygame提供的碰撞检测函数来检测赛车是否与其他元素相撞。 4. 移动元素：使用Pygame提供的移动函数来移动玩家和赛车。 5. 分数统计：使用Python中的变量来跟踪玩家的分数，并在游戏过程中更新。 6. 游戏结束：当赛车与其他元素相撞或到达终点时，游戏应该结束。 下面是一个伪代码示例，演示如何实现基本的游戏功能： ``` # 导入Pygame模块 # 初始化Pygame pygame.init() # 创建游戏窗口 screen = pygame.display.set_mode((800, 600)) # 加载背景图像 background = pygame.image.load("background.png") # 加载玩家图像 player = pygame.image.load("player.png") # 加载赛车图像 car = pygame.image.load("car.png") # 初始化分数变量 score = 0 # 游戏循环 while True: # 处理游戏事件 for event in pygame.event.get(): if event.type == pygame.QUIT: # 退出游戏 pygame.quit() sys.exit() # 绘制背景 screen.blit(background, (0, 0)) # 绘制玩家 screen.blit(player, (x, y)) # 绘制赛车 screen.blit(car, (cx, cy)) # 碰撞检测 if player_rect.colliderect(car_rect): # 游戏结束 game_over() # 移动元素 x += dx y += dy cx += cdx cy += cdy # 更新分数 score += 1 # 显示分数 show_score(score) # 更新屏幕 pygame.display.update() ``` 这是一个简单的示例，您可以根据自己的需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值