案例贪吃蛇，把封装的函数移动到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. 本机添加多IP绑定网站

    查询IP 显示为1个IP 点击更改适配器 点击高级 进行添加IP 点击添加 ipconfig 查看效果 注~!:在IIS中可以在这里添加多IP然后绑定

  2. easy_thinking

    登陆抓包,改成32位,根据tp6任意创建文件的漏洞,修改cookie. 上传文件. 木马在/runtime/session下, 然后传bypass文件绕过disablefunction,得到flag

  3. HTML link标签

    <link> 标签定义文档与外部资源的关系. 最常见的用途是链接 样式表.CSS

  4. 高级特征工程I

    Mean encodings 以下是Coursera上的How to Win a Data Science Competition: Learn from Top Kagglers课程笔记. 学习目标 ...

  5. WPF 解决无边框产生的相关问题

    原文:WPF 解决无边框产生的相关问题 最大化: 在设置WindowStyle="None" AllowsTransparency="True"后,最大化会覆盖 ...

  6. Consider using the `--user` option or check the permissions.

    安装pip install C:\Users\道路\Documents\EGDownloads\pip-1.0.tar.gz 报错:Consider using the `--user` option ...

  7. CentOS7利用docker安装MySQL5.7

    CentOS7利用docker安装MySQL5.7 前提条件 centos7 且内核版本高于3.10, 可通过以下命令查看内核版本 uname -r 利用yum 安装docker 安装一些必要的系统工 ...

  8. [CF467C] George and Job - DP,前缀和

    简单dp + 前缀和 你谷这乱标难度的风气真是-- #include <bits/stdc++.h> using namespace std; #define int long long ...

  9. SSM项目中的.tld文件是什么，有什么作用？怎么自定义tld文件

    原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...

  10. 【牛客小白月赛21】NC201605 Bits

    [牛客小白月赛21]NC201605 Bits 题目链接 题目描述 Nancy喜欢做游戏! 汉诺塔是一个神奇的游戏,神奇在哪里呢? 给出3根柱子,最开始时n个盘子按照大小被置于最左的柱子. 如果盘子数 ...