运用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的节点类型 在 ...
随机推荐
- 20 个免费开源的 CSS3 用户界面工具包
ui.css Metro UI CSS Pure CSS jQuery jKit Solid HTML5/CSS3 UI Kit CSS3 UI Kit Alt CSS3 UI Kit MediaLo ...
- 使用C++还是QML(QML容易使用和维护,效果好)
本质上,Qt 是一个C++类库.在引入 QML 以前,所有的开发都是基于 C++ 的,但到了 Qt 5,QML 和 Qt Quick 成为了 Qt 的核心之一,导致很多初学者在犹豫是否还需要学习 C+ ...
- UILabel实现自适应宽高需要注意的地方(三)
一.需求图如下所示 UILabel 的高度自适应 UILabel中的段落间距可设置 图片效果如下: 调整段落适应长宽高方式: 需求: 保证"游戏玩法 ...
- git如何merge github forked repository里的代码更新
git如何merge github forked repository里的代码更新? 问题是这样的,github里有个项目ruby-gmail,我需要从fork自同一个项目的另一个repository ...
- 如何保证MQ消息必达
此文章属于笔记,原属58沈剑 一.MQ消息必达,架构上的两个核心设计点: 消息落地 消息超时.重传.确认 四大部件:发送端 接收端 服务端 固化存储组成 二.上半场消息必达以及消息重复问题 上半场的流 ...
- vs2010添加TSTCON( ActiveX Control Test Container )工具
vs2010中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2010安装在默认路径则 1, ...
- 解决Linux和Windos不同步的问题
两种方式: 一:在windos上进行操作 (1).cmd中输入如下命令 Reg add HKLM\SYSTEM\CurrentControlSet\Control\TimeZone ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- spring 5.x 系列第20篇 ——spring简单邮件、附件邮件、内嵌资源邮件、模板邮件发送 (代码配置方式)
源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 邮件发送配置类为com.heibaiyin ...
- JS的第一天,精彩内容
1.JS 介绍 js的全称是JavaScript,它是一门前台语言 Java是一门后台语言 ,它们两个之间毫无关系 JavaScript的作者是布兰登,艾奇 前台语言:运行在客户端 后台语言:与数据库 ...