美文网首页丹青远楼阁周文佳语强化班
《JavaScript拳皇》先就这样吧

《JavaScript拳皇》先就这样吧

作者: 王跃坤txdy | 来源:发表于2019-08-17 16:47 被阅读13次

    这周在leetcode练了几道题,easy难度的做起来都有些吃力,是时候捡起来了。。。

    拳皇

    js写了一个游戏,

    只有两个人物,

    不可以选人物,

    碰撞检测用的矩形碰撞,

    人物只能左右跳跃蹲下加攻击

    图片是直接从网上找的,血条蓝条用的div,

    动作用的gif+定时器

    emm一个非常low版的拳皇就这样了

    一直觉得做网页是一个一直在做重复事情的事,

    所以开始就想写个啥游戏,

    开始java阶段写的逻辑游戏,所以先排除掉了逻辑游戏

    后来偶然机会想做下拳皇,然后就做个low版的

    后来觉得自己的网页结构也不是很熟练,

    想做网页来着,又想想,后边jquery也是要写网页的

    所以js先就这样吧!

    总结点知识点:

    js基础语法和java是差不太多的,就是一门弱类型的脚本语言

    js常用的事件:

    单击事件onclick 

    双击事件ondblclick

    按下鼠标onmousedown

    松开鼠标onmouseup 

    把鼠标放到上面onmouseover 

    移动鼠标ommousemove

    移开鼠标onmouseout 

    按下键盘onkeydown

    松开键盘onkeyup 

    按住键盘onkepress 

    失去焦点onblur

    得到焦点onfocus 

    页面加载事件onload

    值改变事件onchange

    BOM操作

    框体方法

    alert(警告框);没有返回值

    confirm(确认框);有两个返回值

    prompt(输入框);提示用户信息的录入

    定时和间隔执行方法

    setTimeout(function(){},1500);定时执行

    clearTimeout(id);清除定时执行

    setInterval(function(){},2000);间隔执行

    clearInterval(id);

    子页面方法

    open(内含各种属性);

    close(关闭open页面);

    子页面调用父页面的函数

    opener.父页面的函数

    window对象的常用属性

    地址栏属性:

    location.href:“地址栏跳转的新地址”

    location.reload();从新加载页面

    历史记录属性

    history.forward();页面资源(历史纪录)前进

    history.back();页面资源(历史纪录)后退

    history.go(index);跳转到指定的历史记录资源

    屏幕属性

    screen.width;获取屏幕宽度的分辨率

    screen.height;获取屏幕高度的分辨率

    浏览器配置属性

    navigator.userAgent

    主体面板属性(document)

    DOM操作

    document.getElementById('id属性值');返回拥有指定id的第一个对象的引用

    document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合

    document/element.getElementsByTagName('标签名');返回拥有指定标签名的对象集合

    document.getElementsByName('name属性值');返回拥有指定名称的对象结合

    document/element.querySelector('CSS选择器');仅返回第一个匹配的元素

    document/element.querySelectorAll('CSS选择器');返回所有匹配的元素

    document.documentElement获取页面中的HTML标签

    document.body获取页面中的BODY标签

    document.all['']获取页面中的所有元素节点的对象集合型

    document.createElement('元素名');创建新的元素节点

    document.createAttribute('属性名');创建新的属性节点

    document.createTextNode('文本内容');创建新的文本节点

    document.createComment('注释节点');创建新的注释节点

    document.createDocumentFragment( );创建文档片段节点

    parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点

    parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点

    element.setAttributeNode( attributeName );给元素增加属性节点

    element.setAttribute( attributeName, attributeValue );给元素增加指定属性,并设定属性值

    parentNode.removeChild( existingChild );删除已有的子节点,返回值为删除节点

    element.removeAttribute('属性名');删除具有指定属性名称的属性,无返回值

    element.removeAttributeNode( attrNode );删除指定属性,返回值为删除的属性 

    parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点

    element.setAttributeNode( attributeName );若原元素已有该节点,此操作能达到修改该属性值的目的

    element.setAttribute( attributeName, attributeValue );若原元素已有该节点,此操作能达到修改该属性值的目的

    闭包

    js的每个函数都是一个个封闭空间,它可以获取外界信息,但是外界却无法直接看到里面的内容。将变量 n 放进小黑屋里,除了返回函数之外,没有其他办法能接触到变量 n,而且在函数 a 外定义同名的变量 n 也是互不影响的,这就是所谓的增强“封装性”。

    作用域

    由高层区域直接作用于低层区域,闭包可以影响变量作用范围

    相关文章

      网友评论

        本文标题:《JavaScript拳皇》先就这样吧

        本文链接:https://www.haomeiwen.com/subject/fvhksctx.html