原生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 相关文章推荐
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
js实现模拟购物商城案例
May 18 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注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
javascript数组排序汇总
2015/07/07 Javascript
详解javascript高级定时器
2015/12/31 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python写日志封装类实例
2015/06/28 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python软件都是免费的吗
2020/06/18 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
中专生职业生涯规划书范文
2014/01/10 职场文书
运动员口号
2014/06/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
简单谈谈Python面向对象的相关知识
2021/06/28 Python