返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5实现经典坦克大战坦克乱走还能发出一个子弹

2020-04-24 19:01:20易采站长站整理


<pre name=”code” class=”html”>tank.html</pre><pre name=”code” class=”html”><!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
</head>
<body onkeydown=”getCommand();”>
<h1>hmtl5-经典的坦克大战</h1>
<!–坦克大战的战场–>
<canvas id=”tankMap” width=”400px” height=”300px” style=”background-color:black”></canvas>
<span id=”aa”>数据</span>
<!–把tankGames.js引入到本页面–>
<script type=”text/javascript” src=”tank.js”></script>
<script type=”text/javascript”>
//得到画布
var canvas1=document.getElementById(“tankMap”);
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext(“2d”);
//我的坦克 hero
//方向
var hero=new Hero(140,140,0,heroColor);
//定义一颗空子弹
var heroBullet=null;
//定义敌人的坦克(敌人的坦克有多少? 思路 : 是单个单个的定义，还是放在数组中?)
var enemyTanks=new Array();
//先死后活 ，定3个，后面我们把敌人坦克的数量，作出变量
//0->上, 1->右, 2->下 3->左
for(var i=0;i<3;i++){
//创建一个坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enmeyColor);
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
}
//先调用一次
flashTankMap();
//专门写一个函数，用于定时刷新我们的作战区，把要在作战区出现的元素(自己坦克，敌人坦克，子弹，炸弹，
//障碍物…)->游戏思想
function flashTankMap(){
//把画布清理
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//画出自己的子弹
//子弹飞效果是怎么出现的?[答 ： 首先我们应该每隔一定时间(setInterval)就去刷新作战区,如果在刷新的时候，子弹坐标变换了，给人的感觉就是子弹在飞!]
drawHeroBullet();
//敌人的坦克
//画出所有敌人坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}
//这是一个接受用户按键函数
function getCommand(){
//我怎么知道，玩家按下的是什么键
//说明当按下键后 事件—>event对象—–>事件处理函数()
var code=event.keyCode;//对应字母的ascii码->我们看码表
switch(code){
case 87://上
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
case 74:
hero.shotEnemy();
break;
}
//触发这个函数 flashTankMap();

相关文章 大家在看