<!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--控制小人自由移动的更多相关文章

  1. C语言实现双人控制的战斗小游戏

    实现功能 1.双人分别控制小人移动 2.子弹碰撞 3.可改变出弹方向 4.血条实体化 前言 这个游戏是看了知乎一位非常好的老师的专栏后练手写的,(至于是哪位,知乎搜C语言小游戏最牛逼的那位) 有老师系 ...

  2. 2014年7月份第3周51Aspx源码发布详情

    Froor高校校园网站源码  2014-7-18 [VS2010]源码介绍:这是一款有关高校门户网站的毕业设计源码,功能相对比较完善,界面也比较美观,对门户网站感兴趣的朋友们可以下载研究一下.该源码功 ...

  3. C语言学习总结(二) 运算流程

    第三章.基本运算 (运算符.算数运算符.关系运算符.逻辑运算符.三目运算符.ASXLL码) 一.什么是运算符? 概念:是编译程序执行特定的算术或逻辑操作的符号: 分类:算术运算符. 关系运算符.逻辑运 ...

  4. Unity 之 Redux 模式（第一篇）—— 人物移动

    作者:软件猫 日期:2016年12月6日 转载请注明出处:http://www.cnblogs.com/softcat/p/6135195.html 在朋友的怂恿下,终于开始学 Unity 了,于是有 ...

  5. 【南京邮电】maze 迷宫解法

    [南京邮电]maze 迷宫解法 题目来源:南京邮电大学网络攻防训练平台. 题目下载地址:https://pan.baidu.com/s/1i5gLzIt (密码rijss) 0x0 初步分析 题目中给 ...

  6. 2017-2018-1 1623 bug终结者 冲刺002

    bug终结者 冲刺002 by 20162329 张旭升 今日冲刺任务: 能够显示主菜单和功能 游戏需要提供主菜单让玩家进行游戏设置,同时能能够把地图文件中的信息转换成为图像显示到游戏界面上 能够实现 ...

  7. pygame学习笔记（6）——一个超级简单的游戏

    转载请注明:@小五义  http://www.cnblogs.com/xiaowuyi 学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块 ...

  8. Unity经典游戏教程之：是男人就下100层

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  9. Unreal Engine 4 系列教程 Part 7：音频教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

随机推荐

  1. Java虚拟机之垃圾回收详解一

    Java虚拟机之垃圾回收详解一 Java技术和JVM(Java虚拟机) 一.Java技术概述: Java是一门编程语言,是一种计算平台,是SUN公司于1995年首次发布.它是Java程序的技术基础,这 ...

  2. android 滚动视图（ScrollView）

    为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...

  3. 动态从数据库读取菜单（ASP.NET版）

    这几天一直打算做个从数据读取导航菜单的效果,以前做的时候都是写死的(太死了),好了话不多说,先看效果! 我是个小菜,高手请不要喷!我在网上查了好久,说用menu控件,但是我用了不太好!最后我决定用re ...

  4. Mac下如何不借助第三方工具实现NTFS分区的可写挂载

    问题背景 我想很多使用Mac的同学都会遇到读写NTFS磁盘的问题,因为默认情况下Mac OSX对NTFS磁盘的挂载方式是只读(read-only)的,因此把一个NTFS格式的磁盘插入到Mac上,是只能 ...

  5. Universal-Image-Loader 示例 工具

    Base public class MyApplication extends Application {     @Override     public void onCreate() {     ...

  6. border-radius的用法与技巧总结

    border-radius属性用法重点罗列 border-radius: none | <length>{1,4} [/<length>{1,4}] ? .如果存在反斜杠/,则 ...

  7. xp sp3安装 iis5.1

    1.依次打开左下角的 "开始" 菜单----控制面板----选择 "添加/删除程序", 点击窗体左侧 "添加/删除Windows组件"(A) ...

  8. Jenkins学习之——(2)插件的安装

    本章节将讲解如何安装jenkins的插件. 其实jenkins本身不具有任何集成的功能,而是依靠众多的插件实现功能.就像eclipse一样,期本身只是一个编辑器,而当你安装了其他的第三方插件后,就能实 ...

  9. Swift--控制流与oc不同的地方

    1.For-in循环中... for index in 1...5 { print("\(index) times 5 is \(index * 5)") } for _ in 1 ...

  10. mysql/tokudb安装

    一.环境要求:    Operating Systems:64-bit Linux     Memory: >=1G 二.安装步骤 1.下载安装包mysql-5.5.41-tokudb-7.5. ...