成都web前端培训
成都达内金融街中心

18328393564

热门课程

成都web-前端小游戏坦克移动

  • 时间:2017-01-11 16:32
  • 发布:达内杨老师
  • 来源:达内

简单解释下-所谓webweb的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

今天成都达内web前端的老师来讲解下坦克小游戏的基础,以及代码

1.移动基础——keydown事件

keydown这一键盘事件的触发条件为按下键盘上的任意键,如果按住不放,则会重发触发。

示例:

window.onkeydown = function(){

alert("Merry Christmas!");

};

此时载入页面之后,无论按下哪个键,都会弹出“Merry Christmas!”的弹窗。

2.了解键码和字符编码

①键码

在发生keydown和keyup事件时,event对象的keyCode(键码)属性会包含一个代码,与键盘上一个特定的键对应。对于数字字母字符集,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中的大小写不影响。

window.onkeydown = function(eve){

alert(eve.keyCode);

};

此时按键盘上的任意键,便可得到所按键对应的keyCode

②字符编码

发生keypress事件时,event对象的charCode属性会包含一个值,这个值就是按下的那个键所代表字符的ASCII编码,并且,同一个字母的大小写对应的字符编码也是不一样的。

要注意的是,keypress事件只有在按下字符键时才会触发,并不是所有的按键,像Ctrl, Alt之类的就不会触发该事件。

3.热身环节

①获取玩家的指令

我们先看看怎么获取到玩家的操控指令,这里我们写一段代码:

window.onkeydown = function(eve){

alert("所按键对应的键码是:" + eve.keyCode);

};   

大家运行一下就可以知道键盘上每一个按键所对应的键码是多少了,然后取自己需要的按键继续编写程序。这里需要的是方向键的上下左右,当然这个在网上可以查到,也非常方便。

我们运行了之后会发现,上下左右对应的键码分别是38, 40, 37, 39。考虑到有些玩家习惯于使用W A S D来操作,那我们把这几个键也做进去,这几个键对应的键码分别是87, 65, 83, 68。

OK,知道了上面这些东西之后我们就可以写出下面这段代码了:

window.onkeydown = function(eve){                                               

if(eve.keyCode == 38 || eve.keyCode == 87){

alert("上");

}else if(eve.keyCode == 40 || eve.keyCode == 83){

alert("下");

}else if(eve.keyCode == 37 || eve.keyCode == 65){

alert("左");

}else if(eve.keyCode == 39 || eve.keyCode == 68){

alert("右");

}

};

此时,根据玩家的操作便能弹出相应方向的文字。

鉴于上面if语句的条件分支数量略多,我们最好用switch语句改写一下上面的代码,这样可以提高性能,如下:

window.onkeydown = function(eve){                                               

switch(eve.keyCode){

case 38:

case 87:

alert("上");

break;

case 40:

case 83:

alert("下");

break;

case 37:

case 65:

alert("左");

break;

case 39:

case 68:

alert("右");

}

};

②封装画坦克的函数

前面我们写的画坦克的代码其实是面向过程的,我们将它拿过来改巴改巴做以封装:

function drawTank(x,y){

var myCanvas = document.getElementById('floor');

var cxt = myCanvas.getContext('2d');

cxt.fillStyle = "#542174";

cxt.fillRect(x,y,20,65);               

cxt.fillRect(x+70,y,20,65);               

cxt.fillRect(x+23,y+10,44,50);               

cxt.fillStyle = "#FCB827";

cxt.beginPath();

cxt.arc(x+45,y+35,16,0,2*Math.PI,false);       

cxt.closePath();

cxt.fill();

cxt.strokeStyle = "#FCB827";

cxt.lineWidth = "8.0";

cxt.moveTo(x+45,y+35);                       

cxt.lineTo(x+45,y-25);                       

cxt.stroke();

}

这个函数调用的时候传两个参数(x, y),分别代表坦克左上角的X坐标,Y坐标。

封装好之后,在任何地方只要一调用,便可以造出一个坦克了:

drawTank(150,200);       //以(150,200)的点为坦克的左上角(左边履带的左上角)造一个坦克

③了解clearRect()方法

有一个前面遗漏掉的知识点clearRect()方法,这个方法是做游戏的关键,用来清空指定矩形内的所有像素,传四个参数(x, y, width, height),前两个参数表示要清除的矩形的左上角坐标,后两个参数表示要清除的矩形的宽高。

比如我们先画一个矩形:

var myCanvas = document.getElementById('floor');

var cxt = myCanvas.getContext('2d');

cxt.fillStyle = "orange";

cxt.fillRect(50,50,300,80);

得到:

我们再加上下面这句代码运行一下:

cxt.clearRect(0,0,800,500);

此时会发现整个画布又空空如也了,因为我们把整个画布的像素都清除掉了。

4.热身完毕,正式开始

前面热身热了这么久,相信大家已经可以写出一个根据玩家的操作移动的坦克了。

我们尽量以面向对象的思想来写每一个过程,代码如下:

//封装一个获取绘图环境的函数

function getCxt(){

var myCanvas = document.getElementById('floor'),

myContext = myCanvas.getContext('2d');

return myContext;

}

//封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标

function drawTank(x,y){

var cxt = getCxt();

cxt.fillStyle = "#542174";

cxt.fillRect(x,y,20,65);               

cxt.fillRect(x+70,y,20,65);               

cxt.fillRect(x+23,y+10,44,50);               

cxt.fillStyle = "#FCB827";

cxt.beginPath();

cxt.arc(x+45,y+35,16,0,2*Math.PI,false);       

cxt.closePath();

cxt.fill();

cxt.strokeStyle = "#FCB827";

cxt.lineWidth = "8.0";

cxt.moveTo(x+45,y+35);                       

cxt.lineTo(x+45,y-25);                       

cxt.stroke();

}

//初始化一个对象myTank,用来存储一些属性和方法

var myTank = {};

myTank.x = 350;

myTank.y = 400;

myTank.step = 3;       //设置步长,步长越大那么坦克运动的速度越快

//先画一个坦克出来

drawTank(myTank.x,myTank.y);

//封装一个更新战场的函数

function updateFloor(){

var cxt = getCxt();

cxt.clearRect(0,0,800,500);           //更新之前先清除画布

drawTank(myTank.x,myTank.y);       //清除完之后重新造坦克,坦克要移动就必须实时地根据坐标重新来造

}

//设置一个间歇调用的函数,每隔100ms更新一下战场

setInterval(function(){

updateFloor();

},100);

//响应玩家的操作指令

window.onkeydown = function(eve){                                               

switch(eve.keyCode){

case 38:

case 87:

myTank.y -= myTank.step;   //Y坐标减小向上移动

break;

case 40:

case 83:

myTank.y += myTank.step;   //Y坐标增加向下移动

break;

case 37:

case 65:

myTank.x -= myTank.step;   //X坐标减小向左移动

break;

case 39:

case 68:

myTank.x += myTank.step;   //X坐标增加向右移动

}

}; 

以上的代码欢迎各位修改分享完善,更多交流。

上一篇:web前端-SVG的优势
下一篇:成都web-前端js灵活运用
选择城市和中心
贵州省

广西省

海南省