首页 > 代码库 > 自己动手打造html5星际迷航!

自己动手打造html5星际迷航!

<style></style>

学习html5的canvas第三天,觉得还没过瘾,转眼就忘,于是趁着有空,准备弄个小游戏来玩!游戏应该需要注意性能,还有一些逻辑需要斟酌,我想还需要用户可修改性,也就是用户配置。好,开始我们简单但有趣的旅程吧——

想先看效果的,先跳转试玩一下吧!

第一步,当然需要一张画布

1 <canvas id="canvas" width="300" height="400">你的浏览器不支持Canvas</canvas>

JavaScript的总体结构如下:

var定义一些变量planeMoveTimer飞机移动监听/计时器attackEnemyTimer发射炮弹计时器onkeydown监听onkeyup监听drawPlane画飞机drawEnemy画敌人

首先预定义一些变量

 1 var _keyA = _keyD = _keyW = _keyS = 0,  // 存储按键状态 2  3     step = 8,                          // 飞机移动速率 4     w = 34, h = 44,                  // 飞机实际大小 5     planeX = 133, planeY = 356,      // 飞机目前位置 6     planeSrc = "http://www.mamicode.com/feiji.png",          // 飞机素材位置 7     imgW = 177, imgH = 220,          // 飞机源图尺寸 8  9     cw = 300, ch = 400,  // 画布大小10     canvas = document.getElementById("canvas"),11     ctx = canvas.getContext("2d");

本游戏只用到一个外部资源,就是那张图片,获取地址请访问本文底部给出的项目GitHub位置链接。跳转

先看画图的两个方法

 1 function drawPlane(x, y) { 2     var img = new Image(); 3     img.src = http://www.mamicode.com/planeSrc;  // 飞机源图地址 4     img.onload = function() { 5         ctx.drawImage(img, 0, 0, imgW, imgH, planeX, planeY, w, h); 6     } 7 } 8 function drawEnemy(){ 9     for(var a=0;a<cw;a+=10) {10         for(var b=0;b<ch-300;b+=10) {11             ctx.beginPath();12             ctx.fillStyle = "orange";13             ctx.strokeStyle = "black";14             ctx.strokeRect(a, b, 10 ,10);15             ctx.fillRect(a, b, 10, 10);16             ctx.closePath();17         }18     }19 }

 飞机的图片一定要在onload()方法里才能把飞机画出来,目前的敌人还是一堆橙色的不会动的砖头,通过遍历在画布的顶端把它们画出来。

接着,看两个键盘事件:

 1 window.document.onkeydown = function(evt){ 2     evt = (evt) ? evt : window.event; 3     switch(evt.keyCode) { 4         case 65:  // A 5             _keyA = 1; 6             break; 7         case 68:  // D 8             _keyD = 1; 9             break;10         case 87:  // W11             _keyW = 1;12             break;13         case 83:  // S14             _keyS = 1;15             break;16     }17 }18 window.document.onkeyup = function(evt){19     evt = (evt) ? evt : window.event;20     switch(evt.keyCode) {21         case 65:  // A22             _keyA = 0;23             break;24         case 68:  // D25             _keyD = 0;26             break;27         case 87:  // W28             _keyW = 0;29             break;30         case 83:  // S31             _keyS = 0;32             break;33     }34 }

至于为什么要在两个事件里设置变量_keyA、_keyD、_keyW、_keyS,而不是直接触发画图事件,原因是——同时长按两个键时,无法同时触发事件,先按者只触发一次,只有后按者在按着键的时候才能一直触发事件,简单点来说,如果我想要向左上角移动,同时按下A和W,假设A比W慢了一点点,即时很微小,那么飞机的移动路径是先上移一步然后一直向左移动,这显然不是我想要的,我用4个变量来存储按键的状态,按下键的时候,设置其状态为1,在按键起来的时候,设置其状态为0,然后我们用计时器来不断地读这些键的状态并及时更新飞机的状态。

飞机移动计时器如下:

 1 var planeMoveTimer = window.setInterval(function(){ 2     if(_keyA||_keyD||_keyW||_keyS){ 3         ctx.clearRect(planeX, planeY, w, h); 4         _keyA && (planeX-=step); 5         _keyD && (planeX+=step); 6         _keyW && (planeY-=step); 7         _keyS && (planeY+=step); 8         planeX>=0 || (planeX=0); 9         planeX<=(cw-w) || (planeX=cw-w);10         planeY>=0 || (planeY=0);11         planeY<=(ch-h) || (planeY=ch-h);12         drawPlane(planeX, planeY);13     }14 }, 10);

ctx.clearRect()用来清除原来位置的飞机,为绘制飞机的下一状态做准备,但是有一个很大的问题,它是直接清除整块的,要是游戏有背景,有交叠,那不是要把这些不是飞机的东西也一并清空了?恕我愚昧,暂时不考虑这个问题。

通过判断按键状态,每次移动的步距为预先设置的step,并做好边界处理。

然后是攻击计时器:

 1 var attackEnemyTimer = window.setInterval(function(){ 2     var cannonX = planeX+Math.floor(w/2);  // 炮口X轴位置 3     var cannonY = planeY;  // 炮口Y轴位置 4     var tmpTimer = window.setInterval(function(){  // 每颗炮弹的移动计时器 5         ctx.clearRect(cannonX-1, cannonY-3, 2, 3); 6         cannonY -= 3;  // 炮弹步距 7         if(cannonY<0){ 8             // 炮弹的贯透效果 9             ctx.beginPath();10             ctx.moveTo(cannonX, 100);  // 100为enemy的最低位置11             ctx.strokeStyle = "white";12             ctx.lineWidth = "4";  // 模拟不规则毁坏,暂时尚未没实现13             ctx.lineTo(cannonX, 0);14             ctx.stroke();15             ctx.closePath();16             window.clearInterval(tmpTimer);  // 清除该炮弹的计时器17         }18         ctx.clearRect(cannonX-1, cannonY-3, 2, 3);19         ctx.beginPath();20         ctx.fillStyle="red";21         ctx.fillRect(cannonX-1, cannonY-3, 2, 3);  // 炮弹大小:2X322         ctx.closePath();23     }, 0);24 }, 500);

每0.5s发射一颗炮弹,每颗炮弹又单独设置一个计时器,以便控制,炮弹的移动我也是采用先擦后画的方式,由于炮弹移动也有步距,所谓炮弹贯透效果就是直接画一条颜色跟背景色一样的直线而已。试着修改炮弹步距可以调节炮弹的移动速度,也可以调节炮弹的尺寸。

最后一步了,还差点什么,一开始就要画好敌人和飞机啦!

1 drawPlane();2 drawEnemy();

大功告成!还想继续优化增加可玩性的,但实在是没时间弄了,还有很多其他的东西要学,所以这个游戏就先这样啦!是不是很简单!哈哈,囧了吧,标题太诱惑人,没办法!

其他:

在线试玩:http://xzh-loop.github.io/Manji/lab/html5game/Plane.html

访问这个项目的GitHub位置:https://github.com/xzh-loop/Manji/tree/gh-pages/lab/html5game

访问我的GitHub Pages:http://xzh-loop.github.io/

自己动手打造html5星际迷航!