学习HTML5之塔克大战（详细记录）
学了一些HTML5的一些基本知识，开始学习制作......
介绍一些基本知识： 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>
效果图：
有关Javascript写字体：
代码：
<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(,);
//有上面那个点为起点 设置第二个点位置
cnt.lineTo(,);
//将两个点连接起来
cnt.stroke();
//画出一个填充的三角形.-->路径
//开始新路径
cnt.beginPath();
cnt.moveTo(,);
cnt.lineTo(,);
cnt.lineTo(,);
//闭合路径，把最后这个点和第一点MoveTO()闭合
cnt.closePath();
//cnt.stroke();
//填充矩形 由于三角形闭合了，所以填充了三角形
//注意的一点是： 只有矩形才会不用路径闭合
cnt.fill();
cnt.strokeRect(,,,); //strokeRect(x,y,weidth,height);
//填充矩形
cnt.fillStyle="#004DFF"; //填充颜色
cnt.fillRect(,,,);
//画其他图形时一定的记得开始和闭合
cnt.beginPath();
//如何话圆形 arc函数
//这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
cnt.fillStyle="#FF0000";
cnt.arc(,,,,,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,,,,);
//在画布上写字
//设置字体的大小
var text="火影忍着之战国时代"
cnt.fillStyle="#0000FF";
cnt.font="30px 华文彩云";
cnt.fillText(text,,);
}
</script>
</body>
</html>>
效果图：
1.画坦克的思路：
以坦克的左上角为参照点，然后画出坦克的其它部分。这样的
好处是当左上角的坐标变换，坦克就会整体移动。（画出图片时比较耗费cpu）
画出第一辆坦克..
代码：
<!DOCTYPE html>
<html>
<head>
<!--meta charset="utf-16"/-->
</head>
<body>
<h1>经典坦克大战</h1>
<!--画布即作为坦克大战的地图-->
<canvas id="tankMap" width="600px" height="500px"
style="background-color: black; border: 2px solid red"></canvas>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文（即画笔）
var cxt=canvas1.getContext("2d");
//我的坦克hero
var herox=130;
var heroy=30;
// alert(cxt);
//设置颜色
cxt.fillStyle="#DED284";
//先画出左面的矩形
cxt.fillRect(herox,heroy,5,30);
//平移画出右边的矩形
cxt.fillRect(herox+15,heroy,5,30);
//画出中间矩形
cxt.fillRect(herox +6,heroy + 5,8,20);
//画出坦克的盖子
cxt.fillStyle="#FFD972";
cxt.arc(herox +10,heroy +15,4,0,360,true);
cxt.fill();
//画出炮筒（直线）
cxt.strokeStyle="#FFD972";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(herox +10,heroy +15);
cxt.lineTo(herox +10,heroy);
cxt.closePath();
cxt.stroke();
cxt.fillStyle="#FFD972";
cxt.arc(herox +10,heroy,1.5,0,360,true);
cxt.fill();
</script>
</body>
</html>
效果图：
附加一个小功能，让小球开始移动....
代码：
<!DOCTYPE html>
<html>
<head>
//meta charset="utf-8";
</head>
<!--当按键后去调用test函数-->
<body onkeydown="test()">
<h1>小球上下左右移动</h1>
<canvas id="test" width="400px" height="300px"
style="background-color:black; border: 2px solid blue">
</canvas>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("test");
//得到绘图上下文（画笔）
var cxt= canvas1.getContext("2d");
//画出红色圆球
var ballx=30;
var bally=30;
function drawball()
{
cxt.beginPath();
cxt.fillStyle="#FF0000";
cxt.arc(ballx,bally,10,0,360,false);
cxt.closePath();
cxt.fill();
}
//alert(cxt);
//现在我摁下wsaf依次表示上下左右-
//说明：当我们按下一个建，实际上触发一个onkeydowm
drawball();
function test(){
//我怎么知道，玩家按下的是什么键
//说明当按下键后，事件---》event对象----》事件处理函数（）
var code=event.keyCode;
//键盘上的每一个字母对应的是ascii
switch(code)
{
case 87: bally--; break;
case 68: ballx++; break;
case 83: bally++; break;
case 65: ballx--; break;
}
cxt.clearRect(0,0,400,300);
drawball();
}
</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>
效果图：
当然想韩老师所说的我们可以将其分为两个文件。一个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>
效果图还是一样的
学习HTML5之塔克大战（详细记录）的更多相关文章
- 大熊君学习html5系列之------History API（SPA单页应用的必备）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 学习HTML5必读之《HTML5设计原理》
引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HT ...
- 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- Maven 搭建SpringMvc+Spring+Mybatis详细记录
总觉得,看比人写的总是那么好,每次搭建框架时都会找博客,找教程来跟着一步一步走,虽然很快搭建成功了,但是经常情况是我并不知道我干了什么,也不记得具体步骤,到底为什么要这么做,今天我详细记录了一下自己搭 ...
- 学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...
- 1 win10双系统安装ubuntu16.04和18.04（问题详细记录）
我从来不想在琐事上花功夫.就拿装系统来说,我感觉拿过来一个完全陌生的项目源码,看起来,都比装系统爽.我属于典型的逻辑思考男.喜欢畅游程序的海洋. 一直windows跑深度学习和tensorflow,有 ...
随机推荐
- 命令行运行R语言脚本(代码)
1 Windows: 键入 cd C:\Program Files\R\R-3.2.0\bin 工作目录切换到R的核心程序目录 键入 R BATCH F:\Test.R 或 Rscript F:\ ...
- [SAP ABAP开发技术总结]选择屏幕——PARAMETERS
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 苹果原生NSURLSession的上传和下载
关于NSURLSession的上传和下载 在iOS7.0后,苹果公司新推出了一个NSURLSession来代替NSURLConnection.NSURLConnection默认是在 主线程执行的.而N ...
- Linux c 下使用getopt()函数
命令行参数解析函数 —— getopt() getopt()函数声明如下: #include <unistd.h> int getopt(int argc, char * const ar ...
- JS——ajax login test
1.新建一个webproject,我用的是myeclipse10,建立如下的LoginServlet.java文件 2.编写java文件 import java.io.IOException; imp ...
- ubuntu下配置hosts
由于Chrome浏览器访问问题,需要配置hosts. 在Ubuntu系统下,需要修改/etc/hosts文件,修改完之后要重启网络.具体过程如下:1.修改hostssudo vi /etc/hosts ...
- grep 简单使用
grep "关键字" file文件名 | tail -100|grep "关键字" --col grep的功能 grep从一个或多个文本文件中查 ...
- 【T-SQL系列】WITH ROLLUP、WITH CUBE、GROUPING语句的应用
CUBE 和 ROLLUP 之间的区别在于:CUBE 运算符生成的结果集是多维数据集.多维数据集是事实数据的扩展,事实数据即记录个别事件的数据.扩展建立在用户打算分析的列上.这些列被称为维.多维数据集 ...
- 让你快速搭建一个bootstrap页面
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- SAP 关于标准成本、计划成本、目标成本、实际成本
SAP 关于标准成本.计划成本.目标成本.实际成本 <A style="MARGIN-RIGHT: 10px" target=_blank data-ext="{v ...