摘要:贪吃蛇源代码地址在手机浏览器上的显示效果贪吃蛇的基本框架首先确定蛇的移动区域,由一组标签构成,给予一个宽高,就组成了蛇的活动区域。以最小宽度为基准贪吃蛇的框架补全在里添加要创建个来作为贪吃蛇的活动场所。
贪吃蛇
源代码地址:https://github.com/jiaoshibo/...
在手机浏览器上的显示效果
贪吃蛇的基本框架首先确定蛇的移动区域,由一组"ul"标签构成,给予"ul"一个宽高,就组成了蛇的活动区域。"li"标签构成了蛇的身体和行进路线,以及蛇的食物,由不同的色块进行区分。"li"标签是在js文件里进行添加的,这个后面再提。
接下来设置游戏的难度选项,用一组"select"标签和三个"option"标签构成了游戏的三个不同的难度等级。游戏的分数记录以及开始、暂停等按键我们也一并设置。
最高分:0
当前得分:0
为了适配移动端各种屏幕分辨率,我们在 css 里使用媒体查询。
@media screen and (min-width: 320px) { html { font-size: 100px; } } @media screen and (min-width: 360px) { html { font-size: 112px; } } /* 以最小宽度320px为基准 */ ul{ width: 3.18rem; height: 3.18rem; border: 0.01rem solid #8312D5; } li{ width: 0.159rem; height: 0.159rem; float: left; }
贪吃蛇的框架补全
在"ul"里添加"li"要创建400个"li"来作为贪吃蛇的活动场所。使用for循环将"li"添加到"ul"中
var lis=[]; function initSpace(){ var frag=document.createDocumentFragment(); for(var i=0;i<400;i++){ var lidom=document.createElement("li"); lidom.innerHTML=i//显示坐标 ulBox.appendChild(lidom); } ulBox.appendChild(frag) lis=ulBox.children }
下面是效果
初始化蛇的位置以及蛇的食物
var snake=[{pos:0,color:"#666"},{pos:1,color:"blue"},{pos:2,color:"green"},{pos:3,color:"red"},{pos:4,color:"#82286c"}] var food={pos:0,color:"red"}
初始化蛇的状态
function randColor(){ return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"; } function initSnake(){ for(var i=0;i初始化蛇的食物。食物的位置随机生成的,我们还要保证食物生成的时候不会出现在蛇的身体内,就需要进行判定.
function isinSnake(index){ for(var i=0;i设置蛇的运动
function snakeMove(){ var snakeHead = snake.slice(-1)[0].pos;//确定蛇头的位置 var sankeTail = snake.slice(0,1)[0].pos;//蛇尾 lis[snakeTail].style.backgroundColor = "#fff"; for(var i=0,l=snake.length;i控制蛇的运动方向。
var fangxiang = 39 //39 right;40 down;37 left; 38 up; //键位的绑定 document.addEventListener("keydown",function(a){ a = a||window.event; switch(a.keyCode){ case 37:{ //left if(fangxiang==39)return false; fangxiang=a.keyCode; break; } case 38:{ //up if(fangxiang==40)return false; fangxiang=a.keyCode; break; } case 39:{ //right if(fangxiang==37)return false; fangxiang=a.keyCode; break; } case 40:{ //down if(fangxiang==38)return false; fangxiang=a.keyCode; break; } } },false);为了能在移动设备上运行,我们还需要引入‘touch.js’,添加滑动操作
box.touch({ swipeDown:function(){ sw(40); }, swipeLeft:function(){ sw(37); }, swipeUp:function(){ sw(38); }, swipeRight:function(){ sw(39) } }) function sw(e){ switch(e){ case 40:{ if(fangxiang==38)return false; fangxiang=e; break; } case 37:{ if(fangxiang==39)return false; fangxiang=e; break; } case 38:{ if(fangxiang==40)return false; fangxiang=e; break; } case 39:{ if(fangxiang==37)return false; fangxiang=e; break; } } }控制蛇的运动方向,以及蛇吃食物
function snakeMove(){ if(fangxiang==40){//down snake[l-1].pos=snake[l-1].pos+20 }else if(fangxiang==37){//left snake[l-1].pos=snake[l-1].pos-1 }else if(fangxiang==38){//up snake[l-1].pos=snake[l-1].pos-20 }else if(fangxiang==39){//right snake[l-1].pos=snake[l-1].pos+1 } snakeHead=snake[l-1].pos; if(snakeHead==food.pos){ snake.unshift({pos:snakeTail,color:food.color}); initFood(); } }蛇的碰撞检测,包括边界检测和自身碰撞检测
function snakeMove(){ var snakeHead = snake.slice(-1)[0].pos; //墙的碰撞检测 if((snakeHead+1)%20==0&&fangxiang==39){//右边界的判断 alert("GAME OVER!!!"); location.reload(); return false; }else if((snakeHead+20)>399&&fangxiang==40){//下边界的判断 alert("GAME OVER!!!"); location.reload(); return false; }else if(snakeHead<20&&fangxiang==38){//上边界的判断 alert("GAME OVER!!!"); location.reload(); return false; }else if(snakeHead%20==0&&fangxiang==37){//左边界检测 alert("GAME OVER!!!"); location.reload(); return false; } //自身碰撞检测 for(var i=0,l=snake.length;i扫尾工作 分数的计算。蛇每次吃食物就加一份,gameover的时候计算最高分
// 初始化最高分 var score = localStorage.getItem("score")||0; max.innerHTML=score; // 最高分 var l=sanke.length; if((l-5)>score){ localStorage.setItem("score",l-5); }设置游戏难度。利用‘option’的value值来控制游戏的难度
初始化速度为500
var speed = 500;按下开始按钮启动一个定时器,蛇就可以自动往前运动了。
var timer=null start.onclick=function(){//开始游戏 //难度等级 speed=level.value; //蛇的运动 clearInterval(timer); timer=setInterval(snakeMove,speed); //背景音乐 bgm.play(); } timeOut.onclick=function(){//暂停游戏 clearInterval(timer); }就酱,我们的贪吃蛇小游戏就编辑完成啦。还有游戏的BGM,大家可以找些素材自行添加哦。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51133.html
摘要:贪吃蛇源代码地址在手机浏览器上的显示效果贪吃蛇的基本框架首先确定蛇的移动区域,由一组标签构成,给予一个宽高,就组成了蛇的活动区域。以最小宽度为基准贪吃蛇的框架补全在里添加要创建个来作为贪吃蛇的活动场所。 贪吃蛇 源代码地址:https://github.com/jiaoshibo/... 在手机浏览器上的显示效果 showImg(https://segmentfault.com/img...
需要具备知识:1.html、css基础2.jquery基础 具体实现方法: 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...
需要具备知识:1.html、css基础2.jquery基础 具体实现方法: 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...
此篇文章主要是详细介绍了python完成简单的贪吃蛇小游戏附编号,文章内容紧扣主题进行详尽的基本介绍,具有很强的参考意义,需用的朋友可以学习一下 序言: 不知道有没有同学们和我一样,最开始触碰程序编程的动机就是为了做一个游戏打? 接下来要跟大家分享是指一个pygame所写的贪食蛇手机游戏: 贪食蛇这一个手机游戏在编程设计里的熟客,由于: 简易,最基本游戏情节你只需要蛇和食物2个就可以...
摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...
阅读 2701·2021-11-22 13:54
阅读 1022·2021-10-14 09:48
阅读 2275·2021-09-08 09:35
阅读 1531·2019-08-30 15:53
阅读 1117·2019-08-30 13:14
阅读 561·2019-08-30 13:09
阅读 2501·2019-08-30 10:57
阅读 3317·2019-08-29 13:18