学习HTML5之塔克大战（详细记录）
时间:2022-05-05
本文章向大家介绍学习HTML5之塔克大战（详细记录），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!
(1).像素是一个密度单位：无法用度量....
(2) stoke--->画线 fill--->填充
(3)再画图形时，一定记得路径闭合...
(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制
绘制照片的一些基本步骤：
（1） 创建image对象 new Image();
（2）指定图片（或者路径） src=" "
（3）先加载，再进行一段绘制 dirawImage();
代码详细的注释：
1 <html>
2 <head>
3
4 </head>
5 <body>
6 <!--用canvas画布画一个矩形-->
7 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
8 <script type="text/javascript">
9 <!--得到画布-->
10 var canvas_1=document.getElementById("gxjun");
11 var cnt=canvas_1.getContext("2d");
12 //alert(cxt);
13 //moveto设置点位置
14 cnt.moveTo(20,20);
15 //有上面那个点为起点 设置第二个点位置
16 cnt.lineTo(20,90);
17 //将两个点连接起来
18 cnt.stroke();
19 //画出一个填充的三角形.-->路径
20 //开始新路径
21 cnt.beginPath();
22 cnt.moveTo(40,20);
23 cnt.lineTo(40,90);
24 cnt.lineTo(80,90);
25 //闭合路径，把最后这个点和第一点MoveTO()闭合
26 cnt.closePath();
27 //cnt.stroke();
28 //填充矩形 由于三角形闭合了，所以填充了三角形
29 //注意的一点是： 只有矩形才会不用路径闭合
30 cnt.fill();
31 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);
32 //填充矩形
33 cnt.fillStyle="#004DFF"; //填充颜色
34 cnt.fillRect(140,20,30,50);
35 //画其他图形时一定的记得开始和闭合
36 cnt.beginPath();
37 //如何话圆形 arc函数
38 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
39 cnt.fillStyle="#FF0000";
40 cnt.arc(220,40,20,0,360,false); cnt.closePath();
41 cnt.stroke();
42 cnt.fill();
43 //画图像
44 var img_1=new Image();
45 img_1.src="10.jpg";
46 //加载完毕后再绘图....
47 img_1.onload=function(){
48 //(object,x,y,weidth,height)
49 cnt.drawImage(img_1,20,100,155,220);
50 }
51 </script>
52 </body>
53 </html>效果图：
有关Javascript写字体：
代码：
1 <html>
2 <head》</head>
3 <body>
4 <!--用canvas画布画一个矩形-->
5 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
6 <script type="text/javascript">
7 <!--得到画布-->
8 var canvas_1=document.getElementById("gxjun");
9 var cnt=canvas_1.getContext("2d");
10 //alert(cxt);
11 //moveto设置点位置
12 cnt.moveTo(20,20);
13 //有上面那个点为起点 设置第二个点位置
14 cnt.lineTo(20,90);
15 //将两个点连接起来
16 cnt.stroke();
17 //画出一个填充的三角形.-->路径
18 //开始新路径
19 cnt.beginPath();
20 cnt.moveTo(40,20);
21 cnt.lineTo(40,90);
22 cnt.lineTo(80,90);
23 //闭合路径，把最后这个点和第一点MoveTO()闭合
24 cnt.closePath();
25 //cnt.stroke();
26 //填充矩形 由于三角形闭合了，所以填充了三角形
27 //注意的一点是： 只有矩形才会不用路径闭合
28 cnt.fill();
29 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height);
30 //填充矩形
31 cnt.fillStyle="#004DFF"; //填充颜色
32 cnt.fillRect(140,20,30,50);
33 //画其他图形时一定的记得开始和闭合
34 cnt.beginPath();
35 //如何话圆形 arc函数
36 //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
37 cnt.fillStyle="#FF0000";
38 cnt.arc(220,40,20,0,360,false); cnt.closePath();
39 cnt.stroke();
40 cnt.fill();
41 //画图像
42 var img_1=new Image();
43 img_1.src="10.jpg";
44 //加载完毕后再绘图....
45 img_1.onload=function(){
46 //(object,x,y,weidth,height)
47 cnt.drawImage(img_1,20,100,155,220);
48 //在画布上写字
49 //设置字体的大小
50 var text="火影忍着之战国时代"
51 cnt.fillStyle="#0000FF";
52 cnt.font="30px 华文彩云";
53 cnt.fillText(text,200,200);
54 }
55 </script>
56 </body>
57 </html>>效果图：
1.画坦克的思路： 以坦克的左上角为参照点，然后画出坦克的其它部分。这样的 好处是当左上角的坐标变换，坦克就会整体移动。（画出图片时比较耗费cpu）
画出第一辆坦克..
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--meta charset="utf-16"/-->
5 </head>
6 <body>
7 <h1>经典坦克大战</h1>
8 <!--画布即作为坦克大战的地图-->
9 <canvas id="tankMap" width="600px" height="500px"
10 style="background-color: black; border: 2px solid red"></canvas>
11 <script type="text/javascript">
12 //得到画布
13 var canvas1=document.getElementById("tankMap");
14 //得到绘图上下文（即画笔）
15 var cxt=canvas1.getContext("2d");
16 //我的坦克hero
17 var herox=130;
18 var heroy=30;
19 // alert(cxt);
20 //设置颜色
21 cxt.fillStyle="#DED284";
22 //先画出左面的矩形
23 cxt.fillRect(herox,heroy,5,30);
24 //平移画出右边的矩形
25 cxt.fillRect(herox+15,heroy,5,30);
26 //画出中间矩形
27 cxt.fillRect(herox +6,heroy + 5,8,20);
28 //画出坦克的盖子
29 cxt.fillStyle="#FFD972";
30 cxt.arc(herox +10,heroy +15,4,0,360,true);
31 cxt.fill();
32 //画出炮筒（直线）
33 cxt.strokeStyle="#FFD972";
34 cxt.lineWidth=1.5;
35 cxt.beginPath();
36 cxt.moveTo(herox +10,heroy +15);
37 cxt.lineTo(herox +10,heroy);
38 cxt.closePath();
39 cxt.stroke();
40 cxt.fillStyle="#FFD972";
41 cxt.arc(herox +10,heroy,1.5,0,360,true);
42 cxt.fill();
43 </script>
44 </body>
45 </html>效果图：
附加一个小功能，让小球开始移动....
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 //meta charset="utf-8";
5 </head>
6 <!--当按键后去调用test函数-->
7 <body onkeydown="test()">
8 <h1>小球上下左右移动</h1>
9 <canvas id="test" width="400px" height="300px"
10 style="background-color:black; border: 2px solid blue">
11 </canvas>
12 <script type="text/javascript">
13 //得到画布
14 var canvas1=document.getElementById("test");
15 //得到绘图上下文（画笔）
16 var cxt= canvas1.getContext("2d");
17 //画出红色圆球
18 var ballx=30;
19 var bally=30;
20 function drawball()
21 {
22 cxt.beginPath();
23 cxt.fillStyle="#FF0000";
24 cxt.arc(ballx,bally,10,0,360,false);
25 cxt.closePath();
26 cxt.fill();
27 }
28 //alert(cxt);
29 //现在我摁下wsaf依次表示上下左右-
30 //说明：当我们按下一个建，实际上触发一个onkeydowm
31 drawball();
32 function test(){
33 //我怎么知道，玩家按下的是什么键
34 //说明当按下键后，事件---》event对象----》事件处理函数（）
35 var code=event.keyCode;
36 //键盘上的每一个字母对应的是ascii
37 switch(code)
38 {
39 case 87: bally--; break;
40 case 68: ballx++; break;
41 case 83: bally++; break;
42 case 65: ballx--; break;
43 }
44 cxt.clearRect(0,0,400,300);
45 drawball();
46 }
47 </script>
48 </body>
49 </html>效果如图：
好了，又小球衍生出第一辆坦克....
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--meta charset="utf-16"/-->
5 </head>
6 <body onkeydown="getCommand()">
7 <h1>经典坦克大战</h1>
8 <!--画布即作为坦克大战的地图-->
9 <canvas id="tankMap" width="600px" height="500px"
10 style="background-color: black; border: 2px solid red"></canvas>
11 <script type="text/javascript">
12 //定义一个HEro类
13 // x,y表示坐标 direct表示方向
14 function Hero(x,y,direct){
15 this.x=x;
16 this.y=y;
17 this.direct=direct;
18 this.speed=1;
19 //上移
20 this.moveUp=function() {
21 this.y-=this.speed;
22 this.direct=0;
23 }
24 this.moveDown=function(){
25 this.y+=this.speed;
26 this.direct=2;
27 }
28 this.moveRight=function(){
29 this.x+=this.speed;
30 this.direct=1;
31 }
32 this.moveLeft=function() {
33 this.x-=this.speed;
34 this.direct=3; //改变方向
35 }
36 }
37 //得到画布
38 var canvas1=document.getElementById("tankMap");
39 //得到绘图上下文（即画笔）
40 var cxt=canvas1.getContext("2d");
41 //我的坦克hero
42 // var herox=130;
43 //var heroy=30;
44 // alert(cxt);
45 //坦克的方向:0表示向上,1表示向右,2表示下,3表示左
46 var hero = new Hero(40,40,0);
47 //把绘制坦克封装成为一个函数
48 function drawTank(tank){
49
50 switch(tank.direct)
51 {
52 case 0: //塔克
53 case 2:
54 //设置颜色
55 cxt.fillStyle="#BA9658" ;
56 //先画出左面的矩形
57 cxt.fillRect(tank.x,tank.y,5,30);
58 //平移画出右边的矩形
59 cxt.fillRect(tank.x+15,tank.y,5,30);
60 //画出中间矩形
61 cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
62 //画出坦克的盖子
63 cxt.fillStyle="#FEF26E" ;
64 cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
65 cxt.fill();
66 //画出炮筒（直线）
67 cxt.strokeStyle="#FEF26E" ;
68 cxt.lineWidth=1.5;
69 cxt.beginPath();
70 cxt.moveTo(tank.x +10,tank.y +15);
71 var cnt=0;
72 if(tank.direct==0) cnt=0;
73 else if(tank.direct==2)cnt=30;
74 cxt.lineTo(tank.x +10,tank.y+cnt);
75 break;
76 case 1:
77 case 3:
78 //设置颜色
79 cxt.fillStyle="#BA9658" ;
80 //先画出左面的矩形
81 cxt.fillRect(tank.x,tank.y,30,5);
82 //平移画出右边的矩形
83 cxt.fillRect(tank.x,tank.y+15,30,5);
84 //画出中间矩形
85 cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
86 //画出坦克的盖子
87 cxt.fillStyle="#FEF26E" ;
88 cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
89 cxt.fill();
90 //画出炮筒（直线）
91 cxt.strokeStyle="#FEF26E" ;
92 cxt.lineWidth=1.5;
93 cxt.beginPath();
94 cxt.moveTo(tank.x +15,tank.y +10);
95 if(tank.direct==1)
96 cxt.lineTo(tank.x +30,tank.y+10);
97 else if(tank.direct==3)
98 cxt.lineTo(tank.x,tank.y+10);
99 // cxt.fillStyle="#FEF26E" ;
100 //cxt.beginPath();
101 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
102 //cxt.closePath();
103 //cxt.fill();
104
105
106 break;
107
108 }
109 cxt.closePath();
110 cxt.stroke();
111
112
113 }
114 drawTank(hero);
115 //这是一个接收按键的函数
116 function getCommand(){
117 //alert("汗啊");
118 var code = event.keyCode;
119 // alert(code);
120 switch(code)
121 {
122 // 向上
123 case 38:
124 case 87: hero.moveUp(); break;
125 //向左
126 case 37:
127 case 65: hero.moveLeft(); break;
128 //向下
129 case 40:
130 case 83: hero.moveDown(); break;
131 //向右
132 case 39:
133 case 68: hero.moveRight(); break;
134 }
135 cxt.clearRect(0,0,600,500);
136 drawTank(hero);
137 }
138 </script>
139 </body>
140 </html>效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件：
其实内容没有任何变化，就只是将其拆分为两部分只是为了看起来方便一些》。。。
1.tankgame2.js文件
1 // x,y表示坐标 direct表示方向
2 function Hero(x,y,direct){
3 this.x=x;
4 this.y=y;
5 this.direct=direct;
6 this.speed=1;
7 //上移
8 this.moveUp=function() {
9 this.y-=this.speed;
10 this.direct=0;
11 }
12 this.moveDown=function(){
13 this.y+=this.speed;
14 this.direct=2;
15 }
16 this.moveRight=function(){
17 this.x+=this.speed;
18 this.direct=1;
19 }
20 this.moveLeft=function() {
21 this.x-=this.speed;
22 this.direct=3; //改变方向
23 }
24 }
25
26 //把绘制坦克封装成为一个函数
27 function drawTank(tank){
28
29 switch(tank.direct)
30 {
31 case 0: //塔克
32 case 2:
33 //设置颜色
34 cxt.fillStyle="#BA9658" ;
35 //先画出左面的矩形
36 cxt.fillRect(tank.x,tank.y,5,30);
37 //平移画出右边的矩形
38 cxt.fillRect(tank.x+15,tank.y,5,30);
39 //画出中间矩形
40 cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
41 //画出坦克的盖子
42 cxt.fillStyle="#FEF26E" ;
43 cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
44 cxt.fill();
45 //画出炮筒（直线）
46 cxt.strokeStyle="#FEF26E" ;
47 cxt.lineWidth=1.5;
48 cxt.beginPath();
49 cxt.moveTo(tank.x +10,tank.y +15);
50 var cnt=0;
51 if(tank.direct==0) cnt=0;
52 else if(tank.direct==2)cnt=30;
53 cxt.lineTo(tank.x +10,tank.y+cnt);
54 break;
55 case 1:
56 case 3:
57 //设置颜色
58 cxt.fillStyle="#BA9658" ;
59 //先画出左面的矩形
60 cxt.fillRect(tank.x,tank.y,30,5);
61 //平移画出右边的矩形
62 cxt.fillRect(tank.x,tank.y+15,30,5);
63 //画出中间矩形
64 cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
65 //画出坦克的盖子
66 cxt.fillStyle="#FEF26E" ;
67 cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
68 cxt.fill();
69 //画出炮筒（直线）
70 cxt.strokeStyle="#FEF26E" ;
71 cxt.lineWidth=1.5;
72 cxt.beginPath();
73 cxt.moveTo(tank.x +15,tank.y +10);
74 if(tank.direct==1)
75 cxt.lineTo(tank.x +30,tank.y+10);
76 else if(tank.direct==3)
77 cxt.lineTo(tank.x,tank.y+10);
78 // cxt.fillStyle="#FEF26E" ;
79 //cxt.beginPath();
80 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
81 //cxt.closePath();
82 //cxt.fill();
83
84
85 break;
86
87 }
88 cxt.closePath();
89 cxt.stroke();
90
91
92 } 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>效果图还是一样的
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android实现简单底部导航栏 Android仿微信滑动切换效果
- Android中Handler与Message的简单实例
- Android 实现通知消息水平播放、无限循环效果
- 详解xamarin Android 实现ListView万能适配器
- android 设置wallpaper的操作方法
- R语言作图不显示中文解决办法，如何使用中文字体
- Android OKHTTP的单例和再封装的实例
- Android 自定义返回按钮的实例详解
- Android在layout xml中使用ViewStub完成动态加载问题
- Android编程中Intent实现页面跳转功能详解
- Android编程之桌面小部件AppWidgetProvider用法示例
- Android编程实现悬浮窗获取并显示当前内存使用量的方法
- Android ListView中动态添加RaidoButton的实例详解
- Android沉浸式状态栏设计的实例代码
- Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法