纯HTML+JS实现跑酷游戏

愚公爱上精卫

已于 2023-07-21 16:17:40 修改

阅读量503

点赞数 1

分类专栏： js 文章标签： html 前端 javascript

于 2023-07-21 16:04:08 首次发布

本文链接：https://blog.csdn.net/m0_64520392/article/details/131853423

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果展示：

跑酷游戏很简单最难理解的就是碰撞检测的原理了，首先要先了解碰撞原理，写起来就简单多了！看一下几张图就明白了。

第一、获取box盒字的left 值跟top值在获取红色盒字的left值跟 top值让他们的值进行大小判断

第二、如果A点大于B点就撞上了如何获取A点呢用left+box盒字的宽度，就能获取到A点

B点直接用 hong盒字的left值

第三、获取绿色盒字的c点直接用left 就可以红盒字的D点用 left+hong盒字的宽度

第四、这个跟上面几个都一样绿色盒字的E点使用box盒字的top+高度就能获取到E点

而红盒字就直接用top值就可以

第五、跟上面一样获取hong盒字的F点用红盒字的top+高度，绿色盒字就直接用top值就可以

百度网盘里面有完整的图片跟代码连接：https://pan.baidu.com/s/1_PPDNG_f0GDnBwCfeq1S0w

提取码：7780

下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 1200px;
        height: 300px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        border: solid 2px #000;
      
        /* 图片无法选中 */
    }
    .img-bei{
        width: 2400px;
        height: 300px;
        position: absolute;
        animation: open 5s linear infinite;
        /* animation:paused */
    }
    .img-bei>img{
        width: 1200px;
        float: left;
        margin-top: 250px;
    }
    @keyframes open{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-1200px);
        }
    }
    
    .qiu{
        width: 40px;
        height: 60px;
        line-height: 60px;
        /* border-radius: 50px; */
        /* background-color: rgb(0, 8, 255); */
        position: absolute;
        z-index: 100;
        text-align: center;
        font-size: 25px;
        color: aliceblue;
        top: 200px;
        left: 200px;
        transition: 0.5s;
        display: flex;
        
    }
    .ul{
        /* width: 100px; */
        height: 60px;
        display: flex;
        justify-content: space-between;
        /* position: absolute; */
        /* background-color: cadetblue; */
       margin-top:  200px;
       margin-left: 704px;
       /* transition: 0.3s; */
    }
    .zhangai{
        list-style: none;
        width: 60px;
        height: 60px;
        line-height: 60px;
        /* border-radius: 50px; */
        /* background-color: rgb(255, 0, 0); */
        /* position: absolute; */
        z-index: 100;
        text-align: center;
        font-size: 25px;
        color: aliceblue;
        font-weight: bold;
        float: left;
        align-items: center ;
        /* margin-right: 80px; */
    }
    .zhangai>img{
        width: 100%;
    }
</style>
<body>
    <div style="font-size: 18px;color: rgb(159, 0, 0);">积分: <span id="jifen"></span></div>
    <div class="box">
        <div id="bijitu" class="img-bei">
            <img src="./img/微信图片_20230714182148.png" alt="">
            <img src="./img/微信图片_20230714182148.png" alt="">
        </div>
        <div class="qiu" id="Qu">
          <img id="zhendonghua" src="./img/1.jpg" alt="">
        </div>
        <ul class="ul" id="uto" style="margin-left: 172px;">
            <li class="zhangai">
                <img src="./img/xiangzi.png" alt="">
            </li>
        </ul>
    </div>
    <h1 style="text-align: center;">w跳</h1>
    <h1 style="text-align: center;">刷新页面开始</h1>
</body>
<script> 
    let zt = true;
    let bj  = document.getElementById("bj");
    let Qu = document.getElementById("Qu");
    let ULi = document.querySelectorAll("ul li");
    let uto = document.getElementById("uto");
    let zhendonghua = document.getElementById('zhendonghua');
    let fliji = uto.offsetLeft;
    let jian = 704;
    let Lig = ['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg'];
    let xiangzi = 0;
    let jifen = document.getElementById("jifen");
    let bijitu = document.getElementById('bijitu');
    //键盘事件
    document.onkeyup = function (e) {
        let yy = Qu.offsetTop;
        if(e.keyCode == 87){//w
            if(yy==200){
                Qu.style='top:80px';
                let set = setInterval(function head() {
                    Qu.style='bottom:250px';
                    clearInterval(set);
                },600)           
            }   
        } 
    } 
    // 碰撞检测
    function Peng() {
        let xx = Qu.offsetLeft;
        let yy = Qu.offsetTop;
        for (let i = 0; i < ULi.length; i++) {
            console.log(yy,Qu.offsetHeight);
            if( 
                ULi[i].offsetLeft+ULi[i].offsetWidth>xx &&
                ULi[i].offsetTop+ULi[i].offsetHeight>yy &&
                ULi[i].offsetLeft<xx+Qu.offsetWidth &&
                ULi[i].offsetTop<yy+Qu.offsetHeight
                ){
                    bijitu.style="animation:paused;";
                    uto.style.marginLeft = 704+'px';
                    clearInterval(move);
                    clearInterval(ren);
                    
                    let kashi = setTimeout (function kashi(){
                        let ale = confirm("装上了！！ ");
                        if(ale){
                            window.location.reload()
                        }else{
                            console.log("你真菜");
                        }
                    },100)
            }
        }
    }
   
    // 箱子移动
    let move = setInterval(function dong(){
    let nupx = jian -1;
    uto.style.marginLeft = nupx+'px';
    Peng();
    jian = jian-1;
    if(jian<-130){
        uto.style.marginLeft = 704+'px';
        jian=704;
        xiangzi = xiangzi+10; 
        jifen.innerHTML = xiangzi
    }
   },1)
   //小人跑起来
   let yiyi= 0;
   let ren = setInterval(function reqi(){
        if(yiyi!=7){
            zhendonghua.src = Lig[yiyi];
            yiyi++;
            console.log(zhendonghua.src,yiyi);
        }else{
            zhendonghua.src = Lig[0]; 
            yiyi=0;
        }
   },150)
   
</script>
</html>
<!-- 链接：https://pan.baidu.com/s/1_PPDNG_f0GDnBwCfeq1S0w 
提取码：7780 -->