<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>键盘事件小练习</title>

    <style>

        #mydiv{

            width: 30px;

            height: 30px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

<div id="mydiv"></div>

<script>

    var myDiv = document.getElementById("mydiv");

    var xs = 0;

    var xv = 30;

    var ys = 0;

    var yv = 30;

    document.onkeydown = function(event){

        var kc = event.keyCode;

        switch (kc){

            case 37:

                xs -= xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "red";

                break;

            case 38:

                ys -= yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "blue";

                break;

            case 39:

                xs+=xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "green";

                break;

            case 40:

                ys += yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "yellow";

                break;

        }

    }

</script>

</body>

</html>

onkeydown小练习的更多相关文章

  1. 软件工程 Android小游戏 猜拳大战

    一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...

  2. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  3. C#,JavaScript两种语言 2048小游戏

    <html> <head> <style type="text/css"> .haha { border-width: 2; font-size ...

  4. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  5. html5面向对象做一个贪吃蛇小游戏

    canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...

  6. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  7. flappy pig小游戏源码分析(1)——主程序初探

    闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...

  8. javascript常用的小知识

    1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu ...

  9. android 小方法

    小方法 1.获取屏幕分辨率: public class BaseTools { public static int getWindowWidth(Context context) { // 获取屏幕分 ...

随机推荐

  1. vue项目在IE下报错"strict 模式下不允许一个属性有多个定义"

    待解决:

  2. 判断一个类是否为另一个类的实例 instanceof关键字和isAssignableFrom方法的区别

    Which of the following is better? a instanceof B or B.class.isAssignableFrom(a.getClass()) The only ...

  3. ActiveMq使用笔记

    java JMS技术 .1.   什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用 ...

  4. Java代码调用Oracle的存储过程,存储函数和包

    Java代码调用存储过程和存储函数要使用CallableStatement接口 查看API文档: 上代码: java代码调用如下的存储过程和函数: 查询某个员工的姓名  月薪 职位 create or ...

  5. Mahout使用(一)

    1.HelloMahout.java2.DistanceTest.java3.MahoutDemo.java 1.HelloMahout.java package cn.crxy.mahout; im ...

  6. TFS2018环境搭建一硬件要求

    本文关于微软的团队协作工具TFS2018搭建 1.操作系统要求 TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的 ...

  7. C# 高效率创建字符串类(StringBuilder)

    1.为什么需要StringBuilder类? 因为String类型代表不可变字符串,所以无法对当前String类型实例进行处理.所以FCL提供了System.Text.StringBuilder类型, ...

  8. 大叔来说说Markdown的使用

    强调和高亮背景 中国是伟大的民族! Highlight 中国是`伟大`的民族! ==Highlight== 链接 大叔博客园 [大叔博客园](http://www.cnblogs.com/lori & ...

  9. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十）：接口服务整理

    通用操作 通用操作是指一般的增删改查操作,逻辑大体都是一致的,所以统一抽象到CURD接口,需要用到CURD的表直接实现接口就可以了. 通用操作主要有以下几个: 保存操作 /** * 保存操作 * @p ...

  10. spring boot 与 自定义interceptor

    前面学习过过滤器, 但是过滤器是针对servlet的, 用在springmvc和spring boot里面, 功能上, 感觉并不是很好用. 那这里来学习一下拦截器. 一. 拦截器的执行顺序 1. 目录 ...