原生javascript制作贪吃蛇小游戏的方法分析


Posted in Javascript onFebruary 26, 2020

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法。分享给大家供大家参考,具体如下:

<!--1、 创建场景 -->
<!-- 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 () {
    // 创建背景
    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程序设计有所帮助。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
javascript 数组精简技巧小结
Feb 26 #Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 #Javascript
jquery实现直播视频弹幕效果
Feb 25 #jQuery
JavaScript实现打砖块游戏
Feb 25 #Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
You might like
php中++i 与 i++ 的区别
2012/08/08 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
PHP解决中文乱码
2017/04/28 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
详解vue-cli3使用
2018/08/14 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
puppeteer库入门初探
2019/01/09 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python迭代器与生成器详解
2016/03/10 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
python requests.get带header
2020/05/05 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
自我评价的写作规则
2014/01/06 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
离婚案件答辩状
2015/05/22 职场文书
健康教育主题班会
2015/08/14 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers