大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说前端实现贪吃蛇小游戏（jquery）,希望您对编程的造诣更进一步.
贪吃蛇，基于
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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/36715.html
