案例贪吃蛇，把封装的函数移动到js文件中

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    .map {

      width: 800px;

      height: 600px;

      background-color: #CCC;

      position: relative;

    }

  </style>

</head>

<body>

  <!--画出地图,设置样式-->

  <div class="map"></div>

  <script src="food.js"></script>

  <script src="Snake.js"></script>

  <script src="Game.js"></script>

  <script>

    //初始化游戏对象

    var gm = new Game(document.querySelector(".map"));

    //初始化游戏---开始游戏

    gm.init();

  </script>

</body>

</html>

JS高级---案例贪吃蛇，把封装的函数移动到js文件中的更多相关文章

  1. js面向对象案例 贪吃蛇

    食物对象 (function () { //map:所在的父盒子,obj自身的一些属都具有默认值 function Food(map, obj) { obj = obj || {}; //没有则使用默 ...

  2. JS高级---案例：贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 用js写一个贪吃蛇小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS高级---案例：随机小方块 （贪吃蛇的食物部分）

    案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...

  7. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

  8. JS高级---案例：验证表单

    案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. JS高级---案例：验证密码的强度

    案例:验证密码的强度 1. 给我密码,我返回对应的级别 2. 每次键盘抬起都要获取文本框中的内容, 验证文本框中有什么东西, 得到一个级别, 然后下面的div显示对应的颜色 <!DOCTYPE ...

随机推荐

  1. java学习笔记之IO编程—对象序列化

    对象序列化就是将内存中保存的对象以二进制数据流的形式进行处理,可以实现对象的保存或网络传输. 并不是所有的对象都可以被序列化,如果要序列化的对象,那么对象所在的类一定要实现java.io.Serial ...

  2. 如何使用Mbp模块构建应用.

    上一篇文章https://www.cnblogs.com/mbpframework/p/12073102.html,介绍了一下Mbp的框架.其实这个框架写出来主要是为了学习,当然也可以经过优化运用到实 ...

  3. pytorch深度学习书、论坛和比赛地址

    pytorch深度学习书.论坛和比赛地址 待办 https://zhuanlan.zhihu.com/p/85353963 http://zh.d2l.ai/ https://discuss.gluo ...

  4. Devxtreme 显示Master-Detail数据列表, 数据显示颜色

    ////刷新3/4簇Grid //function GetClusterGrid(id, coverageId, clusterId) { // var region = getRegionCityN ...

  5. Selenium3+python自动化013-自动化数据驱动及模型介绍

    一.查看当前运行的浏览等相关信息 driver=webdriver.Chrome() print(driver.capabilities["version"]) #浏览器版本 pr ...

  6. 高效完成R代码

    为什么R有时候运行慢? 参考https://www.cnblogs.com/qiaoyihang/p/7779144.html 一.为什么R程序有时候会很慢? 1.计算性能的三个限制条件 cpu ra ...

  7. 在vue中使用swiper4.x

    需求 :实现一个左右两边有边距的轮播图vue+swiper4 轮播图左右两边含有上一张和下一张的一部分 先安装swiper: 1.npm install swiper 安装swiper   2.在入口 ...

  8. 本地项目如何上传到github

      首先登录官网注册用户(此处不多介绍),然后需要登录github创建仓库 https://github.com/ 然后取一个自己喜欢的名字(这里我的名字是webclock),点击Create rep ...

  9. ubuntu---【nvcc --version】显示错误，提示 sudo apt-get install nvidia-cuda-toolkit

    重装了一下cuda,然后发现nvcc命令不存在了,终端提示使用 : sudo apt-get install nvidia-cuda-toolkit 来使用nvcc. 注意不要使用这种方式安装.系统认 ...

  10. 【Python】输入身份证号，输出出生日期

    name = input("请输入你的名字:") id = input("请输入你的身份证号码:") year = id[6:10] month = id[10 ...