- 博客(24)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 JavaScript 坦克大战
JavaScript 坦克大战界面预览在线体验坦克大战需求分析双人游戏，两套按键分别控制两辆坦克坦克四个方向移动，并且调整坦克朝向边缘检测，坦克只能在地图里面移动发射子弹，四个方向都能发射子弹子弹边缘检测子弹碰撞检测，子弹碰到地形，子弹与地形消失子弹碰到敌方坦克游戏结束生成随机地形，并且限制坦克移动页面结构与布局 <div class="wrap"> <div class="tan red"> <img
2020-08-10 21:22:33
1508
原创 js 翻牌小游戏
js 翻牌小游戏效果图需求分析生成两组顺序随机的1-8数据卡片需要有翻转效果两次翻转数据不相等，回复原状两次翻转数据相等，卡片相等，不能再被点击当所有卡片不能被点击游戏结束限制最大点击次数50次HTML结构<div class="wrap"> <div> <p class="top"></p> <p class="bottom"></p>
2020-07-29 21:52:56
2621
3
原创 js 跳一跳小游戏
js 跳一跳小游戏流程分析鼠标按下开始蓄力鼠标松开，根据鼠标按下的时间让小球运动相应的距离判断小球落点是否在平台内如果在平台范围内，产生下一个平台，分数加10.如果不在游戏结束，判断分数是否大于历史最高分，更新历史最高分。动画效果鼠标按下小球所在平台要有蓄力效果，鼠标松开后慢慢恢复，小球在空中的运动曲线要平滑小球和平台要有3D效果注意事项运动涉及到计算器和延时器，要注意清除定时器以免扰乱动画效果鼠标按下和松开为一个完整的流程，在小球运动完之前不能重复触发确保小球运动的时间
2020-07-17 21:26:26
1191
1
原创 ES6 实现二叉排序树
这里写自定义目录标题ES6 实现二叉排序树定义节点类定义二叉树类二叉排序树特性生成二叉排序树遍历方式二叉排序树的查找方式增加节点删除节点修改节点其他方法GitHubES6 实现二叉排序树定义节点类class Node { //定义节点类 constructor(value) { this.value = value; } addParents(node) { //添加父节点 this.parents = node } addChi
2020-07-05 10:57:15
631
原创 socket.io实现联机五子棋
之前写过C++版的五子棋，然后用HTML5，css3，JavaScript写了一个网页版的五子棋。这几天接触了Node.js,于是将之前的单机五子棋改成能够联机对战的五子棋。项目效果： 进入主页首先需要选择房间，快速开始可以加入别人创建好的房间，组队对战可以创建房间邀请别人加入自己的房间。项目结构整个项目由两个HTML页面构成：index.html 项目首页提供可选房间chat.h...
2019-05-11 19:31:24
1431
原创 js设计模式之策略模式
js设计模式之策略模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
2020-08-15 08:55:31
205
原创 JS设计模式之发布订阅模式
JS设计模式之发布订阅模式class Observe { constructor() { this.cacheList = {} } publish(type, message) { this.cacheList[type] && this.cacheList[type].forEach(item => item(message))
2020-08-15 08:50:13
147
原创 Proxy代理实现对象关键属性无法更改
Proxy代理实现对象关键属性无法更改 由于js的语言特性对象可以动态增加和修改属性和方法，但代码很多时可能会不小心覆盖前面对象的一些关键属性和方法，导致结果异常，且不方便查找出错的地方。利用es6的proxy可以简单实现对象某些关键属性的私有化，不改变其他属性方法的覆盖与扩展。function signal(obj, arr) { return new Proxy(obj, { set(target,
2020-08-15 08:42:33
980
原创 基于promise的ajax封装
基于promise的ajax封装function isObject(obj){ if (Object.prototype.toString.call(obj) === '[object Object]'){ return true; } return false;}function p_ajax(options){ return new Promise((resolve,reject)=>{ // 1.创建XMLHttpReques
2020-07-31 20:56:47
157
原创 跨域的解决方案
跨域的解决方案通过服务端代理请求。 如PHP，服务端语言php是没有跨域限制的。让服务器去别的网站获取内容然后返回页面。第二种：jsonp跨域 利用js创建一个script标签，把json的url赋给script的scr属性，把这个script插入到页面里，让浏览器去跨域获取资源。option{ url:"" data:{parms:""}, cb:""//jsonp接口的回调函数参数名称, myC
2020-07-31 20:51:06
103
原创 node.js制作简单的聊天室
node.js制作简单的聊天室效果图客户端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-07-27 20:57:59
329
原创 关于 let/const和var的区别
关于 let/const和var的区别let禁止变量重名函数内禁止变量与形参重名形成块级作用域不会挂到window对象下，也就意味着不能删除暂时性死区，关于let有没有解决变量提升我觉得并没有，只是因为存在暂时性死区使得变量在赋值操作之前不能被调用。const拥有以上let的所有特性const定义常量常量不予许再次赋值(常量对应的地址不能被修改，可以修改常量对象的属性)常量定义必须赋值...
2020-07-27 20:47:46
138
原创 es6 滚动条轮播图
es6 滚动条轮播图html结构 因为利用滚动条来实现轮播图，所以需要增加一个div来滚动，这里的图片需要浮动在一排显示，同时为了视觉上的效果需要复制一张图片插入到内容最后 <div class="wrap"> <div class="show"> <div class="content"> <img src="./images/1.png"
2020-07-27 20:37:50
514
原创 es6 透明度轮播图
es6 透明度轮播图效果图html结构<div class="wrap"> <div class="show"> <img class="imgShow" src="./images/1.png" alt=""> <img src="./images/2.png" alt=""> <img src="./images/6.png" alt="">
2020-07-27 19:59:23
400
1
原创 JavaScript 多属性缓冲运动
JavaScript 多属性缓冲运动//动画函数function animate(dom, obj, callback) { for (var attr in obj) { if (attr === 'opacity') { var current = parseInt(getComputedStyle(dom, null)[attr] * 100); var target = obj[attr] * 100; }
2020-07-27 19:18:27
202
原创 js 自定义滚动条
js 自定义滚动条效果图需求分析滚轮滚动带动内容滚动滚轮拖动带动内容拖动页面结构<div class="wrap"> <div class="bar"> </div> <div class="show"> <img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529206747.
2020-07-27 19:04:59
385
原创 JS 闭包
JS 闭包闭包就是在函数内部返回一个作用域链中包含该函数活动对象的函数。调用函数，这次调用产生的活动对象会被保留在返回的函数的作用域链中。该函数每调用一次会产生一个闭包每次重新调用，返回的函数作用域链中保留的活动对象为此次调用产生的新的活动对象返回的函数将一直保留该函数本次调用的活动对象直到释放对返回函数的引用。...
2020-07-24 21:20:04
165
原创 JS {}代码块中关于函数声明的问题
JS代码块中关于函数声明的问题 正常情况下函数声明会有声明提升的现象，会被提升到当前作用域的顶部，但如果函数声明出现在代码块中会出现不一样的情况。 foo() var a = true; if (a) { function foo() { console.log("a"); } } e
2020-07-24 13:33:42
956
原创 JS 的LHS查询和RHS查询
JS 的LHS查询和RHS查询 几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个 值进行访问或修改。但当我们要操作一个变量时，我们要怎样找到它呢？或者说我们怎么确定它是否存在呢var a = 2 当我们看到这句代码时，正常的逻辑会认为声明一个变量a并赋值为2，但浏览器引擎不是这样认为的。这句代码会被分成两部分来执行var a 和a= 2； 并且一个是在代码执行前的预编译进行一个在
2020-07-23 21:45:34
558
原创 js常用排序方法
桶排序桶排序只能对正整数进行排序，利用js的数组特性，创建一个新数组作为桶，然后遍历原数组，将值放入对应的桶中，就是将原数组每一项的值作为新数组的索引，该方法为去重排序function sortT(arr) { var index = []; for (let i = 0; i < arr.length; i++) { if (parseInt(arr[i]) == arr[i]) { index[arr[i]] = 1 }
2020-07-11 15:40:40
208
原创 HTML水平垂直居中的几种方式
HTML水平垂直居中的几种方式页面结构 <div class="parent"> <div class="child"></div> </div>. 父元素，子元素宽高已知1.用margin和padding就行了，但要注意给第一个不为浮动的子元素添加margin-top时会错误的添加给父元素.parent{ width: 400px; height: 300px;
2020-07-11 14:59:36
1073
原创 Vue.js制作立体计算器
Vue.js 制作立体计算器项目效果图这是一个简单的项目实现加减乘除运算项目结构代码展示计算器1.0.html<!DOCTYPE html><html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/s...
2019-05-29 22:46:37
557
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人