资讯专栏INFORMATION COLUMN

在手机或电脑浏览器上玩贪吃蛇

zhangfaliang / 2682人阅读

摘要:贪吃蛇源代码地址在手机浏览器上的显示效果贪吃蛇的基本框架首先确定蛇的移动区域,由一组标签构成,给予一个宽高,就组成了蛇的活动区域。以最小宽度为基准贪吃蛇的框架补全在里添加要创建个来作为贪吃蛇的活动场所。

贪吃蛇

源代码地址:https://github.com/jiaoshibo/...

在手机浏览器上的显示效果

贪吃蛇的基本框架

首先确定蛇的移动区域,由一组"ul"标签构成,给予"ul"一个宽高,就组成了蛇的活动区域。"li"标签构成了蛇的身体和行进路线,以及蛇的食物,由不同的色块进行区分。"li"标签是在js文件里进行添加的,这个后面再提。

</>复制代码

    接下来设置游戏的难度选项,用一组"select"标签和三个"option"标签构成了游戏的三个不同的难度等级。游戏的分数记录以及开始、暂停等按键我们也一并设置。

    </>复制代码

    1. 最高分:0

    2. 当前得分:0

    为了适配移动端各种屏幕分辨率,我们在 css 里使用媒体查询。

    </>复制代码

    1. @media screen and (min-width: 320px) {
    2. html {
    3. font-size: 100px;
    4. }
    5. }
    6. @media screen and (min-width: 360px) {
    7. html {
    8. font-size: 112px;
    9. }
    10. }
    11. /* 以最小宽度320px为基准 */
    12. ul{
    13. width: 3.18rem;
    14. height: 3.18rem;
    15. border: 0.01rem solid #8312D5;
    16. }
    17. li{
    18. width: 0.159rem;
    19. height: 0.159rem;
    20. float: left;
    21. }

    </>复制代码

    1. 贪吃蛇的框架补全

    在"ul"里添加"li"要创建400个"li"来作为贪吃蛇的活动场所。使用for循环将"li"添加到"ul"中

    </>复制代码

    1. var lis=[];
    2. function initSpace(){
    3. var frag=document.createDocumentFragment();
    4. for(var i=0;i<400;i++){
    5. var lidom=document.createElement("li");
    6. lidom.innerHTML=i//显示坐标
    7. ulBox.appendChild(lidom);
    8. }
    9. ulBox.appendChild(frag)
    10. lis=ulBox.children
    11. }

    下面是效果

    </>复制代码

    1. 初始化蛇的位置以及蛇的食物

    </>复制代码

    1. var snake=[{pos:0,color:"#666"},{pos:1,color:"blue"},{pos:2,color:"green"},{pos:3,color:"red"},{pos:4,color:"#82286c"}]
    2. var food={pos:0,color:"red"}

    </>复制代码

    1. 初始化蛇的状态

    </>复制代码

    1. function randColor(){
    2. return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
    3. }
    4. function initSnake(){
    5. for(var i=0;i
    6. </>复制代码

      1. 初始化蛇的食物。食物的位置随机生成的,我们还要保证食物生成的时候不会出现在蛇的身体内,就需要进行判定.

    7. </>复制代码

      1. function isinSnake(index){
      2. for(var i=0;i
      3. </>复制代码

        1. 设置蛇的运动

      4. </>复制代码

        1. function snakeMove(){
        2. var snakeHead = snake.slice(-1)[0].pos;//确定蛇头的位置
        3. var sankeTail = snake.slice(0,1)[0].pos;//蛇尾
        4. lis[snakeTail].style.backgroundColor = "#fff";
        5. for(var i=0,l=snake.length;i
        6. </>复制代码

          1. 控制蛇的运动方向。

        7. </>复制代码

          1. var fangxiang = 39 //39 right;40 down;37 left; 38 up;
          2. //键位的绑定
          3. document.addEventListener("keydown",function(a){
          4. a = a||window.event;
          5. switch(a.keyCode){
          6. case 37:{
          7. //left
          8. if(fangxiang==39)return false;
          9. fangxiang=a.keyCode;
          10. break;
          11. }
          12. case 38:{
          13. //up
          14. if(fangxiang==40)return false;
          15. fangxiang=a.keyCode;
          16. break;
          17. }
          18. case 39:{
          19. //right
          20. if(fangxiang==37)return false;
          21. fangxiang=a.keyCode;
          22. break;
          23. }
          24. case 40:{
          25. //down
          26. if(fangxiang==38)return false;
          27. fangxiang=a.keyCode;
          28. break;
          29. }
          30. }
          31. },false);
        8. 为了能在移动设备上运行,我们还需要引入‘touch.js’,添加滑动操作

        9. </>复制代码

          1. box.touch({
          2. swipeDown:function(){
          3. sw(40);
          4. },
          5. swipeLeft:function(){
          6. sw(37);
          7. },
          8. swipeUp:function(){
          9. sw(38);
          10. },
          11. swipeRight:function(){
          12. sw(39)
          13. }
          14. })
          15. function sw(e){
          16. switch(e){
          17. case 40:{
          18. if(fangxiang==38)return false;
          19. fangxiang=e;
          20. break;
          21. }
          22. case 37:{
          23. if(fangxiang==39)return false;
          24. fangxiang=e;
          25. break;
          26. }
          27. case 38:{
          28. if(fangxiang==40)return false;
          29. fangxiang=e;
          30. break;
          31. }
          32. case 39:{
          33. if(fangxiang==37)return false;
          34. fangxiang=e;
          35. break;
          36. }
          37. }
          38. }
        10. </>复制代码

          1. 控制蛇的运动方向,以及蛇吃食物

        11. </>复制代码

          1. function snakeMove(){
          2. if(fangxiang==40){//down
          3. snake[l-1].pos=snake[l-1].pos+20
          4. }else if(fangxiang==37){//left
          5. snake[l-1].pos=snake[l-1].pos-1
          6. }else if(fangxiang==38){//up
          7. snake[l-1].pos=snake[l-1].pos-20
          8. }else if(fangxiang==39){//right
          9. snake[l-1].pos=snake[l-1].pos+1
          10. }
          11. snakeHead=snake[l-1].pos;
          12. if(snakeHead==food.pos){
          13. snake.unshift({pos:snakeTail,color:food.color});
          14. initFood();
          15. }
          16. }
        12. </>复制代码

          1. 蛇的碰撞检测,包括边界检测和自身碰撞检测

        13. </>复制代码

          1. function snakeMove(){
          2. var snakeHead = snake.slice(-1)[0].pos;
          3. //墙的碰撞检测
          4. if((snakeHead+1)%20==0&&fangxiang==39){//右边界的判断
          5. alert("GAME OVER!!!");
          6. location.reload();
          7. return false;
          8. }else if((snakeHead+20)>399&&fangxiang==40){//下边界的判断
          9. alert("GAME OVER!!!");
          10. location.reload();
          11. return false;
          12. }else if(snakeHead<20&&fangxiang==38){//上边界的判断
          13. alert("GAME OVER!!!");
          14. location.reload();
          15. return false;
          16. }else if(snakeHead%20==0&&fangxiang==37){//左边界检测
          17. alert("GAME OVER!!!");
          18. location.reload();
          19. return false;
          20. }
          21. //自身碰撞检测
          22. for(var i=0,l=snake.length;i
          23. 扫尾工作
          24. </>复制代码

            1. 分数的计算。蛇每次吃食物就加一份,gameover的时候计算最高分

          25. </>复制代码

            1. // 初始化最高分
            2. var score = localStorage.getItem("score")||0;
            3. max.innerHTML=score;
            4. // 最高分
            5. var l=sanke.length;
            6. if((l-5)>score){
            7. localStorage.setItem("score",l-5);
            8. }
          26. </>复制代码

            1. 设置游戏难度。利用‘option’的value值来控制游戏的难度

          27. </>复制代码

          28. 初始化速度为500

          29. </>复制代码

            1. var speed = 500;
          30. 按下开始按钮启动一个定时器,蛇就可以自动往前运动了。

          31. </>复制代码

            1. var timer=null
            2. start.onclick=function(){//开始游戏
            3. //难度等级
            4. speed=level.value;
            5. //蛇的运动
            6. clearInterval(timer);
            7. timer=setInterval(snakeMove,speed);
            8. //背景音乐
            9. bgm.play();
            10. }
            11. timeOut.onclick=function(){//暂停游戏
            12. clearInterval(timer);
            13. }
          32. 就酱,我们的贪吃蛇小游戏就编辑完成啦。还有游戏的BGM,大家可以找些素材自行添加哦。

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/51133.html

    相关文章

    • 手机电脑览器上玩贪吃

      摘要:贪吃蛇源代码地址在手机浏览器上的显示效果贪吃蛇的基本框架首先确定蛇的移动区域,由一组标签构成,给予一个宽高,就组成了蛇的活动区域。以最小宽度为基准贪吃蛇的框架补全在里添加要创建个来作为贪吃蛇的活动场所。 贪吃蛇 源代码地址:https://github.com/jiaoshibo/... 在手机浏览器上的显示效果 showImg(https://segmentfault.com/img...

      Big_fat_cat 评论0 收藏0
    • 用jquery写贪吃

      需要具备知识:1.html、css基础2.jquery基础 具体实现方法: 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

      gitmilk 评论0 收藏0
    • 用jquery写贪吃

      需要具备知识:1.html、css基础2.jquery基础 具体实现方法: 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

      h9911 评论0 收藏0
    • python完成简单的贪吃小游戏附编号

        此篇文章主要是详细介绍了python完成简单的贪吃蛇小游戏附编号,文章内容紧扣主题进行详尽的基本介绍,具有很强的参考意义,需用的朋友可以学习一下  序言:  不知道有没有同学们和我一样,最开始触碰程序编程的动机就是为了做一个游戏打?  接下来要跟大家分享是指一个pygame所写的贪食蛇手机游戏:  贪食蛇这一个手机游戏在编程设计里的熟客,由于:  简易,最基本游戏情节你只需要蛇和食物2个就可以...

      89542767 评论0 收藏0
    • 使用TypeScript和Canvas编写移动端贪吃大作战游戏

      摘要:基本介绍一款移动端贪吃蛇大作战游戏。主要的游戏逻辑有贪吃蛇移动碰撞检测贪吃蛇碰撞碰撞墙壁和吃食物。贪吃蛇的身体如何跟随头部移动需要分为两种情况,在单位时间内贪吃蛇移动一单位长度和贪吃蛇移动多单位长度。 基本介绍 一款移动端贪吃蛇大作战游戏。(只支持移动端) 这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项...

      AlphaWallet 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <