js实现坦克移动小游戏

2024-07-29 02:06:38

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript 模拟坦克大战游戏(html5版)附源码下载

一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

源码下载源码我已经上传到 CSDN 了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873. 源码使用 VS 2013 +TypeScript 1.4 进行开发.打开后,显示如下图: JsTankGame 1.0:老的使用 JS 编写的坦克游戏. JsTankGame 2.0:新的使用 TS 直接翻译过来的游戏. JsTankGame:在 2.0 的基础上,对类型进行了重构后的新游戏. 重构步骤由于老的 JS 游戏是采用 MS
JavaScript原生编写《飞机大战坦克》游戏完整实例

先来看看开始的界面图实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r
javascript制作坦克大战全纪录（1）

PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.本身没有太难的东西,这个案例将js面向对象用的比较好,可以作为js面向对象的入门教程. 1. 创建基本对象,实现坦克简单的移动 1.1 如何在地图中绘制画布? 考虑到浏览器兼容的问题,我们用操作dom的方式来实现游戏对象的绘制和刷新.我们如何存储我们的地图呢? 我们应该把地图用一个二维数组来保存, js中没有二维数组,但是可以通过在一维数组从存储数组来实现. 1.2 代码实现我们将画布设计为 13 * 13 的一个二维
javascript制作坦克大战全纪录（2）

2. 完善地图我们的地图中有空地,墙,钢,草丛,水,总部等障碍物. 我们可以把这些全部设计为对象. 2.1 创建障碍物对象群对象群保存各种地图上的对象,我们通过对象的属性来判断对象是否可以被穿过或被攻击. Barrier.js: 复制代码代码如下: // 障碍物基类对象,继承自TankObject Barrier = function () { this.DefenVal = 1; // 防御力 this.CanBeAttacked = true; //
javascript 制作坦克大战游戏初步图片与代码

学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n
js实现坦克移动小游戏

本文实例为大家分享了js坦克移动的具体代码,供大家参考,具体内容如下先看看,js超简单实现图片旋转: var current = 180;//需要反转的角度 tank.style.transform = 'rotate('+current+'deg)';//在style里的transform赋值'rotate('+current+'deg)' –附:简易的小坦克移动js小游戏 (注:键盘上的上下左右键键值分别是37.38.39.40) <!DOCTYPE html> <html la
使用vue.js编写蓝色拼图小游戏

之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p
分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /
js实现贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
原生js实现贪食蛇小游戏的思路详解

先不多说先上图下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>
C++实现坦克大战小游戏EGE图形界面

C++ EGE 实现坦克大战小游戏,供大家参考,具体内容如下因为有过一次用EGE写小游戏的经验,所以这一次写坦克大战快了很多.并且使用对象编程也简化了很多编程时繁琐的步骤. 写出坦克大战使我在学习编程的道路上又迈出了一大步. 如果您需要图片素材的,我可以单独发给您. 技术环节: 编译环境:Windows VS2019 需求: 控制坦克移动发射炮弹,炮弹可以消灭敌军坦克,且可以消灭砖块.坦克遇到方块会被挡住.敌军消灭我军三次或基地被毁则游戏失败,共摧毁十次敌方坦克游戏胜利. 思路: 先写出坦克的
原生JS实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p
JS实现躲避粒子小游戏

本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下小项目的实战操作可以帮助我们更好的掌握javascript 躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度页面效果: 实现过程不积小流,无以成江海. 将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成.小绿球非水平非垂直方向的运动.小绿球碰撞容器内壁后弹性运动.生成多个小绿球.拖拽红球.红球的边界判断.红球与绿球的碰撞检测."坚持n秒&
js实现双人五子棋小游戏

本文实例为大家分享了js实现双人五子棋小游戏的具体代码,供大家参考,具体内容如下这是自己自学js的时候,在网上找的js源码,由于是自学,花了数小时才把这个源码大致弄明白. 大致算法自定义棋盘规格,直接在棋盘建新div就可以,长度宽度用计算就可以了.下棋,在div里再建class,这里要给每个class标一个site值,由site值写出该棋子竖直方向和横向的坐标,由坐标可以写出棋子胜利的条件.而棋子的黑白走是用标识符,偶的标识符则是白棋子的class.奇的标识符则是黑棋子的class. ps
js实现跳一跳小游戏

本文实例为大家分享了js实现跳一跳小游戏的具体代码,供大家参考,具体内容如下效果流程分析 1.鼠标按下开始蓄力 2.鼠标松开,根据鼠标按下的时间让小球运动相应的距离 3.判断小球落点是否在平台内 4.如果在平台范围内,产生下一个平台,分数加10.如果不在游戏结束,判断分数是否大于历史最高分,更新历史最高分. 动画效果 5.鼠标按下小球所在平台要有蓄力效果,鼠标松开后慢慢恢复, 6.小球在空中的运动曲线要平滑 7.小球和平台要有3D效果注意事项 8.运动涉及到计算器和延时器,要注意清除定时器

js实现坦克移动小游戏

相关推荐

随机推荐