学习HTML5之塔克大战（详细记录）
2014-08-16 11:21
218 查看
学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src=" "
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
效果图：
View Code
效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件：
其实内容没有任何变化，就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
2.html文件...
代码：
效果图还是一样的
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src=" "
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
<html>
<head>
</head>
<body>
<!--用canvas画布画一个矩形-->
<canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
<script type="text/javascript">
<!--得到画布-->
var canvas_1=document.getElementById("gxjun");
var cnt=canvas_1.getContext("2d");
//alert(cxt);
//moveto设置点位置
cnt.moveTo(20,20);
//有上面那个点为起点 设置第二个点位置
cnt.lineTo(20,90);
//将两个点连接起来
cnt.stroke();
//画出一个填充的三角形.-->路径
//开始新路径
cnt.beginPath();
cnt.moveTo(40,20);
cnt.lineTo(40,90);
cnt.lineTo(80,90);
//闭合路径，把最后这个点和第一点MoveTO()闭合
cnt.closePath();
//cnt.stroke();
//填充矩形 由于三角形闭合了，所以填充了三角形
//注意的一点是： 只有矩形才会不用路径闭合
cnt.fill();
cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);
//填充矩形
cnt.fillStyle="#004DFF"; //填充颜色
cnt.fillRect(140,20,30,50);
//画其他图形时一定的记得开始和闭合
cnt.beginPath();
//如何话圆形 arc函数
//这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
cnt.fillStyle="#FF0000";
cnt.arc(220,40,20,0,360,false); cnt.closePath();
cnt.stroke();
cnt.fill();
//画图像
var img_1=new Image();
img_1.src="10.jpg";
//加载完毕后再绘图....
img_1.onload=function(){
//(object,x,y,weidth,height)
cnt.drawImage(img_1,20,100,155,220);
}
</script>
</body>
</html>效果图：
<!DOCTYPE html>
<html>
<head>
<!--meta charset="utf-16"/-->
</head>
<body onkeydown="getCommand()">
<h1>经典坦克大战</h1>
<!--画布即作为坦克大战的地图-->
<canvas id="tankMap" width="600px" height="500px"
style="background-color: black; border: 2px solid red"></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=1;
//上移
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("tankMap");
//得到绘图上下文（即画笔）
var cxt=canvas1.getContext("2d");
//我的坦克hero
// var herox=130;
//var heroy=30;
// alert(cxt);
//坦克的方向:0表示向上,1表示向右,2表示下,3表示左
var hero = new Hero(40,40,0);
//把绘制坦克封装成为一个函数
function drawTank(tank){
switch(tank.direct)
{
case 0: //塔克
case 2:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,5,30);
//平移画出右边的矩形
cxt.fillRect(tank.x+15,tank.y,5,30);
//画出中间矩形
cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +10,tank.y +15);
var cnt=0;
if(tank.direct==0) cnt=0;
else if(tank.direct==2)cnt=30;
cxt.lineTo(tank.x +10,tank.y+cnt);
break;
case 1:
case 3:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,30,5);
//平移画出右边的矩形
cxt.fillRect(tank.x,tank.y+15,30,5);
//画出中间矩形
cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +15,tank.y +10);
if(tank.direct==1)
cxt.lineTo(tank.x +30,tank.y+10);
else if(tank.direct==3)
cxt.lineTo(tank.x,tank.y+10);
// cxt.fillStyle="#FEF26E" ;
//cxt.beginPath();
//cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
//cxt.closePath();
//cxt.fill();
break;
}
cxt.closePath();
cxt.stroke();
}
drawTank(hero);
//这是一个接收按键的函数
function getCommand(){
//alert("汗啊");
var code = event.keyCode;
// alert(code);
switch(code)
{
// 向上
case 38:
case 87: hero.moveUp(); break;
//向左
case 37:
case 65: hero.moveLeft(); break;
//向下
case 40:
case 83: hero.moveDown(); break;
//向右
case 39:
case 68: hero.moveRight(); break;
}
cxt.clearRect(0,0,600,500);
drawTank(hero);
}
</script>
</body>
</html>View Code
效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件：
其实内容没有任何变化，就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
// x,y表示坐标 direct表示方向
function Hero(x,y,direct){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=1;
//上移
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; //改变方向
}
}
//把绘制坦克封装成为一个函数
function drawTank(tank){
switch(tank.direct)
{
case 0: //塔克
case 2:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,5,30);
//平移画出右边的矩形
cxt.fillRect(tank.x+15,tank.y,5,30);
//画出中间矩形
cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +10,tank.y +15);
var cnt=0;
if(tank.direct==0) cnt=0;
else if(tank.direct==2)cnt=30;
cxt.lineTo(tank.x +10,tank.y+cnt);
break;
case 1:
case 3:
//设置颜色
cxt.fillStyle="#BA9658" ;
//先画出左面的矩形
cxt.fillRect(tank.x,tank.y,30,5);
//平移画出右边的矩形
cxt.fillRect(tank.x,tank.y+15,30,5);
//画出中间矩形
cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
//画出坦克的盖子
cxt.fillStyle="#FEF26E" ;
cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FEF26E" ;
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(tank.x +15,tank.y +10);
if(tank.direct==1)
cxt.lineTo(tank.x +30,tank.y+10);
else if(tank.direct==3)
cxt.lineTo(tank.x,tank.y+10);
// cxt.fillStyle="#FEF26E" ;
//cxt.beginPath();
//cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
//cxt.closePath();
//cxt.fill();
break;
}
cxt.closePath();
cxt.stroke();
}2.html文件...
代码：
<!DOCTYPE html>
<html>
<head>
<!--meta charset="utf-16"/-->
</head>
<body onkeydown="getCommand()">
<h1>经典坦克大战</h1>
<!--画布即作为坦克大战的地图-->
<canvas id="tankMap" width="600px" height="500px"
style="background-color: black; border: 2px solid red"></canvas>
<script type="text/javascript" src="tankgame2.js"></script>
<script type="text/javascript">
//定义一个HEro类
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文（即画笔）
var cxt=canvas1.getContext("2d");
//我的坦克hero
// var herox=130;
//var heroy=30;
// alert(cxt);
//坦克的方向:0表示向上,1表示向右,2表示下,3表示左
var hero = new Hero(40,40,0);
drawTank(hero);
//这是一个接收按键的函数
function getCommand(){
//alert("汗啊");
var code = event.keyCode;
// alert(code);
switch(code)
{
// 向上
case 38:
case 87: hero.moveUp(); break;
//向左
case 37:
case 65: hero.moveLeft(); break;
//向下
case 40:
case 83: hero.moveDown(); break;
//向右
case 39:
case 68: hero.moveRight(); break;
}
cxt.clearRect(0,0,600,500);
drawTank(hero);
}
</script>
</body>
</html>效果图还是一样的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对GWT-EXT学习时遇到的问题，详细记录下来
- HTML5学习记录一
- Nginx安装学习使用详细记录
- 【电子商务平台】Ofbiz研究学习详细记录——部署
- 【电子商务平台】Ofbiz研究学习详细记录——概况
- 今天开始要详细的记录学习sharepoint 的进度和相关的一些资料
- HTML5 学习记录——1
- HTML5 学习记录
- webview学习记录（有比较详细的代码注释）
- HTML5学习记录1-新特性
- HTML5学习记录之HTM5的设计
- php学习记录 html5 createObjectURL
- php 学习记录 formdata 文件上传 ajax html5
- Three.js学习记录--html5的编辑和第一个场景
- cocos2d-html5学习记录
- 我的第一篇博文 记录HTML5的学习（前言）
- HTML5，CSS3与Javascript，iOS下基础WebApp学习经验记录(2)
- HTML5学习记录一：播放视频，音频和拖放
- 学习HTML5之新特性标签一览（详细）
- 记录Java学习过程之坦克大战1