学习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,有 ...
随机推荐
- Lambda表达式之Python
一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称,而用def创建的方法是有名称的.如下: """命名的foo函数&q ...
- [SAP ABAP开发技术总结]Function远程、同步、异步调用
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]面向对象OO
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Codeforces Round #382 (Div. 2) C. Tennis Championship 斐波那契
C. Tennis Championship time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- GitHub上不错的Android开源项目（三）
收集相关系列资料,自己用作参考,练习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) GitHub上不错的Android开源项目(一):http://ww ...
- C++中的一些定义
PS: 这篇博客用来记录一些一般的C++书中草草掠过的一些概念. 或者一些不太容易理解的概念的详细解释. 欢迎新手进入,欢迎高手指正! Orz . 引用: 为对象起了另外一个名字, 引用类型引用(re ...
- LTE Module User Documentation（翻译3）——仿真输出
LTE用户文档 (如有不当的地方,欢迎指正!) 6 仿真输出 ns-3 LTE 模型当前支持输出 PHY, MAC, RLC 和 PDCP 级别的 Key Performance Indicators ...
- For Exam (Java常用设计模式) 介绍
一 创建型模式 工厂模式(Factory): 定义一个用以创建对象的接口 抽象工厂模式(Abstract Factory): 提供一个创建一系列相关或相互依赖对象的接口 单例模式(Singleton) ...
- js获取select字段值的方法
var index = obj.selectedIndex; // 选中索引 var value = obj.options[index].value; // 选中值 var schoolName = ...
- WCF入门教程（vs2010）
这几天挺别人提起WCF,鄙人之前只知道WPF,对WCF这个东东不甚了解,经过查阅网上的资料略有所得,和大家交流一下. 首先WCF是什么? Windows Communication Foundatio ...