js实现坦克移动小游戏


Posted in Javascript onOctober 28, 2019

本文实例为大家分享了js坦克移动的具体代码,供大家参考,具体内容如下

先看看,js超简单实现图片旋转:

var current = 180;//需要反转的角度
tank.style.transform = 'rotate('+current+'deg)';//在style里的transform赋值'rotate('+current+'deg)'

?附:简易的小坦克移动js小游戏
(注:键盘上的上下左右键 键值分别是37、38、39、40)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id='container'>
  <img src="tank.png" alt="" id='tank'>
 </div>
</body>
<script>
 container.style="width:1000px;height:800px;border:3px solid;";
 tank.style="width:200px;height:200px;position:relative;top:0px;left:0px;"
 document.body.onkeydown=function(){
  var current = 0;
  var top = parseInt(tank.style.top);
  var left = parseInt(tank.style.left);
  var code = event.keyCode;
  if(code == 37) {
   current = 180;
   tank.style.transform = 'rotate('+current+'deg)';
   if(left <= 0) {
    alert("您已经到最左边了!");
   }
   else{
    tank.style.left = (left-10) +"px";
   }
  }
  if(code == 38) {
   current =270;
   tank.style.transform = 'rotate('+current+'deg)';
   if(top <= 0) {
    alert("您已经到最上边了!");
   }
   else{
    tank.style.top = (top-10) +"px";
   }
  }
  if(code == 39) {
   current = 0;
   tank.style.transform = 'rotate('+current+'deg)';
   if(left+parseInt(tank.width)+6 >= 1000) {
    alert("您已经到最右边了!");
   }
   else{
    tank.style.left = (left+10) +"px";
   }
  }
  if(code == 40) {
   current = 90;
   tank.style.transform = 'rotate('+current+'deg)';
   if(top+parseInt(tank.width)+6 >= 800) {
    alert("您已经到最下边了!");
   }
   else{
    tank.style.top = (top+10) +"px";
   }
  }
 }
</script>
</html>

js实现坦克移动小游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
js实现数字滚动特效
Dec 16 Javascript
vue 实现走马灯效果
Oct 28 #Javascript
JS实现json数组排序操作实例分析
Oct 28 #Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 #Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 #Javascript
vue 实现input表单元素的disabled示例
Oct 28 #Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
VUE解决 v-html不能触发点击事件的问题
Oct 28 #Javascript
You might like
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
Vue计算属性的使用
2017/08/04 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python3 shelve模块的详解
2017/07/08 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python猴子补丁知识点总结
2020/01/05 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
毕业典礼主持词大全
2014/03/26 职场文书
《老山界》教学反思
2014/04/08 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
河童之夏观后感
2015/06/11 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书