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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jQuery find和children方法使用
Jan 31 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
js初始化验证实例详解
Nov 26 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
Vue组件开发初探
Feb 14 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
Javascript中的this,bind和that使用实例
Dec 05 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脚本的10个技巧(5)
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
python清理子进程机制剖析
2017/11/23 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
如何基于线程池提升request模块效率
2020/04/18 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
服务宗旨标语
2014/07/01 职场文书
教师节感谢信
2015/01/22 职场文书
财务出纳岗位职责
2015/03/31 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
党员带头倡议书
2015/04/29 职场文书
杨善洲观后感
2015/06/04 职场文书
亲情作文之母爱
2019/09/25 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android