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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
九种原生js动画效果
Nov 11 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue生命周期的探索
Apr 03 Javascript
countup.js实现数字动态叠加效果
Oct 17 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加密解密的代码
2006/10/09 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python关于变量名的基础知识点
2020/03/03 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python requests.get带header
2020/05/05 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
英语系本科生求职信范文
2013/12/18 职场文书
大学军训感言1500字
2014/03/09 职场文书
王老吉广告词
2014/03/20 职场文书
2015年财务人员工作总结
2015/04/10 职场文书