案例贪吃蛇，把封装的函数移动到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. docker镜像ubuntu封装jdk1.8.0【dockerfile】

    github地址:https://github.com/laileman/Docker/Dockerfile/ubuntu-jdk1.8.0_172 1-目录结构 2- dockerfile内容 3- ...

  2. A - Wireless Network POJ - 2236-kuangbin带你飞

    A - Wireless Network POJ - 2236 Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 50348 ...

  3. MongoDB的安装问题

    Mongo的安装与启动: npm install mongodb -g MongoDB高性能.开源.无模式的文档型数据库,它基于分布式文件存储.介于关系数据库和非关系数据库之间的一种产品.其最大特点: ...

  4. Oracle 12c中CDB与PDB实例参数更改影响实验

    基础知识单薄的同学,请逐字逐句阅读以下概念,来自于博客园AskScuti. 预备知识:什么是参数文件.存放位置.参数文件的分类和参数文件的命名方式.参数文件如何创建.参数文件加载顺序.参数分类.参数修 ...

  5. thinkphp中如何用路由调用前台html界面

    先上图片看看基本的文件位置 1.首先在application\route.php中定义路由 <?php use think\Route; Route::get("home", ...

  6. SpringBoot--SSM框架整合

    方式一 1 建立一个Spring Starter 2.在available中找到要用的包,配置mybatis 3.建立file,application.yml 文件 spring: datasourc ...

  7. [CodeIgniter4]故障排除和本地开发服务器

    故障排除 以下是一些常见的安装问题,以及建议的解决方法. 我必须在我的URL中包含index.php 如果``/mypage/find/apple``类似的URL``/index.php/mypage ...

  8. 一点点学习PS--实战五

    本节实战的内容,新学习到的功能是:人物影子边缘.立体的心形 1.工具的使用: (1)滤镜--模糊--特殊模糊 (2)滤镜--滤镜库--艺术效果--水彩 (3)滤镜--滤镜库--纹理化 (4)自动形状工 ...

  9. [CCPC2019 哈尔滨] A. Artful Paintings - 差分约束,最短路

    Description 给 \(N\) 个格子区间涂色,有两类限制条件 区间 \([L,R]\) 内至少 \(K\) 个 区间 \([L,R]\) 外至少 \(K\) 个 求最少要涂多少个格子 Sol ...

  10. C#对config.ini文件进行读取和修改

    C#对config.ini文件进行读取和修改: public partial class Patrolcar : Form之后可以加入如下类: #region public class IniFile ...