HTML--控制小人自由移动
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>键盘控制DIV移动</title>
<script type="text/javascript">
function keyEvent(event) {
var distance = document.getElementById("move");
switch(event.keyCode){
case 37:{
distance.style.left = distance.offsetLeft-50+"px";
break;
}
case 38:{
distance.style.top = distance.offsetTop-50+"px";
break;
}
case 39:{
distance.style.left = distance.offsetLeft+50+"px";
break;
}
case 40:{
distance.style.top = distance.offsetTop+50+"px";
break;
}
}
}
</script>
<style type="text/css">
#move {
width: 100px;
height: 100px;
border: 1pxsolid #000;
background: #EAEAEA;
position: absolute;
}
</style>
</head>
<body onkeydown="keyEvent(event)">
<div id="move"></div>
</body>
</html>
HTML--控制小人自由移动的更多相关文章
- C语言实现双人控制的战斗小游戏
实现功能 1.双人分别控制小人移动 2.子弹碰撞 3.可改变出弹方向 4.血条实体化 前言 这个游戏是看了知乎一位非常好的老师的专栏后练手写的,(至于是哪位,知乎搜C语言小游戏最牛逼的那位) 有老师系 ...
- 2014年7月份第3周51Aspx源码发布详情
Froor高校校园网站源码 2014-7-18 [VS2010]源码介绍:这是一款有关高校门户网站的毕业设计源码,功能相对比较完善,界面也比较美观,对门户网站感兴趣的朋友们可以下载研究一下.该源码功 ...
- C语言学习总结(二) 运算流程
第三章.基本运算 (运算符.算数运算符.关系运算符.逻辑运算符.三目运算符.ASXLL码) 一.什么是运算符? 概念:是编译程序执行特定的算术或逻辑操作的符号: 分类:算术运算符. 关系运算符.逻辑运 ...
- Unity 之 Redux 模式(第一篇)—— 人物移动
作者:软件猫 日期:2016年12月6日 转载请注明出处:http://www.cnblogs.com/softcat/p/6135195.html 在朋友的怂恿下,终于开始学 Unity 了,于是有 ...
- 【南京邮电】maze 迷宫解法
[南京邮电]maze 迷宫解法 题目来源:南京邮电大学网络攻防训练平台. 题目下载地址:https://pan.baidu.com/s/1i5gLzIt (密码rijss) 0x0 初步分析 题目中给 ...
- 2017-2018-1 1623 bug终结者 冲刺002
bug终结者 冲刺002 by 20162329 张旭升 今日冲刺任务: 能够显示主菜单和功能 游戏需要提供主菜单让玩家进行游戏设置,同时能能够把地图文件中的信息转换成为图像显示到游戏界面上 能够实现 ...
- pygame学习笔记(6)——一个超级简单的游戏
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块 ...
- Unity经典游戏教程之:是男人就下100层
版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...
- Unreal Engine 4 系列教程 Part 7:音频教程
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
随机推荐
- 性能计数器自动收集-logman
1.在桌面云测试中,往往需要模拟并发连接中服务器的性能数据,这里主要介绍如何自动收集性能数据 2.创建xxxx.bat文件,文件内容如下: logman create counter test -cf ...
- POJ 2513 Colored Sticks - from lanshui_Yang
题目大意:给定一捆木棒,每根木棒的每个端点涂有某种颜色.问:是否能将这些棒子首位项链,排成一条直线,且相邻两根棍子的连接处的颜色一样. 解题思路:此题是一道典型的判断欧拉回路或欧拉通路的问题,以木棍的 ...
- [Falcor] Building Paths Programmatically
model.setValue('genreList[0].titles[0].rating', 5) .then(function (value) { model.get('genreList[0.. ...
- RHEL6.3进入单用户模式并重置root密码
单用户模式类似于windows下的安全模式,允许root账号不输入密码直接启动并登录系统进行系统维护. 单用户模式只允许root账号登录,不允许其它用户使用ssh协议进行远程连接. 重启系统时按Ent ...
- 关于JS历史拓展
js由来 95年那时,绝大多数因特网用户都使用速度仅为28.8kbit/s 的“猫”(调制解调器)上网,但网页的大小和复杂性却不断增加.为完成简单的表单验证而频繁地与服务器交换数据只 ...
- 移动端(IOS)iframe监听不到 onscroll 事件
问题描述: 我在一个页面A中有瀑布流,点击瀑布流中的图片需要进入到另外一个页面B,点击返回需要回到页面A中点击的位置,为了实现该效果所以在页面A中嵌入iframe,iframe指向页面B,页面B中同样 ...
- SqlServer 开启或关闭数据库主键自增
可用作删除一行主键数据库,在还原数据行,或者删掉后,被伤处的主键还可以利用 --开启当前表的可复制功能,仅在当前回话中有效 SET IDENTITY_INSERT dbo.PDAUserInfo O ...
- scala学习笔记——特质
一个类扩展自一个或多个特质,以便使用这些特质提供的服务.特质可能会要求使用它的类支持某个特定的特性.不过和java不同,Scala特质可以给出这些特性的缺省实现. 特质的特性: 类可以实现任意数量的特 ...
- 【回忆1314】回忆之placeholder
直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charse ...
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
文本域 <textarea>标签定义多行的文本输入控件. 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签. < ...