案例贪吃蛇，把封装的函数移动到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. Visual Studio Code搭建Python开发环境方法总结

    更新:目前VSCode官方Python插件已经支持代码运行与调试,无需安装Code Runner插件. 1.下载安装Python,地址 https://www.python.org/downloads ...

  2. JS 百度地图路书---动态路线

    JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...

  3. 使用vim打开文件的16进制形式，编辑和全文替换

    1.先用vim打开文件的二进制形式,如果不以二进制可能会产生转换错误. vim -b file-to-open.dat 2.用xxd把文件转换成十六进制格式 :%!xxd 现在就可以对待普通文本一样查 ...

  4. int long的数据范围

    java 整数型 byte 1字节   -128~127  -2^7~2^7-1 short 2字节 -32768~32767 int  4个字节 -2147483648~2147483647  -2 ...

  5. 堆优化的dijkstra算法

    #include<bits/stdc++.h> using namespace std; #define ll long long #define P pair<int,int> ...

  6. AcWing 1058. 股票买卖 V

    //初始状态(入口)转移到手中无货的第>=2天 //最终状态(出口)可能从手中无货的第一天转移过来,或者从手中无货的第>=2天 //f[i,0]表示走到第i天,且位于手中有货的状态 //f ...

  7. 数据预处理 | 使用 pandas.to_datetime 处理时间类型的数据

    数据中包含日期.时间类型的数据可以通过 pandas 的 to_datetime 转换成 datetime 类型,方便提取各种时间信息 1 将 object 类型数据转成 datetime64 1&g ...

  8. Struts2学习-struts执行过程简述

    1.web.xml <web-app> <filter> <filter-name>struts2</filter-name> <filter-c ...

  9. 为data中的某一个对象添加一个属性不起作用——this.$set的正确使用

    this.$set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <div class=& ...

  10. [Arc083D/At3535] Restoring Road Network - 最短路,结论

    [Arc083D/At3535] 有 \(N\) 个城市,城市与城市之间用长度为整数的无向道路连接. 现有一考古学家找到了一张 \(N×N\) 的表 \(A\) ,这张表代表了这 \(N\) 座城市两 ...