经典键盘事件(坦克移动)

HTML部分和css部分没有什么需要说的，只需要一个承载图片的img标签即可，给图片设置fixed定位即可(不一定必须得是fixed，只要是能改变位置的即可)，另外需要准备四张图片，分别是坦克四个朝向的图片

<img src="imgs/tankU.gif" alt="" id="myTank">

        img {position: fixed;left: 500px;top: 400px;}

js部分(核心代码，思路为判断键盘按下的键，控制图片的src和位置，也可以不改变src，控制图片旋转也行)

        let tank = document.getElementById("myTank");// 获取浏览器可视区域的宽高let bigHei = window.innerHeight;let bigWid = window.innerWidth;//键盘keyCode码---W:87   S:83   A:65    D:68document.onkeydown = function (e) {// 坦克每上下左右移动时，增加或减少5px的偏移量，得到一个新的坐标//坦克上移if (e.keyCode == "87") {tank.src = "./imgs/tankU.gif";if (tank.offsetTop >= 0) {tank.style.top = tank.offsetTop - 5 + "px";}}//坦克下移else if (e.keyCode == "83") {tank.src = "./imgs/tankD.gif";if (tank.offsetTop <= bigHei) {tank.style.top = tank.offsetTop + 5 + "px";}}//坦克左移else if (e.keyCode == "65") {tank.src = "./imgs/tankL.gif";if (tank.offsetLeft >= 0) {tank.style.left = tank.offsetLeft - 5 + "px";}}//坦克右移else if (e.keyCode == "68") {tank.src = "./imgs/tankR.gif";if (tank.offsetLeft <= bigWid) {tank.style.left = tank.offsetLeft + 5 + "px";}}}

经典键盘事件(坦克移动)相关推荐

java 坦克大战画坦克_Java坦克大战部分：画出界面，敌人坦克，我的坦克，不出界，键盘事件【诗书画唱】...
含很多自己写的个理解和注释,想出的解决,建议,提示,注意事项等方法: package tankeGame; import java.awt.Color; import java.awt.Graphic ...
JavaScript键盘事件经典案例
JavaScript键盘事件五大经典案例目录: JavaScript键盘事件五大经典案例 1.什么是键盘事件 2.常用键盘事件 3.常用属性和方法 4.案例 4.1 京东搜索框 4.2 快递单号输入 ...
我所知道坦克大战（单机版）之使用键盘控制改变坦克位置
我们发现前两篇文章所造成的坦克,他只能固定一个方向进行移动那么对于我们来说,一般要么使用鼠标,要么使用键盘控制那么我们怎么实现这样的方式呢? 实现键盘监听在java 中我们使用键盘监听的话有两种 ...
java事件处理机制---键盘事件
此案例实现了画框内圆形在按下上下左右时圆形的移动事件源:产生事件的对象,如:键盘.鼠标等事件:在事件源上产生了某种变化.如:键盘被按下等键盘事件监听需要实现 implements KeyLi ...
selenium+Python(鼠标和键盘事件)
本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按 ...
Python - selenium_WebDriver 鼠标键盘事件
from selenium import webdriver #引入ActionChains类提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...
jquery 组合键键盘事件
jQuery处理键盘事件,比如小说网站中常见的按左右键来实现上一篇文章和下一篇文章,按ctrl+回车实现表单提交,google reader和有道阅读中的全快捷键操作... 本文讲述jQuery处理按 ...
使用中文输入法时对键盘事件的处理
最近很久没有更新博客了,不是没有东西写,而是没有时间写.公司项目上事情比较多,又在工会谋了份差事:家里房子装修,尽管有老爸盯着,但很多时候还是要自己跑来跑去.所以有时候有了写博客的想法,却老是坐不下来 ...
c语言windows程序设计 - 第十天,C语言Windows程序设计 - 第十天 - 响应键盘事件...
响应键盘事件 ------------------------ 在开始学习有关键盘事件的知识前首先来看一段代码(回调函数这部分的代码): 1 LRESULT CALLBACK WndProc( HWN ...

经典键盘事件(坦克移动)

经典键盘事件(坦克移动)相关推荐

最新文章

热门文章