运用KeyCode在浏览器中按WASD使图形运动
如何实现在浏览器中按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使图形运动的更多相关文章
- 解决安卓微信浏览器中location.reload 或者 location.href失效的问题
在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的 ...
- 浏览器中CSS的BUG
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...
- textarea 在浏览器中固定大小和禁止拖动
HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)
原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- textarea 在浏览器中禁用拖动和固定大小
HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...
- css在各浏览器中的兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- Eclipse和Android Studio中的DDMS使用时什么不同?
http://www.jb51.net/softjc/454131.html Eclipse和Android Studio中的DDMS使用时什么不同? 相信很多经常开发Android应用的朋友应该都接 ...
- 浏览器中的XML与JavaScript
浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...
随机推荐
- ML:吴恩达 机器学习 课程笔记(Week7~8)
Support Vector Machines Unsupervised Learning Dimensionality Reduction
- 关于JDK和JRE的一些总结
一.关于JDK和JRE JDK (Java Development Kit)即java开发工具,包括JER及代码编译器(javac).文档注释器(JavaDoc).代码调试器(Java Debugge ...
- SYN1621型 定位定向授时设备
SYN1621型 定位定向授时设备 定位定向授时设备使用说明视频链接: http://www.syn029.com/h-pd-274-0_310_39_-1.html 请将此链接复制到浏览器打开观看 ...
- python遍历多个列表生成列表或字典
key=['a','b','c','d'] value=[1,2,3,4] mydict=dict(zip(key,value)) print mydict 输出结果: {'a': 1, 'c': 3 ...
- Tido c++线段树知识讲解(转载)
线段树知识讲解 定义.建树.单点修改.区间查询 特别声明:如上的讲解说的是区间最大值 如果想要查询区间和 只需要改变一下建树和查询的代码就行了,如下 其他根据自己的需要进行修改即可
- Mysql常用的查询语句,记录一下,好东西大家共享
一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...
- HBase 学习之路(四)—— HBase集群环境配置
一.集群规划 这里搭建一个3节点的HBase集群,其中三台主机上均为Regin Server.同时为了保证高可用,除了在hadoop001上部署主Master服务外,还在hadoop002上部署备用的 ...
- 【】input中 type=number 去掉箭头
css中设置: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: non ...
- Go - Slice 切片
概述 切片是一种动态数组,比数组操作灵活,长度不是固定的,可以进行追加和删除. len() 和 cap() 返回结果可相同和不同. 声明切片 //demo_7.go package main impo ...
- python的基本语法
编码 python3.0以上的版本,默认的源文件都是以UTF-8编码,所有的字符串都是unicode字符串,当然也可以为源文件指定不同的编码方式; 编码实例: #随机取一个变量 str = " ...