欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生javascript制作貪吃蛇小游戲的方法分析

 更新時間:2020年02月26日 10:06:12   作者:巴啦啦小能量  
這篇文章主要介紹了原生javascript制作貪吃蛇小游戲的方法,結合具體實例形式分析了JavaScript實現貪吃蛇小游戲的具體步驟、功能實現、數值運算等相關操作技巧,需要的朋友可以參考下

本文實例講述了原生javascript制作貪吃蛇小游戲的方法。分享給大家供大家參考,具體如下:

<!--1、 創(chuàng)建場景 -->
<!-- 2、定義初始數據  以及隨機食物 -->
<!-- 3、控制貪吃蛇方向 -->
<!-- 4、判斷位置以及和隨機食物的位置 增加貪吃蛇長度 -->

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    * {
      margin: 0;
      padding: 0;
    }
    li{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: chocolate;
      position: absolute;
      left: 240px;
      top: 60px;
      z-index: 1;
      list-style: none;
    }
    #box{
      position: absolute;
      left:240px;
      top: 50px;
      width:800px;
      height:600px;
    }
  </style>
</head>
<body>
  <span>
    游戲玩法:上下左右控制小蛇的方向。
    撞到邊緣游戲結束。
    長按方向鍵即可加速。
  </span>
  <ul id="box">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

js開始

function $(id){
    return document.getElementById(id);
  }
  window.onload = function () {
    // 創(chuàng)建背景
    js_background();
    // 隨機食物
    js_food();
    // 創(chuàng)建貪吃蛇
    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()
    }
  }

//貪吃蛇方向// 創(chuàng)建背景

// 貪吃蛇方向// 創(chuàng)建背景
  var direction = "right";
  // 創(chuàng)建背景
  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);
  }

//創(chuàng)建貪吃蛇

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;
    }
    // 改變第一節(jié)
    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相關內容感興趣的讀者可查看本站專題:《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript時間與日期操作技巧總結》及《JavaScript錯誤與調試技巧總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • layui table單元格事件修改值的方法

    layui table單元格事件修改值的方法

    今天小編就為大家分享一篇layui table單元格事件修改值的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 前端JavaScript經典操作之數組常用方法總結

    前端JavaScript經典操作之數組常用方法總結

    數組操作是JavaScript中非常重要也非常常用的技巧,這篇文章主要給大家介紹了關于前端JavaScript經典操作之數組常用方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-07-07
  • JavaScript實現向OL列表內動態(tài)添加LI元素的方法

    JavaScript實現向OL列表內動態(tài)添加LI元素的方法

    這篇文章主要介紹了JavaScript實現向OL列表內動態(tài)添加LI元素的方法,實例分析了javascript操作html元素的技巧,需要的朋友可以參考下
    2015-03-03
  • 微信小程序頂部可滾動導航效果

    微信小程序頂部可滾動導航效果

    最近領導安排做一個小程序之做頭部做導航分類效果,下面小編給大家分享實現代碼,需要的朋友參考下吧
    2017-10-10
  • JavaScript中常見的八個陷阱總結

    JavaScript中常見的八個陷阱總結

    這篇文章主要給大家總結介紹了關于JavaScript中八個常見的陷阱,這些陷阱雖然針對Javascript初學者,但是磚家們你們也可以看一看,避免入了這些坑,感興趣的朋友們下面來一起看看吧。
    2017-06-06
  • ES6入門教程之Class和Module詳解

    ES6入門教程之Class和Module詳解

    這篇文章主要給大家介紹了ES6中Class和Module的相關資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • JS獲取農歷日期具體實例

    JS獲取農歷日期具體實例

    這篇文章介紹了JS獲取農歷日期具體實例,有需要的朋友可以參考一下
    2013-11-11
  • 淺談JS運算符&&和|| 及其優(yōu)先級

    淺談JS運算符&&和|| 及其優(yōu)先級

    下面小編就為大家?guī)硪黄獪\談JS運算符&&和|| 及其優(yōu)先級。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • JS實現超炫網頁煙花動畫效果的方法

    JS實現超炫網頁煙花動畫效果的方法

    這篇文章主要介紹了JS實現超炫網頁煙花動畫效果的方法,實例分析了javascript實現煙花動畫效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • 從JavaScript純函數解析最深刻的函子 Monad實例

    從JavaScript純函數解析最深刻的函子 Monad實例

    這篇文章主要為大家介紹了從JavaScript純函數解析最深刻的函子 Monad實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10

最新評論