如何实现在浏览器中按WASD四个键使图形上下左右运动呢?

其实很简单,用keyCode方法就可以实现了。

先放个div在html中:

 <div id="ball" style="left: 0px;top: 0px"></div>

在div中设置内联css样式,至于为什么要设置内联式,之后在解释。

css部分:

 <style>
div{
height: 100px;
width: 100px;
background: #0ff;
border-radius: 50px;
position: absolute;
}
</style>

因为在div中设置了left和top属性,所以必须设置绝对定位

那么接下来就是js部分了:

 var key={
W:87,S:83,A:65,D:68
}

声明一个变量key,存放WASD四个按键的Unicode码。

 function keymove(e){
var ball=document.getElementById('ball');
var left=parseInt(ball.style.left);
var top=parseInt(ball.style.top);
switch(e.keyCode){
case key.W:
ball.style.top=top-2+'px';
break;
case key.S:
ball.style.top=top+2+'px';
break;
case key.A:
ball.style.left=left-2+'px';
break;
case key.D:
ball.style.left=left+2+'px';
break;
}
}
document.onkeydown=keymove;

写一个函数keymove参数为e(随意什么英文都可以),因为元素的属性值是字符串,所以需要用parseInt方法将其转换成int数据类型,接下来要用一系列的判断语句,if或者switch语句都可以,这里我用switch是因为更方便些。

参数名.keyCode的返回值是用户摁下键盘按键对应的Unicode码值。

最后调用函数,当触发onkeydown事件时执行函数,keyCode还可以用于onkeypress和onkeyup事件中。

最后回答为什么left和top属性用内联式而不用嵌入式方法,这里设置及到一些知识点:

在js中 element指的是js获取的dom对象,

而element.style则代表js获取的内联式样式,如果对象没有内联式,则为空对象。

当然有别的获取对象样式的方法可以获取非内联式的样式,但是如果用element.style的方法获取样式,非内联式方法定义的样式是获取不到的哦。

运用KeyCode在浏览器中按WASD使图形运动的更多相关文章

  1. 解决安卓微信浏览器中location.reload 或者 location.href失效的问题

    在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的 ...

  2. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  3. textarea 在浏览器中固定大小和禁止拖动

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

  4. 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)

    原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...

  5. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  6. textarea 在浏览器中禁用拖动和固定大小

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

  7. css在各浏览器中的兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  8. Eclipse和Android Studio中的DDMS使用时什么不同?

    http://www.jb51.net/softjc/454131.html Eclipse和Android Studio中的DDMS使用时什么不同? 相信很多经常开发Android应用的朋友应该都接 ...

  9. 浏览器中的XML与JavaScript

    浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...

随机推荐

  1. 20 个免费开源的 CSS3 用户界面工具包

    ui.css Metro UI CSS Pure CSS jQuery jKit Solid HTML5/CSS3 UI Kit CSS3 UI Kit Alt CSS3 UI Kit MediaLo ...

  2. 使用C++还是QML(QML容易使用和维护,效果好)

    本质上,Qt 是一个C++类库.在引入 QML 以前,所有的开发都是基于 C++ 的,但到了 Qt 5,QML 和 Qt Quick 成为了 Qt 的核心之一,导致很多初学者在犹豫是否还需要学习 C+ ...

  3. UILabel实现自适应宽高需要注意的地方(三)

        一.需求图如下所示    UILabel 的高度自适应 UILabel中的段落间距可设置   图片效果如下:   调整段落适应长宽高方式:         需求:   保证"游戏玩法 ...

  4. git如何merge github forked repository里的代码更新

    git如何merge github forked repository里的代码更新? 问题是这样的,github里有个项目ruby-gmail,我需要从fork自同一个项目的另一个repository ...

  5. 如何保证MQ消息必达

    此文章属于笔记,原属58沈剑 一.MQ消息必达,架构上的两个核心设计点: 消息落地 消息超时.重传.确认 四大部件:发送端 接收端 服务端 固化存储组成 二.上半场消息必达以及消息重复问题 上半场的流 ...

  6. vs2010添加TSTCON( ActiveX Control Test Container )工具

    vs2010中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2010安装在默认路径则 1, ...

  7. 解决Linux和Windos不同步的问题

    两种方式: 一:在windos上进行操作      (1).cmd中输入如下命令      Reg add HKLM\SYSTEM\CurrentControlSet\Control\TimeZone ...

  8. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  9. spring 5.x 系列第20篇 ——spring简单邮件、附件邮件、内嵌资源邮件、模板邮件发送 (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 邮件发送配置类为com.heibaiyin ...

  10. JS的第一天,精彩内容

    1.JS 介绍 js的全称是JavaScript,它是一门前台语言 Java是一门后台语言 ,它们两个之间毫无关系 JavaScript的作者是布兰登,艾奇 前台语言:运行在客户端 后台语言:与数据库 ...