189 8069 5689

使用javascript怎么制作贪吃蛇小游戏

本篇文章为大家展示了使用javascript怎么制作贪吃蛇小游戏，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站服务项目包括临西网站建设、临西网站制作、临西网页制作以及临西网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，临西网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到临西省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

HTML部分




  
  
  


  
    游戏玩法：上下左右控制小蛇的方向。
    撞到边缘游戏结束。
    长按方向键即可加速。
  
  
    
  • 
    
  • 
    
  • 
  

    js开始

    function $(id){
    return document.getElementById(id);
  }
  window.onload = function () {
    // 创建背景
    js_background();
    // 随机食物
    js_food();
    // 创建贪吃蛇
    create_snake();
    document.onkeydown = function(event){
      let evt = event || window.event;
      switch (evt.keyCode) {
        case 37:direction="left";break;
        case 38:direction="up";break;
        case 39:direction="right";break;
        case 40:direction="down";break;
        default:;
        // console.log(evt.keyCode);
      }
      start_snake()
    }
  }

    //贪吃蛇方向// 创建背景

    // 贪吃蛇方向// 创建背景
  var direction = "right";
  // 创建背景
  function js_background(){
    let bg = document.createElement("div");
    bg.id = "js_bg";
    bg.style.cssText = "position:relative;margin :50px auto; background:skyblue; width:800px; height:600px;";
    document.body.appendChild(bg);
  }

    //随机食物

    var food_left = 0;
  var food_top = 0;
  function js_food(){
    food_left = parseInt(Math.random()*800/20)*20;
    food_top = parseInt(Math.random()*600/20)*20;
    let foodDiv = document.createElement("div");
    foodDiv.style.cssText = "position:absolute;width:20px; height: 20px; border-radius:50%; background:yellow;";
    foodDiv.style.left = food_left+"px";
    foodDiv.style.top = food_top+"px";
    foodDiv.id = "foodDiv";
    $("js_bg").appendChild(foodDiv);
  }

    //创建贪吃蛇

    function create_snake(){
    let lis = document.getElementsByTagName("li");
    lis[0].style.backgroundColor = "black";
    lis[0].style.zIndex = 1;
    for(let i = 0; i < lis.length; i++){
      lis[i].style.left = 280-(i*20)+"px";
      lis[i].style.top = 60+"px";
    }
  }

    //定时器

      // 定时器
  let timre = setInterval(start_snake,200);
  let lis = document.getElementsByTagName("li");
  function start_snake(){
    let left=parseFloat(lis[0].style.left);
    let top= parseFloat(lis[0].style.top);
    // console.log(top)
    switch (direction) {
      case "left":left = (left-20);break;
      case "up":top = (top-20);break;
      case "right":left = (left+20);break;
      case "down":top = (top+20);break;
      default:;
    }
    if(left<0 || left>800-20 || top<0 || top>600-20){
        window.clearInterval(timre);
        alert("亲，您Game Over");
        return;
    }
    // for(let i = 1; i <= lis.length-1; i++){
    //   lis[i].style.left = lis[i-1].style.left;
    //   lis[i].style.top = lis[i-1].style.top;
    // }
    for(var i=lis.length-1;i>0;i--){
      lis[i].style.left = lis[i-1].style.left;
      lis[i].style.top = lis[i-1].style.top;
    }
    // 改变第一节
    lis[0].style.left = left+"px";
    lis[0].style.top = top+"px";
    // console.log(food_top+"----------");
    // console.log(top);
    if(left == food_left && top == food_top){
      eat();
    }
  }
  function eat() {
    $("js_bg").removeChild($("foodDiv"));
    js_food();
    // alert("ll");
    let li = document.createElement("li");
    $("js_bg").appendChild(li);
    // create_snake();
  }

    JavaScript的特点

    1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

    上述内容就是使用javascript怎么制作贪吃蛇小游戏，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


    当前文章：使用javascript怎么制作贪吃蛇小游戏
    文章网址：http://cdxtjz.cn/article/ijpopi.html

    其他资讯