原生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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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合并js请求的例子
2013/11/01 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
React 组件间的通信示例
2018/06/14 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
详解vue v-model
2020/08/31 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
争论的故事教学反思
2014/02/06 职场文书
家长反馈意见及建议
2015/06/03 职场文书
学生病假条范文
2015/08/17 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS