<!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小练习的更多相关文章
-
软件工程 Android小游戏 猜拳大战
一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...
-
你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
-
C#,JavaScript两种语言 2048小游戏
<html> <head> <style type="text/css"> .haha { border-width: 2; font-size ...
-
javascript小技巧(非常全)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
-
html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
-
原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
-
flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
-
javascript常用的小知识
1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu ...
-
android 小方法
小方法 1.获取屏幕分辨率: public class BaseTools { public static int getWindowWidth(Context context) { // 获取屏幕分 ...
随机推荐
-
Coursera台大机器学习基础课程学习笔记1 -- 机器学习定义及PLA算法
最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一机器学习是什么? 感觉和 Tom M. Mitchell的定义几乎一致, A computer program ...
-
将32位MD5摘要串转换为128位二进制字符串
将32为MD5摘要串转换为128位二进制字符串: /// <summary> /// 将字符串转成二进制 /// </summary> /// <param name=& ...
-
Cogs 1709. [SPOJ705]不同的子串 后缀数组
题目:http://cojs.tk/cogs/problem/problem.php?pid=1709 1709. [SPOJ705]不同的子串 ★★ 输入文件:subst1.in 输出文件: ...
-
Android中的FrameLayout帧布局
帧布局由FrameLayout所代表,FrameLayout直接继承了ViewGoup组件. 帧布局容器为每一个增加当中的组件创建一个空白的区域(称为一个帧),每一个子组件占领一帧,这些帧都会依据gr ...
-
C# WinForm多线程（一）Thread类库
Windows是一个多任务的系统,如果你使用的是windows 2000及其以上版本,你可以通过任务管理器查看当前系统运行的程序和进程.什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括 ...
-
JAVA之旅（四）——面向对象思想，成员/局部变量，匿名对象，封装 , private，构造方法，构造代码块
JAVA之旅(四)--面向对象思想,成员/局部变量,匿名对象,封装 , private,构造方法,构造代码块 加油吧,节奏得快点了 1.概述 上篇幅也是讲了这点,这篇幅就着重的讲一下思想和案例 就拿买 ...
-
C# DataTable，DataSet，IList，IEnumerable 互转扩展属性
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...
-
python中使用redis实战
from redis import StrictRedis rds = StrictRedis(host='127.0.0.1', port=6379, db=0, decode_responses= ...
-
Codeforces 1038 E - Maximum Matching
E - Maximum Matching 思路: 欧拉图 定理:一个度数为奇数的点的个数小于等于2的联通图存在欧拉回路 对于这道题目的图,点的个数为4,所以最坏的情况下4个点的度数都为奇数,在这种情况 ...
-
How can I list all foreign keys referencing a given table in SQL Server?
How can I list all foreign keys referencing a given table in SQL Server? how to check if columns in ...