精华内容
下载资源
问答
  • 原生js小游戏

    千次阅读 多人点赞 2020-04-11 22:09:45
    emmmmmm,这个小小的游戏,其实也是模仿别人的拉,但是,我自己又做了一个另外功能的。哈哈哈哈!! 按钮点击类型 看下大概的效果呗,就是有九个选项,按下不同的方向,就能让小人转变方向进行移动。 核心:...

    emmmmmm,这个小小的游戏,其实也是模仿别人的拉,但是,我自己又做了一个另外功能的。哈哈哈哈!!

     

    按钮点击类型

    看下大概的效果呗,就是有九个选项,按下不同的方向,就能让小人转变方向进行移动。

    核心:定时器、动画、点击事件对象。案例核心就是这三点。

    动画的话,其实是分两部分,首先,我们得让小人自己动起来,核心就是利用定时器改变img得src属性。其次我们需要让动起来的小人向上向下或其他方向移动,移动就改变img的偏移量,这里我用的是offset系列。这里得难点就是我们总不能添加九个点击事件一一对应添加侦听器吧,这样代码太冗余。这里是巧妙的使用了img的id、图片方向以及事件对象三者相互结合来解决的问题。

    点击事件:巧妙的运用了通过事件对象target属性获取触发事件的元素,进而获取id,然后去匹配不同方向的图片。在点击中,有效区域只能是我们设置的按钮,就是要处理点击到空白地方出现的问题。还有就是要注意点击停止按钮时,小人的状态。

     

    文字可能有些苍白哈,主要是解释一下实现的核心点,好理解一些。上代码拉。代码中有很详细的介绍的哈。

    window.onload = function () {
        // 需求:
        // 1. 小人自身要运动起来 核心:改变img的src
        // 2. 小人按照指定方向移动 核心:点击事件+动画+定时器
        (function () {
    
            var runImg = document.querySelector("#RPG");
            var btnArea = document.querySelector(".btnArea");
            var i = 0;
            var rpgRunning = null;
            var stopImg = "down"; // 停止时 状态为面向我们
            var speed = 10;
    
            btnArea.addEventListener('click', function (e) {
    
                // 使用一个变量记录点击事件对象的id 用来判断是哪个方向
                var flag = e.target.id;
                // q1. 点击空白处 报错解决方法
                if (flag == '') {
                    return;
                }
                // q2. 先点击stop报错 解决方法
                // 不先点击stop不报错
                if (flag == 'stop') {
                    clearInterval(rpgRunning);
                    runImg.src = 'img/' + stopImg + '-' + 0 + '.png';
                    return;
                }
                // q3. 不清除定时器的话 动画会乱掉 当点击不同方向的动画时,动画紊乱
                // 调用定时器必须先清除一下定时器保证只有一个定时器启动
                clearInterval(rpgRunning);
                rpgRunning = setInterval(function () {
                    // 1.先让自己动起来
                    i++;
                    // if (i > 4) {
                    //     i = 1;
                    // } 等价 i = i%4 但是放的位置不同
                    runImg.src = 'img/' + flag + '-' + i + '.png';
                    i = i % 4;
    
                    // 2. 不同方向的移动
                    // 判断不同的方向 
                    switch (flag) {
                        case "down":
                            runImg.style.top = runImg.offsetTop + speed + "px";
                            break;
                        case "up":
                            runImg.style.top = runImg.offsetTop - speed + "px";
                            break;
                        case "left":
                            runImg.style.left = runImg.offsetLeft - speed + "px";
                            break;
                        case "right":
                            runImg.style.left = runImg.offsetLeft + speed + "px";
                            break;
                        case "lu":
                            runImg.style.left = runImg.offsetLeft - speed + "px";
                            runImg.style.top = runImg.offsetTop - speed + "px";
                            break;
                        case "rightUp":
                            runImg.style.left = runImg.offsetLeft + speed + "px";
                            runImg.style.top = runImg.offsetTop - speed + "px";
                            break;
                        case "ld":
                            runImg.style.left = runImg.offsetLeft - speed + "px";
                            runImg.style.top = runImg.offsetTop + speed + "px";
                            break;
                        case "rd":
                            runImg.style.left = runImg.offsetLeft + speed + "px";
                            runImg.style.top = runImg.offsetTop + speed + "px";
                            break;
                    }
    
                }, 100)
            })
    
        }())
    }

    结构和样式

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Running</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/index.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .btnArea {
                position: absolute;
                right: 50px;
                top: 50px;
                /* border: 1px solid #000; */
                width: 150px;
                height: 150px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
            }
    
            .btnArea input {
                width: 40px;
                height: 40px;
                border-radius: 5px;
                outline: none;
                background-color: orange;
                color: #fff;
                font-weight: bold;
                border: none;
            }
    
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    
    <body>
        <div class="btnArea">
            <input type="button" value="左上" id="lu">
            <input type="button" value="向上" id="up">
            <input type="button" value="右上" id="rightUp">
            <input type="button" value="向左" id="left">
            <input type="button" value="停止" id="stop">
            <input type="button" value="向右" id="right">
            <input type="button" value="左下" id="ld">
            <input type="button" value="向下" id="down">
            <input type="button" value="右下" id="rd">
        </div>
        <img src="img/down-0.png" id="RPG">
    </body>
    
    </html>

     

    键盘类型

    就是基于上个案例自己做了一个按键盘上下左右键实现移动的功能。

    核心点都类似,使用键盘事件判断用户按的是哪个字符的ASCII码,其他的地方都是类似类似的。

    代码:

    (function () {
            var runImg = document.querySelector("img");
            var rpgRuning = null;
            var speed = 10;
            var i = 0;
            var stopImg = "down";
            document.addEventListener('keydown', function (e) {
                var flag = e.keyCode;
                // 37 left
                // 38 up
                // 39 right
                // 40 down
                console.log(flag);
                if (flag == 37) {
                    flag = "left";
                } else if (flag == 38) {
                    flag = "up";
                } else if (flag == 39) {
                    flag = "right";
                } else if (flag == 40) {
                    flag = "down";
                } else if (flag == 32) {
                    clearInterval(rpgRuning);
                    runImg.src = 'img/' + stopImg + '-' + 0 + '.png';
                    return;
                } else {
                    clearInterval(rpgRuning);
                    return;
                }
                // 自己动
                clearInterval(rpgRuning);
                rpgRuning = setInterval(function () {
                    i++;
                    runImg.src = 'img/' + flag + '-' + i + '.png';
                    i = i % 4;
                    // 判断方向 移动
                    switch (flag) {
                        case "left":
                            runImg.style.left = runImg.offsetLeft - speed + "px";
                            break;
                        case "up":
                            runImg.style.top = runImg.offsetTop - speed + "px";
                            break;
                        case "right":
                            runImg.style.left = runImg.offsetLeft + speed + "px";
                            break;
                        case "down":
                            runImg.style.top = runImg.offsetTop + speed + "px";
                            break;
                    }
                }, 100)
            })
        }())

    素材图

     

     

     

     

     

     

     

     

    展开全文
  • 主要介绍了原生JS实现的跳一跳小游戏,结合完整实例形式分析了javascript实现跳一跳游戏的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
  • js原生
  • 基于原生JS开发的一款页面小游戏,亲自动手开发一款小游戏,让枯燥的代码更有意义,为JS学习增添一些乐趣。
  • 里面是自己学习原生JavaScript课程时,敲的连连看小游戏,仅供各位感兴趣的网友下载借阅,学习编程思维和编程逻辑。
  • 基于CSS、HTML、JS所设计的一款简单的网页单机小游戏:寻找四叶草。主要技术涉及:DOM元素操作、鼠标跟随、盒子拖拽、事件对象、定时器、等等
  • 原生JS的2048小游戏特效源码.rar
  • 原生js俄罗斯方块小游戏源码,使用原生js制作的俄罗斯方块的小游戏,在网站上很少用到,但是对于学习,是一个非常好的例子,php中文网推荐下载!
  • 原生JS实现的网页版红包小游戏,随机生成不同面额的红包
  • 自己用原生js实现的网页扫雷小游戏,可能存在些许bug,整体效果还可以,欢迎下载!
  • 这里是博客介绍地址:https://blog.csdn.net/zmdmwh/article/details/84579884 。
  • 原生js实现抽奖小游戏

    千次阅读 2019-04-29 08:26:17
    这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1、HTML结构代码如下: <div class="wrapper"> <ul class="box"></ul> <button class=...

    这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的
    1、HTML结构代码如下:

    <div class="wrapper">
        <ul class="box"></ul>
        <button class="start">开始点名</button>
        <button class="stop">停止</button>
        <div class="choose">
            <span class="niu">幸运的的你</span>
            <img src="~/Content/img1/1.gif" />            
            <span class="name"></span>
        </div>
    </div>
    

    2、css样式设置页面代码如下:
    css代码不仅仅是修饰页面的美观度,还可以设置动画,使得更生动

    .wrapper {
         width: 99%;margin: 8px auto;
         border: 1px solid #ddd;text-align: center;
     }
     .box li {
         vertical-align: top;
         display: inline-block;
         width: 100px;height: 50px;
         border: 2px solid #ddd;
         border-radius: 15px;text-align: center;
         line-height: 50px; margin: 5px;
     }
     .box li.change {
         background-color: red;
         color: #fff;font-weight: bolder;
     }
     .wrapper button {
         display: inline-block;
     }
     .wrapper button {
         border: none;width: 100px;
         height: 50px;border-radius: 10px;
         cursor: pointer;outline: none;
         margin-top: 20px;font-weight: bolder;
         color: #333;background-color: #eee;
     }
     .wrapper .choose {
         position: relative;
         width: 200px;height: 180px;
         border-radius:10px;margin:12px auto;
         border: 1px solid #000;
     }
     .wrapper .choose img {
         position: absolute;bottom: 0;left: 0;
     }
     .niu{
         font-size:24px; margin:0px 0px;
     }
     .name{
         position:absolute;
         font-size:29px;top:43px;left:71px;
     }
    

    3、原生js取出元素

    var boxUl = document.getElementsByClassName('box')[0];
    var start = document.getElementsByClassName('start')[0];//获取点击开始按钮元素
    var stop = document.getElementsByClassName('stop')[0]//获取点击停止按钮元素
    var oLi = document.getElementsByTagName('li');//获取js插入的li标签元素
    // 将插入名字存入数组
    var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]
    // html进行 字符串拼接
    var str = '';
    // 通过for循环进行拼接
    for (var i = 0; i < arr.length; i++) {
        // 利用字符串拼接
        str += "<li>" + arr[i] + "</li>";
    }
    // 将拼接后的html字符串插入到dom结构中
    boxUl.innerHTML = str;
    // 声明timer
    var timer = null;
    

    4、开始按钮的原生js代码如下:

    // 点击开始进行选择
    start.onclick = function () {
        // 每次运行前清除timer
        clearInterval(timer);
        // 设置定时器
        timer = setInterval(function () {
            // 根据数组长度范围生成随机数
            var i = Math.floor(Math.random() * arr.length);
            // 先通过for循环清空所有class名
            for (var j = 0; j < oLi.length; j++) {
                oLi[j].className = "";
            }
            // 为随机选择的li设置选中的class名
            oLi[i].className = "change";
        }, 1);
    };
    

    5、停止按钮原生js代码如下:

    // 点击停止
    stop.onclick = function () {
        // 清空定时器
        clearInterval(timer);
        // 找到选中的元素
        var choise = document.getElementsByClassName('change')[0];
        // 找到选中元素的内容
        var name = choise.innerText;
        // 同时为选中位置添加内容
        var nameSpan = document.getElementsByClassName('name')[0];
        nameSpan.innerText = name+"号";
    }
    

    6、效果图
    在这里插入图片描述

    展开全文
  • 原生JS贪吃蛇小游戏源码是一款基于JS结合Canvas画布制作的贪吃蛇小游戏代码。
  • 原生js编写2048小游戏

    2020-10-20 04:32:51
    本文主要介绍了用原生js编写2048小游戏的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //...
  • 原生js贪吃蛇小游戏代码
  • 原生js+html+css写一个像素鸟小游戏,按回车(enter)键开始/暂停游戏,按空格使小鸟向上飞,穿过钢管,获得胜利
  • 主要为大家详细介绍了原生js实现Flappy Bird小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生JavaScript版连连看游戏,有源码,适合初学者学习,喜欢的朋友可以研究下
  • 原生js打字小游戏.zip

    2020-07-02 01:47:31
    原生js写的打字小游戏,在学习前端的过程中,也把打字速度提上去了,解压到电脑桌面,双击html文件即可打开
  • 我们做贪吃蛇游戏的时候先讲下基本思路: **1、贪吃蛇的运动坐标需要存入一个数组,这个数组不仅是蛇 还是判断蛇蛋生成地点是否合理、设是否吃到蛇蛋和游戏结束的 2、蛇的运动需要定时器来不间断的执行 3、蛇头...
  • 原生js小球撞击游戏

    2018-10-26 15:35:44
    原生js小球撞击游戏,简单的游戏,主要锻炼BOM,DOM等知识点的掌握学习,经供参考学习!!
  • 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力;关于 es6 语法,个人认为以后 es6 ...
  • 该函数对游戏间隔时间、影响游戏的对象的绑定、开始、结束进行编写 /** * * @param {*} duration 间隔时间 * @param {*} thisObj 绑定的this对象 * @param {*} startCallBack 开始回调函数 * @param {*} ...

    1.编写函数:
    该函数对游戏间隔时间、影响游戏的对象的绑定、开始、结束进行编写

    /**
     * 
     * @param {*} duration  间隔时间
     * @param {*} thisObj 绑定的this对象
     * @param {*} startCallBack 开始回调函数
     * @param {*} stopCallBack 结束回调函数
     */
    function getTimer(duration, thisObj, startCallBack, stopCallBack) {
        var timer = null;
        if (thisObj && startCallBack) {
            startCallBack = startCallBack.bind(thisObj); //绑定this对象
        }
        if (thisObj && stopCallBack) {
            stopCallBack = stopCallBack.bind(thisObj);
        }
        return {
            start: function () {
                if (!timer) { //计时器不存在
                    // 创建计时器
                    timer = setInterval(function () {
                        // 如果回调函数存在
                        if (startCallBack) {
                            startCallBack(duration);
                        }
                    }, duration);
                }
            },
            stop: function () {
                if (timer) { //计时器存在,清空计时器
                    clearInterval(timer);
                    timer = null;
                    if (stopCallBack) {
                        stopCallBack(); //停止没有间隔时间
                    }
                }
            }
        }
    }
    

    2、定时器样式的调用
    我利用了像素鸟小游戏里的一些影响因素,并写了定时器。该函数与第一个函数息息相关。

    /**
     * 小鸟煽动翅膀的定时器
     */
    bird.wingTimer = getTimer(100, bird, function () {
        // 开始的时候【每次间隔时间到达的时候】
        this.wingIndex = (this.wingIndex + 1) % 3;
        this.show();
    })
    /**
     * 小鸟向下掉的定时器
     */
    bird.dropTimer = getTimer(16, bird, function (t) {
        //s= vt+ 1/2 at^2
        //v = v0 + at
        var s = this.speed * t + 0.5 * this.a * t * t;
        this.setTop(this.top + s);
        this.speed = this.speed + this.a * t
        this.show();
    })
    

    3、开始和结束的调用

    // 开始游戏的调用
        start: function () {
            skyBg.timer.start();
            landBg.timer.start();
            // 小鸟煽动翅膀
            bird.wingTimer.start();
            // 小鸟掉落
            bird.dropTimer.start();
            // 柱子移动
            pipes.moveTimer.start();
            //生产柱子的计时器
            pipes.produceTimer.start();
            //状态false
            this.paused = false;
        },
        // 游戏的结束
        stop: function () {
            skyBg.timer.stop();
            landBg.timer.stop();
            bird.wingTimer.stop();
            bird.dropTimer.stop();
            pipes.moveTimer.stop();
            pipes.produceTimer.stop();
            this.paused = true;
        },
    

    4、游戏结束界面的制作【非常low】

    <style>
    .over {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .5);
                color: #fff;
                font-size: 4em;
                text-align: center;
                line-height: 600px;
                z-index: 2;
                display: none;
            }
    }
    </style>
    <div class="over">GAME OVER!</div>
    
    //检测游戏是否结束
        gameOver: function () {
    
            if (bird.top === game.maxHeight - bird.height) {
                this.stop();
                document.querySelector("#game .over").style.display = "block";
                this.isGameOver = true;
                return;
            }
      }
    

    5、对游戏的键盘控制
    回车键开始/暂停,空格键跳跃

    //小鸟往上跳【加速度为负值】
    var bird{
     jump: function () {
            this.speed = -0.5;
        }
    }
    
    document.documentElement.onkeydown = function (e) {
        if (e.key === " ") {
            bird.jump();
        } else if (e.key === "Enter") {
            if (game.isGameOver) {
                location.reload();
            } else if (game.paused) {
                game.start();
            } else {
                game.stop();
            }
        }
    }
    
    展开全文
  • 本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到...
  • js原生五子棋小游戏

    2018-11-02 09:01:07
    js文本编写的五子棋,可以悔棋,人机对战,该文本纯属分享,代码有什么不规范的地方请指点,大神多多指教
  • 原生JS编写的坦克大战小游戏代码,坦克大战的游戏,这个在网站中用的不多,几乎用不上,但是可以很好的学习,当了解原生js之后,也可以自己做一些小游戏玩玩,那样也不错,php中文网推荐下载!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,174
精华内容 6,869
关键字:

原生js小游戏