HTML5坦克大战（韩顺平版本）
HTML5坦克大战（韩顺平版本）
2017-3-22 22:46:22 by SemiconductorKING
去年暑假学习了一下HTML5实现简单的坦克大战，觉得对JavaScript初学者来说，练习这个小游戏代码段可以学到很多东西，包括canvas的简单运用，类的构造，类的继承等等。编写一个完整的游戏要有较强的逻辑性，这个demo的学习视频以及demo文件下载见我分享的链接：
链接：http://pan.baidu.com/s/1boAzSir 密码：mcp2
demo截图：
此demo只是一个简单的练习，效果low不low先不提，看代码吧：
HTML文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src='tank.js'></script>
</head>
<body onkeydown="changeDirect()">
<h1 style="color: #0714b9;">html5坦克大战</h1>
<div style="margin: 30px">
<canvas id='tankMap' width='500px' height='300px' style='background-color:#3e0549;'>
你的浏览器不支持canvas标签 ||||| You are seeing this message because your web browser does not support the canvas tag.
</canvas>
</div>
<div id='add1'></div>
<div id='add2'></div>
<div id='add3'></div>
<div style="margin: 30px;font-size: 12px">
<p>控制方法：按下键盘w s a d或者↑ ↓ ← →分别是坦克的上下左右行驶<br/>按下j或者Enter键为射击</p>
</div>
</body>
<script>
var canvas = document.getElementById('tankMap');
//获得画笔
var ctx = canvas.getContext('2d'); //定义炸弹数组
var bombs = new Array(); //构造英雄
var hero = new Hero(380,260,0,heroColor); //创建敌人数组
var enemyTanks = new Array(); //创建敌人的子弹数组
var enemyBullets = new Array();
for(var i=0;i<6;i++){
var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);
enemyTanks[i] = enemyTank;
//drawTank(enemyTanks[i]);
//让敌人的坦克动起来
var timer = window.setInterval("enemyTanks["+i+"].run()",50);
enemyTanks[i].timer = timer;
//让敌人发射子弹
var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],'enemy');
enemyBullets.push(enemyBullet);
enemyBullets[i].timer = window.setInterval("enemyBullets["+i+"].run()",50);
} //定义英雄子弹数组
var heroBullets = new Array();
var heroBullet = null; if(hero.isLive){
drawTank(hero);
} //flashMap();
//重置画布
function flashMap(){
ctx.clearRect(0,0,500,300);
isHitHeroTank(enemyBullets,hero);
if(hero.isLive){
drawTank(hero);
} isHitEnemyTank(heroBullets,enemyTanks);
//画出自己坦克的子弹
drawHeroBullet(heroBullets);
//画出敌人坦克的子弹
drawEnemyBullet(enemyBullets,enemyTanks);
for(var i=0;i<6;i++){
if(enemyTanks[i].isLive){
drawTank(enemyTanks[i]);
}
} //画出爆炸图片
for(var k=0;k<bombs.length;k++){
var img = new Image();
img.src = 'bomb_1.gif';
var x = bombs[k].x;
var y = bombs[k].y;
ctx.drawImage(img,x,y,30,30);
ctx.drawImage(img,x,y,40,35);
ctx.drawImage(img,x,y,35,40);
bombs.splice(k,1);
}
} function changeDirect(){
var keycode = event.keyCode;
switch(keycode){
case 38:;
case 87:hero.moveUp();break;
case 39:;
case 68:hero.moveRight();break;
case 40:;
case 83:hero.moveBottom();break;
case 37:;
case 65:hero.moveLeft();break;
case 74:;
case 13:hero.shotEnemy();break;
}
flashMap();
}
window.setInterval("flashMap()",50);
</script>
</html>
tank.js代码：
//定义敌人和我们自己的坦克的颜色
var enemyColor = new Array("#0BB","#0FF");
var heroColor = new Array("#dc0","#ff5");
//封装一个公用的坦克父类
function Tank(x,y,direct){
this.x = x;
this.y = y;
this.speed = 3;
this.direct = direct;
this.moveUp = function(){
if (hero.y>0) {
hero.y -= hero.speed;
}
hero.direct = 0;
}
this.moveRight = function(){
if (hero.x+30<500) {
hero.x += hero.speed;
}
hero.direct = 1;
}
this.moveBottom = function(){
if (hero.y+30<300) {
hero.y += hero.speed;
}
hero.direct = 2;
}
this.moveLeft = function(){
if (hero.x>0) {
hero.x -= hero.speed;
}
hero.direct = 3;
}
} //英雄坦克类
function Hero(x,y,direct,color){
//将坦克类的构造方法赋给hero
this.hero = Tank;
//调用,拥有坦克类的所有的属性和方法
this.hero(x,y,direct);
this.color = color;
this.direct = direct;
this.isLive = true;
this.shotEnemy = function(){
switch(this.direct){
case 0:
heroBullet = new Bullet(this.x+9,this.y,this.direct);
break;
case 1:
heroBullet = new Bullet(this.x+30,this.y+9,this.direct);
break;
case 2:
heroBullet = new Bullet(this.x+9,this.y+30,this.direct);
break;
case 3:
heroBullet = new Bullet(this.x,this.y+9,this.direct);
break;
}
heroBullets.push(heroBullet);
heroBullets[heroBullets.length-1].timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
}
}
//敌人的坦克
function EnemyTank(x,y,direct,color){
//将坦克类的构造方法赋给敌人坦克
this.enemyTank = Tank;
//调用,拥有坦克类的所有的属性和方法
this.enemyTank(x,y,direct);
this.color = color;
this.isLive = true;
this.timer = null;
this.speed = 1;
this.count = 0;
this.direct = direct;
this.bulletIsLive = true;
this.run = function(){
switch(this.direct){
case 0:
if(this.y>0){
this.y--;
}
break;
case 1:
if(this.x+30<500){
this.x += this.speed;
}
break;
case 2:
if(this.y+30<300){
this.y += this.speed;
}
break;
case 3:
if(this.x>0){
this.x -= this.speed;
}
break;
} if(this.count>=30){
this.direct = Math.round(Math.random()*3);
this.count=0;
}
this.count++;
//在坦克走的过程中,判断一下,这个坦克的子弹是否活着
if(this.bulletIsLive == false && this.isLive){
//子弹over，加子弹
switch(this.direct){
case 0:
enemyBullets.push(new Bullet(this.x+9,this.y,this.direct,this,'enemy'));
break;
case 1:
enemyBullets.push(new Bullet(this.x+30,this.y+9,this.direct,this,'enemy'));
break;
case 2:
enemyBullets.push(new Bullet(this.x+9,this.y+30,this.direct,this,'enemy'));
break;
case 3:
enemyBullets.push(new Bullet(this.x,this.y+9,this.direct,this,'enemy'));
break;
}
enemyBullets[enemyBullets.length-1].timer = window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
this.bulletIsLive = true;
}
}
}
//绘制坦克
function drawTank(hero){
switch(hero.direct){
case 0:
case 2:
ctx.fillStyle = hero.color[0];
ctx.fillRect(hero.x,hero.y,5,30);
ctx.fillRect(hero.x+15,hero.y,5,30);
ctx.fillRect(hero.x+6,hero.y+5,8,20);
ctx.fillStyle = hero.color[1];
ctx.beginPath();
ctx.arc(hero.x+10,hero.y+15,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[1];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+10,hero.y+15);
if(hero.direct==0){
ctx.lineTo(hero.x+10,hero.y);
}else if(hero.direct==2){
ctx.lineTo(hero.x+10,hero.y+30);
}
ctx.stroke();
break;
case 1:
case 3:
ctx.fillStyle = hero.color[0];
ctx.fillRect(hero.x,hero.y,30,5);
ctx.fillRect(hero.x,hero.y+15,30,5);
ctx.fillRect(hero.x+5,hero.y+6,20,8);
//需要注意,画圆的时候需要重新开启路径
ctx.fillStyle = hero.color[1];
ctx.beginPath();
ctx.arc(hero.x+15,hero.y+10,3,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//画出炮筒(直线)
ctx.strokeStyle = hero.color[1];
ctx.lineWidth = 2;
ctx.moveTo(hero.x+15,hero.y+10);
if(hero.direct ==1){
ctx.lineTo(hero.x+30,hero.y+10);
}else if(hero.direct ==3){
ctx.lineTo(hero.x,hero.y+10);
}
ctx.stroke();
break;
}
} //定义一个子弹类
function Bullet(x,y,direct,tank,type){
this.x = x;
this.y = y;
this.speed = 3;
this.direct = direct;
this.timer = null;
this.isLive = true;
this.tank = tank;
this.type = type;
this.run = function(){
switch(this.direct){
case 0:
this.y -= this.speed;
break;
case 1:
this.x += this.speed;
break;
case 2:
this.y += this.speed;
break;
case 3:
this.x -= this.speed;
break;
}
document.getElementById('add1').innerText = " 子弹x轴:"+this.x+" 子弹y轴:"+this.y;
document.getElementById('add2').innerText = " 坦克x轴:"+hero.x+" 坦克y轴:"+hero.y;
document.getElementById('add3').innerText = " hero子弹数量:"+heroBullets.length;
if(this.x <0 || this.x>=500 ||this.y<0 || this.y>300 || this.isLive==false){
this.isLive = false;
if(this.type=='enemy'){
this.tank.bulletIsLive = false;
}
window.clearInterval(this.timer);
}
}
}
function drawHeroBullet(bullets){
for(var i=0;i<bullets.length;i++){
var heroBullet = bullets[i];
if(heroBullet.isLive){
ctx.fillStyle = '#FEF26E';
ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
}
//画出敌人坦克的子弹
function drawEnemyBullet(enemyBullets){
for(var i=0;i<enemyBullets.length;i++){
var enemyBullet = enemyBullets[i];
if(enemyBullet.isLive){
ctx.fillRect(enemyBullet.x,enemyBullet.y,2,2);
}
}
}
function isHitEnemyTank(heroBullets,enemyTanks){
for(var i=0;i<heroBullets.length;i++){
for(var j=0;j<enemyTanks.length;j++){
//判断一下自己的子弹和敌人的坦克坐标
if(enemyTanks[j].isLive){
switch(enemyTanks[j].direct){
case 0:
case 2:
if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+20&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+30){
//标记敌人的坦克和我们的子弹已经死掉了
heroBullets[i].isLive = false;
enemyTanks[j].isLive = false;
var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb); }
break;
case 1:
case 3:
if(heroBullets[i].x>=enemyTanks[j].x&&heroBullets[i].x<=enemyTanks[j].x+30&&heroBullets[i].y>=enemyTanks[j].y&&heroBullets[i].y<=enemyTanks[j].y+20){
//标记敌人的坦克和我们的子弹已经死掉了
heroBullets[i].isLive = false;
enemyTanks[j].isLive = false;
var bomb = new Bomb(enemyTanks[j].x,enemyTanks[j].y);
bombs.push(bomb);
}
break;
}
} }
}
} //定义炸弹类
function Bomb(x,y){
this.x = x;
this.y = y;
} //判断敌人的子弹是否击中自己的坦克
function isHitHeroTank(enemyBullets,heroTank){
for(var i=0;i<enemyBullets.length;i++){
if(enemyBullets[i].isLive && heroTank.isLive){
switch(heroTank.direct){
case 0:
case 2:
if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+20 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +30){
heroTank.isLive = false;
enemyBullets[i].isLive = false;
}
break;
case 1:
case 3:
if(enemyBullets[i].x >= heroTank.x && enemyBullets[i].x <= heroTank.x+30 && enemyBullets[i].y >= heroTank.y && enemyBullets[i].y <= heroTank.y +20){
heroTank.isLive = false;
enemyBullets[i].isLive = false;
}
break;
}
}
}
}
end...
HTML5坦克大战（韩顺平版本）的更多相关文章
- HTML5坦克大战1
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
- HTML5坦克大战
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- HTML5坦克大战（1）绘制坦克
坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- HTML5坦克大战（2）绘制坦克复习
html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- HTML5 坦克大战
代码 点击打开链接
- 韩顺平HTML5教程www.gis520.com
传智播客.韩顺平.HTML5游戏公开课-坦克大战01.HTML5介绍.HTML5发展.HTML5学习网站推荐.wmv http://dl.vmall.com/c0b7xrkftf 传智播客.韩顺平.H ...
- html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
- java的坦克大战
一个渣渣写坦克大战的步骤: 1.首先创造好一个坦克和一个GAME框架,并且坦克能够跟着键盘键位移动 案例:在我的博客文件中保存,它的名字是:tankwar0100.rar 主要解决了:1.坦克背景框 ...
随机推荐
- django shortcut function
render() render(request, template_name, context=None, content_type=None, status=None, using=None) 必须 ...
- 「NOIP 2013」 货车运输
题目链接 戳我 \(Solution\) 这一道题直接用\(kruskal\)重构树就好了,这里就不详细解释\(kruskal\)重构树了,如果不会直接去网上搜就好了.接下来讲讲详细过程. 首先构建\ ...
- numpy数组 拼接
转载自:https://blog.csdn.net/zyl1042635242/article/details/43162031 数组拼接方法一 首先将数组转成列表,然后利用列表的拼接函数append ...
- django重写form表单中的局部钩子函数
from django import forms from django.core.exceptions import ValidationError from jax import models c ...
- 使用ActiveMQ实现简易聊天功能
一 什么是消息队列 我们可以把消息队列比作是一个存放消息的容器,当我们需要使用消息的时候可以取出消息供自己使用.消息队列是分布式系统中重要的组件,使用消息队列主要是为了通过异步处理提高系统性能和削峰. ...
- Sumsets（数学）
Sumsets Time Limit: 2000MS Memory Limit: 200000K Total Submissions: 14964 Accepted: 5978 Description ...
- ArchLinux下shadow服务报错
用着Linux蓦然开机就报错了.我是个对报错很敏感的,而是是开机报错. 这个的严重性,听一位前辈说过:如果开机报错你都不理它,慢慢的它就会宕机. 报错内容: shadow服务是Linux下用于校队pa ...
- badboy使用手册
使用badboy录制脚本 3.1: 页面功能分析: 1. 界面视图,模拟浏览器,能够进行操作 2. 需要录制脚本的URL 3. 点击运行URL 4. Summary:运行的各指标,响应时间,成功事物等 ...
- P1975 [国家集训队]排队 线段树套平衡树维护动态逆序对查询
$ \color{#0066ff}{ 题目描述 }$ 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍 ...
- 网络传输层之TCP/UDP详解
一.运输层协议概述 从通信和信息处理的角度看,运输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最低层. 运输层的任务就是负责主机中两个进程之间的通信,其数据传输的单 ...