前端实现贪吃蛇小游戏（jquery）

来一颗砂糖橘

已于 2024-03-25 13:12:08 修改

阅读量2.3w

点赞数 2

分类专栏：前端，当然是炫酷的文章标签：前端 jquery css javascript

于 2023-04-28 18:09:14 首次发布

本文链接：https://blog.csdn.net/weixin_42554330/article/details/130432212

版权

前端，当然是炫酷的专栏收录该内容

8 篇文章 1 订阅

订阅专栏

贪吃蛇，基于Jquery实现下图是效果截图以及附上源码，（可以自行复制体验，无额外插件）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>贪吃蛇</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .main{
            position: relative;
            display: flex;
            border: 1px solid #ddd;
            border-width: 1px 0 0 1px;
            margin: 30px;
            border: 4px solid #d5d5d5;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) inset;
        }
        .ul{
            display: flex;
        }
        .li{
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            border-width: 0 1px 1px 0;
            box-sizing: border-box;
            box-shadow: 2px 2px 6px 1px rgb(159 103 103 / 10%);
        }
        .ball-list{
            position: absolute;
            top: 0;
            left: 0;
        }
        .ball-item{
            width: 40px;
            height: 40px;
            background-color: #e35353;
            position: absolute;
            top: 0;
            left: 0;
            /* transition: .1s; */
        }
        .ball-item:nth-child(1){
            transition: .2s;
        }
        .info{
            flex: 1;
            padding: 10px;
        }
        .info>div{
            color: #ff5454;
            font-size: 20px;
            display: flex;
        }
        .info .img{
            width: 200px;
            height: 200px;
            /* background: url("img/预览图_千图_编号44407970.png"); */
            background-size: 500px;
            background-position: -270px 230px;
            opacity: .4;

        }
        .reward-list{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }
        .reward-item{
            position: absolute;
            margin-top: -10px;
            margin-left: -10px;
            border-radius: 10px;
            box-sizing: border-box;
            background: #dd6b6b;
            box-shadow: 0 0 1px 3px rgba(211, 69, 69, .4);
            /* background: url("img/预览图_千图_编号44407970.png"); */
            /* background-size: 150px; */
            /* border: 4px solid #000; */
            /* background-position: -13px -13px; */
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 盘 -->
        <div class="board"></div>
        <!-- 主角 -->
        <div class="ball-list"></div>
        <!-- 奖励 -->
        <div class="reward-list">
            <div class="reward-item"></div>
        </div>
        <div class="info">
            <div class="origin">
                <div class="origin-title">前进方向：</div>
                <div class="origin-content"></div>
            </div>
            <div class="len">
                <div class="len-title">长度：</div>
                <div class="len-count"></div>
            </div>
            <div class="fraction">
                <div class="fraction-title">吞噬得分：</div>
                <div class="fraction-count">0</div>
                <div class="fraction-list"></div>
            </div>
            <div class="boundary">
                <div class="boundary-title">越界次数：</div>
                <div class="boundary-count">0</div>
                <div class="boundary-list"></div>
            </div>
            <div class="img"></div>
        </div>
    </div>
</body>
<script>
    let maxLen = 20//最大长度
    let ballWidth = 40
    let ballHeight = 40
    var isback = {//检查是否为反方向
        left: 'right',
        right: 'left',
        top: 'bottom',
        bottom: 'top'
    }
    var originEN = {//方向对应中文
        left: '向左',
        right: '向右',
        top: '向上',
        bottom: '向下'
    }
    var ballLength = 0//身体长度
    var ballPos = {row: 0, col: 0}//初始位置
    let hisList = []//记录行走位置，用于身体控制身体的轨迹
    var timerOut = 200//每步间隔时长
    var rowLength = 16//棋盘列数
    var colLength = 24//棋盘行数
    var rewardList = []//存储障碍物的位置
    var fractionCount = 0//得分
    var boundaryCount = 0//碰撞边界次数
    for(var i=0;i<rowLength;i++){
        let ul = $('<div class="ul"></div>').attr({
            rowIndex: i
        })
        for(var j=0;j<colLength;j++){
            let li = $('<div class="li"></div>').attr({
                colIndex: j
            })
            ul.append(li)
        }
        $('.board').append(ul)
    }
    var origin = 'right'//方向
    var timer = null
    keyMove()
    addBall()
    startTimer()
    /** 运行主程序 */
    function startTimer(){
        clearInterval(timer)
        timer = setInterval(()=>{
            run()
        }, timerOut)
        run()
    }
    /** 长度增长 */
    function addBall(){
        if(ballLength >= maxLen){return}
        var ballItem = $('<div class="ball-item"></div>')
        $('.ball-list').append(ballItem)

        ballLength += 1
        $('.len-count').html(ballLength)
    }
    /** 行走 */
    function run(){
        if(origin=='right'){
            ballPos.col += 1
        }
        if(origin=='left'){
            ballPos.col -= 1
        }
        if(origin=='bottom'){
            ballPos.row += 1
        }
        if(origin=='top'){
            ballPos.row -= 1
        }
        protect()
        addHis()
        createReward()
        removeReward()
        $('.ball-list').children().each((index, item)=>{
            if(index==0){//头部
                $(item).css({
                    left: ballPos.col * ballWidth,
                    top: ballPos.row * ballHeight,
                })
            }else{//身体
                if(hisList[hisList.length-1-index]){
                    $(item).css({
                        left: hisList[hisList.length-1-index].col * ballWidth,
                        top: hisList[hisList.length-1-index].row * ballHeight,
                    })
                }
            }
        })
    }
    /** 生成障碍物 **/
    function createReward(){
        if(rewardList.length>0){
            return
        }
        const row = parseInt(Math.random()*rowLength)
        const col = parseInt(Math.random()*colLength)
        rewardList.push({
            row, col
        })
        $('.reward-item').css({
            display: 'block',
            width: ballWidth+20,
            height: ballHeight+20,
            left: col * ballWidth,
            top: row * ballHeight,
            'background': `rgba(
                ${parseInt(Math.random()*255)},
                ${parseInt(Math.random()*255)},
                ${parseInt(Math.random()*255)},
                .5
            )`
        })
    }
    /** 吞噬障碍物 **/
    function removeReward(){
        if(ballPos.row==rewardList[0].row && ballPos.col==rewardList[0].col){
            rewardList = []
            fractionCount += 1
            addBall()
            $('.reward-item').hide()
            $('.fraction-count').html(fractionCount)
        }
    }
    /** 更新历史行走轨迹最多100条记录 */
    function addHis(){
        hisList.push({...ballPos})
        hisList = hisList.slice(-100)
    }
    /** 边界保护 */
    function protect(){
        if(ballPos.col > colLength-1){
            ballPos.col = 0
            boundaryCount += 1
        }
        if(ballPos.col < 0){
            ballPos.col = colLength-1
            boundaryCount += 1
        }
        if(ballPos.row > rowLength-1){
            ballPos.row = 0
            boundaryCount += 1
        }
        if(ballPos.row < 0){
            ballPos.row = rowLength-1
            boundaryCount += 1
        }
        $('.boundary-count').html(boundaryCount)
    }
    function keyMove(){
        $('.origin-content').html(originEN[origin])
        $(document).keyup(e=>{
            let nowOrigin = ''
            if(e.keyCode==37){
                nowOrigin = 'left'
            }
            if(e.keyCode==38){
                nowOrigin = 'top'
            }
            if(e.keyCode==39){
                nowOrigin = 'right'
            }
            if(e.keyCode==40){
                nowOrigin = 'bottom'
            }
            if(nowOrigin!='' && nowOrigin!=origin){
                if(origin != isback[nowOrigin]){
                    origin = nowOrigin
                }
                $('.origin-content').html(originEN[origin])
                // startTimer()
            }
        })
    }
</script>
</html>