JavaScript 坦克大战

界面预览

在线体验

坦克大战

需求分析

双人游戏，两套按键分别控制两辆坦克
坦克四个方向移动，并且调整坦克朝向
边缘检测，坦克只能在地图里面移动
发射子弹，四个方向都能发射子弹
子弹边缘检测
子弹碰撞检测，子弹碰到地形，子弹与地形消失
子弹碰到敌方坦克游戏结束
生成随机地形，并且限制坦克移动

页面结构与布局

 <div class="wrap"><div class="tan red"><img src="./image/坦克.jpg" alt=""></div><div class="tan blue"><img src="./image/坦克.jpg" alt=""></div></div>

 * {margin: 0;padding: 0;}.wrap {width: 640px;height: 640px;border: 1px #ccc solid;margin: auto;position: relative;}.tan {width: 40px;height: 40px;position: absolute;box-sizing: border-box;}.tan img {display: block;width: 40px;height: 40px;}.red {bottom: 0px;right: 0px;border: 1px red solid;}.blue {top: 0px;left: 0px;border: 1px blue solid;}span {width: 10px;height: 10px;border-radius: 50%;position: absolute;background-color: brown;}.wall {position: absolute;background-color: brown;width: 40px;height: 40px;}li {top: 0;left: 80px;position: absolute;list-style: none;}

地形类

class Wall {constructor() {this.init()}init() {this.col = [];this.row = [];for (var i = 1, n = 15; i < n; i++) {this.col.push(i);this.row.push(i);};for (var i = 0; i < 14; i++) {let rowIndex = randomInt(0, this.row.length - 1)let colIndex = randomInt(0, this.col.length - 1)$(`<div class="wall" style="top:${this.row[rowIndex]*40}px; left:${this.col[colIndex]*40}px"></div>`).appendTo('.wrap');this.row.splice(rowIndex, 1);this.col.splice(colIndex, 1);};}}

子弹类

在定义子弹类之前需要实例化地形，

 let wall = new Wall()let wallArr = [...$('.wall')]
class Bullet {constructor(x, y, direction, target) {this.init(x, y, direction, target);}init(x, y, direction, target) {this.x = x;this.y = y;this.direction = direction;this.ele = $('<span></span>')this.initBullet();this.wrap = $('.wrap');this.target = target}initBullet() { //初始化子弹坐标if (tag) {return}this.ele.css('left', this.x + 'px');this.ele.css('top', this.y + 'px');$('.wrap').append(this.ele);this.move();}move() { //子弹移动if (tag) {return}this.timer = setInterval(() => {switch (this.direction) {case 'top':this.y -= 6;break;case 'left':this.x -= 6;break;case 'right':this.x += 6;break;case 'bottom':this.y += 6;break;}if (tag) {clearInterval(this.timer);return}this.collision()this.edge();this.ele.css('left', this.x + 'px');this.ele.css('top', this.y + 'px');}, 20)}edge() { //边缘检测if (this.x <= 0 || this.y <= 0 || (this.x >= this.wrap.width() - 10) || (this.y >= this.wrap.height() - 10)) {this.ele.remove();clearInterval(this.timer);return;}}collision() { //碰撞检测// wallArr.forEach(item => {if (parseInt(this.x / 40) == parseInt(item.offsetLeft / 40) && parseInt(this.y / 40) ==parseInt(item.offsetTop / 40)) {this.ele.remove();$(item).remove()clearInterval(this.timer);}})if (!((this.x < this.target.offsetLeft) || (this.x > this.target.offsetLeft + 40) || this.y < this.target.offsetTop || (this.y > this.target.offsetTop + 40))) {this.ele.remove();$(this.target).remove();clearInterval(this.timer);alert('游戏结束')$('span').remove();tag = true;return;}}}

坦克类

class Tank {constructor(ele, myKeyCode) {this.tank = ele;this.init(myKeyCode);}init(myKeyCode) { //初始化坦克this.keyDown(myKeyCode);this.x = this.tank[0].offsetLeft;  this.y = this.tank[0].offsetTop;this.wrap = $('.wrap');this.direction = 'top';this.fire(myKeyCode);this.target = this.tank.siblings('.tan')[0];}keyDown(myKeyCode) { //绑定移动事件，控制方向var that = this$(document).keyup(function (e) {switch (e.keyCode) {case myKeyCode.top:that.direction = 'top';break;case myKeyCode.right:that.direction = 'right';break;case myKeyCode.bottom:that.direction = 'bottom';break;case myKeyCode.left:that.direction = 'left';break;default:return;}that.move()})}move() { //根据方向移动坦克，调整坦克方向if(this.check()){return}switch (this.direction) {case 'top':this.y -= 40;this.y =  this.check()?this.y+40:this.ythis.tank.css('transform', 'rotateZ(0deg)')break;case 'left':this.x -= 40;this.x =  this.check()?this.x+40:this.xthis.tank.css('transform', 'rotateZ(-90deg)')break;case 'right':this.x += 40;this.x =  this.check()?this.x-40:this.xthis.tank.css('transform', 'rotateZ(90deg)')break;case 'bottom':this.y += 40;this.y =  this.check()?this.y-40:this.ythis.tank.css('transform', 'rotateZ(180deg)')break;}this.edge();this.check();this.tank.css('left', this.x + 'px');this.tank.css('top', this.y + 'px');}check() {return wallArr.some(item => (Math.ceil(this.x / 40) === Math.ceil(item.offsetLeft / 40) && Math.ceil(this.y / 40) ===Math.ceil(item.offsetTop / 40)))}edge() { //边缘检测if (this.x <= 0) {this.x = 0;}if (this.x >= this.wrap.width() - 40) {this.x = this.wrap.width() - 40;}if (this.y <= 0) {this.y = 0;}if (this.y >= this.wrap.height() - 40) {this.y = this.wrap.height() - 40;}}fire(myKeyCode) { //开火var that = this$(document).keyup(function (e) {if (e.keyCode === myKeyCode.send) {switch (that.direction) {case 'top':new Bullet((that.x + 15), that.y, that.direction, that.target)break;case 'left':new Bullet(that.x, (that.y + 15), that.direction, that.target)break;case 'right':new Bullet((that.x + 40), (that.y + 15), that.direction, that.target)break;case 'bottom':new Bullet((that.x + 15), (that.y + 40), that.direction, that.target)break;}}return})}}

初始化游戏

 $(document).on('mousemove', function (e) {e.preventDefault()})new Tank($('.blue'), {top: 87,right: 68,bottom: 83,left: 65,send: 69})new Tank($('.red'), {top: 38,right: 39,bottom: 40,left: 37,send: 96})alert(`蓝色方：W,D,S,A分别对应上右下左，E发射子弹
红色方：方向键控制方向，数字小键盘0发射子弹`)

JavaScript 坦克大战相关推荐

javascript写坦克大战
无意间浏览到别人写的js坦克大战,这是我这段时间看过最复杂的代码了(相对而言),作者博文链接:http://blog.whlcsj.com/js-tankwar.html github链接:https ...
JavaScript面向对象实现-坦克大战（附前端全套学习路线）
[课程简介] 使用javascript+面向对象实现一个坦克大战游戏,让更多的同学能更加深入地理解面向对象思想. [主讲内容] 1. 讲解什么是面向对象,javascript中如何实现面向对象 2. ...
【javascript面向对象之路】让我们一起来坦克大战吧01
提问不知道大家发现没有,运行时候浏览器或者电脑会变得很卡哦.根据我们之前的学习,你知道是什么原因导致的吗? 若是各位有兴趣,请你回答卡的原因,并提出优化方案. 前言 PS 各位要看效果还是使用ff ...
用canvas,javascript制作“坦克大战“小游戏
游戏截图这个是游戏做出来的效果: 用到的图片资源: 这里把所有的坦克动画所需的图片,地形图片等放在了一张图中,使用的时候就可以通过截取一部分来使用. 游戏代码下面就是整个游戏目前的代码,有什么建议 ...
html5+javascript+css实现---网页版坦克大战---无需运行环境
html5+javascript+css实现-网页版坦克大战-无需运行环境,只需一个浏览器,重拾少年情. 运行环境-除老版IE浏览器都可以: 源码需要请:点赞留言邮箱: 可以跳关,回退关卡.支持双人坦 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
Javascript面向对象深入-两小时实现坦克大战（含源码+工具+具体流程）
坦克大战是很多80.90后不可磨灭的童年记忆,借着这次公开课,我们一起使用 JavaScript面向的方式实现这个小游戏.让大家在这个小游戏的过程中学习面向对象在es6中的实现方式,以游戏制作的方式 ...
基于原生JavaScript的经典坦克大战游戏开发设计
主要含有以下功能: 1.玩家采用等级机制,共5级: 2.补充装备有子弹.金星.炸弹.导弹.手枪.战舰,分值各不相同: 3.打掉障碍可加分: 4.用鼠标控制子弹射击,左键为单发射击.右键为双发射击,屏蔽 ...
java坦克大战代码脚本之家,javascript制作坦克大战全纪录（1）
本文写作的目的是巩固一下自己最近学习的js知识, 这个教程适合熟悉js基本语法和面向对象语法的小伙伴学习.由于自己也是刚学js不久,所以难免出现错误.如果发现希望给予指正. PS:这个坦克大战是在网上 ...

JavaScript 坦克大战

JavaScript 坦克大战

界面预览

在线体验

需求分析

页面结构与布局

地形类

子弹类

坦克类

初始化游戏

JavaScript 坦克大战相关推荐

最新文章

热门文章