HTML5-坦克大战一完成坦克上下左右移动的功能（一）
坦克大战一完成坦克上下左右移动的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head> <body onkeydown="getCommand()">
<h1>html5-经典的坦克大战</h1>
<canvas id="tankeMap" width="500px" height="500px" style="background-color:black">
</canvas>
<script type="text/javascript">
//定义一个hero类
//x、y表示初始坐标，direct表示方向
function Hero(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=5; this.moveUp=function(){
this.y-=this.speed;
this.direct=0;
}
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
this.moveLeft=function(){
this.x-=this.speed;
this.direct=3;
}
} //准备工作
//得到画布
var canvas1=document.getElementById("tankeMap");
//得到上下文引用对象，你可以理解成画笔
var cxt=canvas1.getContext("2d"); //定义一个坦克
//数字0表示向上 数字1表示右 数字2表示下 数字3表示左
var hero=new Hero(130,30,0); //把创建坦克的方法封装为一个对象
//该函数可以画自己的坦克，也可以画敌人的坦克
//tanke就是一个对象
function drawTanke(tanke){
//坦克的方向
switch(tanke.direct){
case 0:
case 2:
{//上
//画出自己的坦克设置颜色
cxt.fillStyle="#00A6BD";
cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮
cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮
cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体 //画中间的圆形的炮筒体
cxt.fillStyle="#00A6BD";
cxt.beginPath();
cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);
cxt.closePath();
cxt.fill(); //画出炮筒
cxt.strokeStyle="#00A6BD";
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置
if(tanke.direct==0){
cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置
}else if(tanke.direct==2){
cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置
}
cxt.closePath();
cxt.stroke();
}
break;
case 1:
case 3:
{//右
//画出自己的坦克设置颜色
cxt.fillStyle="#00A6BD";
cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮
cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮
cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体 //画中间的圆形的炮筒体
cxt.fillStyle="#00A6BD";
cxt.beginPath();
cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);
cxt.closePath();
cxt.fill(); //画出炮筒
cxt.strokeStyle="#00A6BD";
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置
if(tanke.direct==1){//右
cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置
}else if(tanke.direct==3){//左
cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置
} cxt.closePath();
cxt.stroke();
}
break;
}
} drawTanke(hero); function getCommand(){
var code=event.keyCode;
cxt.clearRect(0,0,500,500);
switch(code){
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
cxt.clearRect(0,0,500,500); drawTanke(hero);
} </script>
</body>
</html>
也可以将hero的定义，和画坦克的函数抽取出来放到一个文件里面让HTML界面的逻辑更加清晰，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head> <body onkeydown="getCommand()">
<h1>html5-经典的坦克大战</h1>
<canvas id="tankeMap" width="500px" height="500px" style="background-color:black">
</canvas>
<script type="text/javascript" src="tankeGame.js"></script>
<script type="text/javascript">
//准备工作
//得到画布
var canvas1=document.getElementById("tankeMap");
//得到上下文引用对象，你可以理解成画笔
var cxt=canvas1.getContext("2d"); //定义一个坦克
//数字0表示向上 数字1表示右 数字2表示下 数字3表示左
var hero=new Hero(130,30,0); drawTanke(hero); function getCommand(){
var code=event.keyCode;
cxt.clearRect(0,0,500,500);
switch(code){
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
cxt.clearRect(0,0,500,500); drawTanke(hero);
} </script>
</body>
</html>
HTML5-坦克大战一完成坦克上下左右移动的功能（一）的更多相关文章
- 【 java版坦克大战--事件处理】 坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下
上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...
- Java坦克大战 (七) 之图片版
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- HTML5坦克大战（韩顺平版本）
HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...
- html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
随机推荐
- 相关系数之杰卡德相似系数(Jaccardsimilarity coefficient)
杰卡德相似系数(Jaccardsimilarity coefficient) (1)杰卡德相似系数 两个集合A和B交集元素的个数在A.B并集中所占的比例,称为这两个集合的杰卡德系数,用符号 J(A,B ...
- ipfs补充命令
ipfs cat之后 将文件保存在指定的路径下 添加都文件夹下面 ipfs files cp /ipfs/QmSkyNME8YqndkNq7ovKphpYwjk2hEQ61P1pjSckqLP6zt ...
- 成为IT精英，我奋斗7年【转】
这些日子 我一直在写一个实时操作系统内核,已有小成了,等写完我会全部公开,希望能够为国内IT的发展尽自己一份微薄的力量.最近看到很多学生朋友和我当年一样没 有方向 ,所以把我的经历写出来与大家共勉,希 ...
- 详细讲解Java中方法的重载和重写
首先讲讲方法的重载: Java的重载就是在类中可以创建多个方法,它们具有相同的名字,但是却有不同的参数. 判断是否重载只有两个条件: 1)相同的方法名 2)不同的参数 具体为: A.方法参数类型不同 ...
- 【SSH】——Hibernate三种状态之间的转化
Hibernate的三种状态为:transient.persistent和detached.对这三种状态的理解可以结合Session缓存,在Session缓存中的状态为persistent,另外两种不 ...
- ui-grid表格怎么实现内容居中
这次是思想落后了,只关注怎么使用原生的ui-grid样式来实现这一需求,后来发现可以通过此列的cellTemplate来为列指定内容,从而可以使用css调整样式. ps:其实有时候换种思路,豁然开朗. ...
- post 中文乱码处理 接受的编码--->解码成字节数组(无任何编码形式)----->编码成想要的格式
- shared_ptr 的循环依赖问题
#include <memory> #include <iostream> using namespace std; struct A; struct B; struct A ...
- 2018宁夏邀请赛L Continuous Intervals
题目链接:https://nanti.jisuanke.com/t/28412 题意: 给出n个数的序列.问序列中有多少个区间满足,排序完之后任意两个相邻的数之差不大于1. 题解: 用max表示区间最 ...
- BZOJ day1
十题击破 1051108811921432195119682242245624632761