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>
时间: 2024-11-08 18:25:53

HTML--控制小人自由移动的相关文章

HTML5方向键控制会奔跑的马里奥大叔

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>HTML5会奔跑的马里奥大叔丨石家庄幼师|河北叉车|河北品牌策划公司</title> </head> <body> <div align="cen

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

实现功能 1.双人分别控制小人移动 2.子弹碰撞 3.可改变出弹方向 4.血条实体化 前言 这个游戏是看了知乎一位非常好的老师的专栏后练手写的,(至于是哪位,知乎搜C语言小游戏最牛逼的那位) 有老师系统性的交这些的确规范了许多,我之前自己摸索写的游戏相对它来说规范性是大大的不抵. 我大致是看了一个飞机游戏的代码,学会了实时更新函数与用户输入更新函数,与设置子弹体. 在此基础上我结合我最近学的弹球写出了这个靠风骚走位的双人战斗小游戏.下面是图与具体实现. 0.游戏主体   while(1) {•

《Java语言程序设计》大作业报告 九宫格游戏

    <Java语言程序设计>大作业报告     中国石油大学(北京)2015 - 2016 学年第二学期     班级:_____计算机14-1_______ 姓名:_____  许 恺_________________ 学号:______2014011329___________     题意分析 程序首先需要九个可以移动的格子,大小相等,有字符串标示,其次要可以相应鼠标和键盘方向键的控制,可以自由移动,并且与此同时记录步数,最后在满足条件时弹出对话框并显示步数以及是否打破记录,关于打破

走出迷宫小游戏

#include <stdio.h>/* 游戏说明:玩家通过键盘录入 w,s,a,d控制小人向不同方向移动,其中w代表向上移动,s代表向下移动,a代表向左移动,d 代表向右移动,当小人移动到出口位置,玩家胜利  地图如下: ###### #O# # ## # #  # # ##   # ###### 说明: # 代表 墙 O代表小人 ' ' 代表路 分析:    1.打印地图       1.保存地图       2.打印    2.让玩家移动小人       1.提示玩家如何移动小人    

推箱子游戏

本游戏为推箱子游戏,即通过移动方向键来控制小人去推动箱子,直到把所有的箱子都推动到各个目标中.游戏需要在人物行走过程中无法穿越墙和箱子,并在有限的范围中放好各箱子,且每次只能搬运一个箱子.所基于的语言是8086汇编,使用的编译环境是唐都的集中开发环境TD-PIT. 本次设计的基本思想是通过将不同的元素(墙.路.箱子.人.目标位)抽象为不同的矩阵,然后将所设计的地图描抽象成一个控制矩阵来控制图像的显示,每一个控制矩阵块代表一个元素,我们通过不断刷新控制矩阵来达到显示人物移动及推箱子的效果. 1.1

c语言实现的推箱子小游戏-1

本次游戏是个推箱子第一关最简单的小游戏 有详细注释,下面是做出来的游戏界面 游戏操作说明和功能说明: 按wasd控制小人的上下左右移动. 按 r 重新开始游戏 游戏开始有操作介绍 游戏结束有胜利提示 游戏原理分析 游戏开始时的星星个数 = 箱子在星星上的个数时 , 游戏胜利. 按 r 键重新开始游戏, 我们需要定义一个量 map_1[8][8] 来保存游戏初始时的界面, 操作时我们将其赋值给 map[8][8] 来进行操作,以便重新归位, 这里就用到了memcpy()函数. wasd 代表上下左

C语言学习总结(二) 基本运算

第三章.基本运算 (运算符.算数运算符.关系运算符.逻辑运算符.三目运算符.ASXLL码) 一.什么是运算符? 概念:是编译程序执行特定的算术或逻辑操作的符号: 分类:算术运算符. 关系运算符.逻辑运算符.按位运算符. 按照运算操作数分为: 单目运算:只有一个操作数 如 : i++       !       sizeof 双目运算:有两个操作数 如 : a+b 三目预算:C语言中唯一的一个,也称为问号表达式 a>b ? 1 : 0 运算遵循规则:数学的运算规则,先看优先级,再看结合律(从左到右

&lt;20&gt;【掌握】《走出迷宫》游戏代码实现+【理解】《走出迷宫》游戏优化

#include <stdio.h> #define COL 6 #define ROW 6 int main(int argc, const char * argv[]) { //****** 定义变量 ********** //1.定义变量,地图.存储用户输入的方向.小人的位置     char map[ROW][COL]={         {'#','#','#','#','#','#'},         {'#','O','#','#',' ',' '},         {'#'

C试题,欢迎大家在下面写下题目的结果

1,求S(n) = a+aa+aaa+aaaa+...+aa..a之值,其中a是一个数字,n表示a的位数例如:22+222+2222+22222(此时n=5),n和a都从键盘输入. OK 2,猴子吃桃问题.猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个.第二天早上又将剩下的桃子吃掉一半,又多吃一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,就只剩一个桃子了.求第一天共摘多少个桃子.ok 3,如果要将整钱换成零钱,那么一元钱可兑换成一角.两角.五角,问有多少