原生JS编写小游戏--跳一跳

最新推荐文章于 2025-05-23 11:40:41 发布
最新推荐文章于 2025-05-23 11:40:41 发布
阅读量2.1k 收藏 8
点赞数 3
CC 4.0 BY-SA版权
分类专栏： HTML CSS JAVASCRIPT 文章标签： javascript 小游戏 跳一跳
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cairo960918/article/details/86613220
这是一个类似微信跳一跳的小游戏，采用HTML、CSS和JavaScript编写，实现了随机生成地图、按钮控制棋子跳跃等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下说的是闲暇编写的一个小游戏--跳一跳，类似于微信的跳一跳，大体实现功能有：

1.先随机生成地图；

2.按住按钮释放后完成动作并进行判断；

首先po一下代码；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跳一跳</title>
    <style>
        *{padding: 0;margin: 0;}
        .game{
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .game .content{
            position: absolute;
            width: 700px;
            height: 400px;
            left: 0;
            top: 0;
        }
        .game #chess{
            position: absolute;
            width: 40px;
            height: 48px;
            overflow: hidden;
            z-index:99;
            transition-property: all;
        }
        .cylinder{
            position: relative;
            width: 70px;
            height: 101px;
            float: left;
        }
        .cylinder .top{
            position: absolute;
            width: 70px;
            height: 35px;
            border-radius: 50%;
            background: yellow;
            z-index: 4;
        } 
        .cylinder .front{
            position: absolute;
            width: 70px;
            height: 70px;
            background: black;
            margin-top: 17px;
            z-index: 3;
        }
        .cylinder .bottom{
            position: absolute;
            width: 70px;
            height: 35px;
            border-radius: 50%;
            background: black;
            margin-top: 65px;
            z-index: 4;
        }
        button{
            position: absolute;
            width: 80px;
            height: 30px;
            font-size: 16px;
            text-align: center;
            line-height: 30px;
            border-radius: 20%;
            bottom: 10px;
            right: 10px;
        }
        .move{
            animation-name: jump;
        }
        /* 跳棋运动动画 */
        @keyframes jump{
            0%{transform: rotate(0deg);}
            10%{transform: rotate(36deg);}
            20%{transform: rotate(72deg);}
            30%{transform: rotate(108deg);}
            40%{transform: rotate(144deg);}
            50%{transform: rotate(180deg);}
            60%{transform: rotate(216deg);}
            70%{transform: rotate(252deg);}
            80%{transform: rotate(288deg);}
            90%{transform: rotate(324deg);}
            100%{transform: rotate(360deg);}
        }
        @-webkit-keyframes jump{
            0%{transform: rotate(0deg);}
            10%{transform: rotate(36deg);}
            20%{transform: rotate(72deg);}
            30%{transform: rotate(108deg);}
            40%{transform: rotate(144deg);}
            50%{transform: rotate(180deg);}
            60%{transform: rotate(216deg);}
            70%{transform: rotate(252deg);}
            80%{transform: rotate(288deg);}
            90%{transform: rotate(324deg);}
            100%{transform: rotate(360deg);}
        }
        @-o-keyframes jump{
            0%{transform: rotate(0deg);}
            10%{transform: rotate(36deg);}
            20%{transform: rotate(72deg);}
            30%{transform: rotate(108deg);}
            40%{transform: rotate(144deg);}
            50%{transform: rotate(180deg);}
            60%{transform: rotate(216deg);}
            70%{transform: rotate(252deg);}
            80%{transform: rotate(288deg);}
            90%{transform: rotate(324deg);}
            100%{transform: rotate(360deg);}
        }
        @-moz-keyframes jump{
            0%{transform: rotate(0deg);}
            10%{transform: rotate(36deg);}
            20%{transform: rotate(72deg);}
            30%{transform: rotate(108deg);}
            40%{transform: rotate(144deg);}
            50%{transform: rotate(180deg);}
            60%{transform: rotate(216deg);}
            70%{transform: rotate(252deg);}
            80%{transform: rotate(288deg);}
            90%{transform: rotate(324deg);}
            100%{transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <div class="game">
        <div class="content">
            <!-- 圆柱体 -->
            <div class="cylinder">
                <!-- 顶部 -->
                <div class="top"></div>
                <!-- 前面 -->
                <div class="front"></div>
                <!-- 底部 -->
                <div class="bottom"></div>
            </div>
        </div>
        <!-- 跳棋 -->
        <div id="chess">
            <div style="width:20px;height:20px;border-radius:50%;background:red;position:absolute;margin-left:13px;z-index: 100;"></div>
            <div style="width:40px;height:40px;background:blue;overflow: hidden;margin-top: 32px;transform:rotate(67deg) skewX(40deg);">
            </div>
        </div>
        <button id="play">按住它</button>
    </div>
</body>
<script>
    var time = 0,score = 0,prev = 1;
    var cylinders = document.getElementsByClassName('cylinder');
    var chess = document.getElementById('chess');
    var arrLeft = [10,20,30,50];
    var arrTop = [210,290];
    // 初始函数，入口函数
    function init(){
        draw();
        BindEvent();
    };   
    // 生成地图
    function draw(){
        var str = '';
        for(var n = 0; n < 7; n++){
            str +="<div class='cylinder'><div class='top'></div><div class='front'></div><div class='bottom'></div></div >"
        }
        document.getElementsByClassName('content')[0].innerHTML = str;
        for(var m = 0; m < 7; m++){
            var Left = arrLeft[Math.floor(Math.random() *arrLeft.length)];
            var Top = arrTop[Math.floor(Math.random() * arrTop.length)];
            cylinders[m].style.marginLeft = Left + 'px';
            cylinders[m].style.marginTop = Top + 'px';
        }
        // 画棋子
        chess.style.marginTop = cylinders[0].offsetTop - 25 + 'px';
        chess.style.marginLeft = cylinders[0].offsetLeft + 13 + 'px';
    }
    // 绑定事件函数
    function BindEvent(){
        document.getElementById('play').onmousedown = function () {
            var timer = setInterval(function () {
                time++;
            }, 100);
            document.getElementById('play').onmouseup = function () {
                clearInterval(timer);
                chess.classList.add('move');
                chess.style.animationDuration = time * 0.1 + 's';
                chess.style.transitionDuration = time * 0.1 + 's';
                if (cylinders[prev - 1].offsetTop > cylinders[prev].offsetTop) {
                    var dx = setTran(prev - 1,prev);
                    chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';
                    chess.style.marginTop = chess.offsetTop +  time * 15 * dx + 'px';
                } else if (cylinders[prev - 1].offsetTop < cylinders[prev].offsetTop) {
                    var dy = setTran(prev - 1, prev);
                    chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';
                    chess.style.marginTop = chess.offsetTop + time * 15 * dy + 'px';
                }else if(cylinders[prev - 1].offsetTop == cylinders[prev].offsetTop){
                    chess.style.marginTop = chess.offsetTop + 'px';
                    chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';
                }
                chess.addEventListener(getTransition(), function () {
                    chess.classList.remove('move');
                    time = 0;
                    judeg();
                    chess.removeEventListener(getTransition(), arguments.callee, false);
                }, false);
            };
        };
    };
    // top和left移动的比例
    function setTran(prev,next) {
        var d_Top = cylinders[prev].offsetTop - cylinders[next].offsetTop;
        var d_Left = cylinders[prev].offsetLeft - cylinders[next].offsetLeft;
        return d_Top/d_Left;
    }
    // 判断动画是否结束
    function getTransition() {
        var t;
        var transitions = {
            'transition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'MozTransition': 'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
        };
        for (t in transitions) {
            if (chess.style[t] !== undefined) {
                return transitions[t];
            }
        }
    };
    // 判断是否跳出边界
    function judeg() {
        for(; prev < cylinders.length;){
            // 判断条件
            var e_Left = chess.offsetLeft > cylinders[prev].offsetLeft -20 && chess.offsetLeft < cylinders[prev].offsetLeft + 90;
            var e_Top = chess.offsetTop + 48 > cylinders[prev].offsetTop && chess.offsetTop + 48 < cylinders[prev].offsetTop + 35;
            if( e_Left && e_Top ){
                score++;
                if(prev >= cylinders.length){
                    prev = 1;
                }else{
                    prev++;
                }
                break;
            }else{
                alert('you lost');
                break;
            }
        }
    }
    init();
</script>
</html>

代码主要分为用来绘制圆柱体分布的draw()函数，用来绑定按钮事件的BindEvent()函数，用来监听CSS3动画是否结束的getTransition()函数，用来判断棋子是否出界的函数judeg()函数。而控制棋子运动的距离，主要是通过当你按下按钮时(onmousedown)触发一个定时器函数中的(time的加加)，弹起按钮时(onmouseup)棋子的left和top运动距离=设定像素值*time。

为了让棋子运动不那么生硬我添加了一些css3动画（rotate属性）以及transition属性。 

实现效果如下：

虽然还有些许不足，但不影响整体功能。

利用原生js制作小游戏
weixin_45044349的博客
05-26 3961
1.编写函数： 该函数对游戏间隔时间、影响游戏的对象的绑定、开始、结束进行编写 /** * * @param {*} duration 间隔时间 * @param {*} thisObj 绑定的this对象 * @param {*} startCallBack 开始回调函数 * @param {*} stopCallBack 结束回调函数 */ function getTimer(duration, thisObj, startCallBack, stopCallBack) { va
js实现跳一跳小游戏
10-15
主要为大家详细介绍了js实现跳一跳小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
王了个王H5游戏源码：开启您的游戏创业之旅
最新发布
gitblog_06711的博客
05-23 540
王了个王H5游戏源码：开启您的游戏创业之旅 去发现同类优质开源项目:https://gitcode.com/ 游戏简介 王了个王H5游戏源码，一款融合了热门消除游戏玩法的H5游戏，具备独立的后台管理系统。仅需简单设置，即可实现个性化的游戏体验，为玩家带来无限乐趣。 项目介绍 在如今H5游戏市场日益繁荣的背景下，王了个王H5游戏源码以其高度的可定制性和丰富的功能特点，成为开发者和创业者的首选。这款游...
原生JS实现的跳一跳小游戏完整实例
10-17
主要介绍了原生JS实现的跳一跳小游戏,结合完整实例形式分析了javascript实现跳一跳游戏的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
原生js小游戏
爱前端的程序媛的博客
04-11 7920
emmmmmm，这个小小的游戏，其实也是模仿别人的拉，但是，我自己又做了一个另外功能的。哈哈哈哈！！ 按钮点击类型 看下大概的效果呗，就是有九个选项，按下不同的方向，就能让小人转变方向进行移动。 核心：定时器、动画、点击事件对象。案例核心就是这三点。 动画的话，其实是分两部分，首先，我们得让小人自己动起来，核心就是利用定时器改变img得src属性。其次我们需要让动起来的小人向上向...
javascript编写的小游戏
01-18
上班无聊吗？下载一个js写的小游戏玩玩把，什么超级玛丽，坦克大战，贪吃蛇等等，玩过之后不妨再学习一下。
原生微信小程序源码 - -小游戏-别踩白块
05-01
本篇文章将深入探讨如何利用微信小程序开发一款经典的小游戏——“别踩白块”。我们将从源码分析入手，详细讲解其核心逻辑、界面设计以及用户交互，帮助读者掌握微信小程序游戏开发的基本技能。 1. 微信小程序基础 ...
使用原生JS编写的跳一跳小游戏详解
"原生JS实现的跳一跳小游戏是一个基于JavaScript编程的简单休闲游戏，类似于微信小程序中的经典游戏。这款游戏的主要目标是控制一个小角色在不断出现的平台上跳跃，通过按下并释放屏幕来控制跳跃力度。游戏的关键...
原生js编写2048小游戏
10-20
原生JavaScript编写的2048小游戏是一个经典的网页游戏开发案例，这个游戏通过键盘上下左右的控制来合并数字块，每合并一次，数字块的数值会相加，最终目标是得到数字“2048”块。此类游戏的实现涵盖了JavaScript编程...
原生JS编写的坦克大战小游戏代码.zip
07-11
原生JS编写的坦克大战小游戏代码，坦克大战的游戏，这个在网站中用的不多，几乎用不上，但是可以很好的学习，当了解原生js之后，也可以自己做一些小游戏玩玩，那样也不错，php中文网推荐下载！
学习JS技术自己编写js《小鱼》小游戏
01-23
学习JS技术自己编写js《小鱼》小游戏，鼠标跟随，鼠标悬停事件，加载图片
原生js实现扫雷小游戏
11-29
这里是博客介绍地址：https://blog.youkuaiyun.com/zmdmwh/article/details/84579884 。
跳一跳源码
12-01
模范微信跳一跳源码，亲测可用，欢迎下载！！！！！！！
用javaScript做的小游戏，很有趣。
04-13
用javaScript做的小游戏，很有趣，自己试着玩玩吧
微信跳一跳源码，资源 js文件基本没调整过，学习
02-10
微信跳一跳源码， js文件基本没有调整过，下来参考学习和研究使用还不错
利用原生JS写成小游戏——欢乐水果机
qq_45847045的博客
04-22 4609
利用原生JS写成小游戏——欢乐水果机 简介： 玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始，如果没有下注则不能开始游戏。 游戏中的物品有八中，分别为：苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。 在放行游戏区左右方为押注区，每种物品下方有加减号按钮，每次点 击加号增加一个筹码注金，反之减号就减少一个筹码注金 开始： 开始键 奖励：GOOD LUCK 由于这个时低配版的，我就没有按...
点灯游戏--原生js
小胡谈前
02-06 591
一、放假闲来无事，复习复习原生js写的一个小游戏，多多指点！ html> head> meta charset="UTF-8"> title>点灯游戏title> style type="text/css"> #tab{ width: 400px;
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 8450
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值