原生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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
如何将数据从文本导入到mysql
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php实现记事本案例
2020/10/20 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Python创建xml文件示例
2017/03/22 Python
python读取中文txt文本的方法
2018/04/12 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
PyQt5实现简易计算器
2020/05/30 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
中学门卫岗位职责
2013/12/26 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
新闻编辑求职信
2014/04/09 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电