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 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
有关Promises异步问题详解
Nov 13 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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操作数组的一些函数整理介绍
2011/07/17 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JS继承 笔记
2011/07/13 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python字典排序的方法
2019/10/12 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
scrapy头部修改的方法详解
2020/12/06 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
九年级数学教学反思
2014/02/02 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
个人校本研修方案
2014/05/26 职场文书
走近毛泽东观后感
2015/06/04 职场文书
暑假打工感想
2015/08/07 职场文书
商业计划书格式、范文
2019/03/21 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
如何在Python中创建二叉树
2021/03/30 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers