制作一款打飞机游戏教程5:添加子弹

在上一篇中,我们设计了一个原型来测试飞船的移动和射击感觉。

我们注意到飞船在左右转向时的动画响应不一致。通过调整动画的中心值和范围,我们解决了这个问题,使得飞船在左右转向时的动画响应更加对称和一致。

为了简化代码并提高可读性,我们使用了三元运算符来替换一些冗长的if-else语句。虽然这次优化节省的不多,但它使代码更加紧凑和易于维护。

接下来,我们开始实现射击功能。首先,我们设计了一个简单的子弹精灵,并编写了代码来控制子弹的发射和移动。

在这里插入图片描述

我们通过在按下射击键时创建一个新的子弹对象,并将其添加到子弹数组中来实现子弹的发射。然后,在更新函数中遍历子弹数组,更新每个子弹的位置。

为了避免子弹发射过快导致的视觉混乱,我们实现了一个射击频率控制机制。通过设置子弹的发射间隔,我们可以控制子弹的发射速度,使其看起来更加合理。

为了增强游戏的视觉效果和玩家反馈,我们计划添加一些特效,如枪口火焰和爆炸效果。

我们设计了一个简单的枪口火焰动画,并将其与射击动作同步播放。这样,当玩家按下射击键时,不仅能看到子弹射出,还能看到枪口冒出的火焰,增强了射击的真实感。

pico-8 cartridge // http://www.pico-8.com
version 41
__lua__
-- t: make basic movement feel nice
--    ❎: fixed cobblestoning
--    ❎: what is a good movement speed
--    t: do banking

-- t: make shooting feel nice!

-- x: normalized diagonals

butarr={1,2,0,3,5,6,3,4,8,7,4,0,1,2,0}

dirx={-1,1, 0,0, -0.7, 0.7,0.7,-0.7}
diry={ 0,0,-1,1, -0.7,-0.7,0.7,0.7}

butarr[0]=0

shiparr={1,3,5,7,9}

shipspr=0

shots={}
shotwait=0

function _init()
 px,py=64,64
 spd=1.4
 lastdir=0
 
 cls(0)
end

function _draw()
 cls(12)
  
  
  
 spr(shiparr[flr(shipspr*2.4+3.5)],px,py,2,2)
 --pset(px,py,8)
 
 for s in all(shots) do
  spr(11,s.x,s.y)
 end
 
 local btnv=btn()&0b1111
 print(btn(),5,5,7)
 print(btnv,5,11,7)
 print(butarr[btnv],5,17,7)
 print(shotwait,5,23,7)
end

function _update60()
 local dir=butarr[btn()&0b1111]
 
 if lastdir!=dir and dir>=5 then
  --anti-cobblestone
  px=flr(px)+0.5
  py=flr(py)+0.5
 end
 
 local dshipspr=0
 
 if dir>0 then
  px+=dirx[dir]*spd
  py+=diry[dir]*spd
  dshipspr=mysgn(dirx[dir])
 end
  
 shipspr+=mysgn(dshipspr-shipspr)*0.15
 shipspr=mid(-1,shipspr,1)
 
 lastdir=dir
 
 if shotwait>0 then
  shotwait-=1
 end
 
 if btn(❎) then
  if shotwait<=0 then
   add(shots,{
    x=px,
    y=py,
    sx=0,
    sy=-1
   })
   shotwait=7
  end
 end
 
 doshots()
end

function doshots()
 for s in all(shots) do
  s.x+=s.sx
  s.y+=s.sy
 end
end

function mysgn(v) 
 return v==0 and 0 or sgn(v)
end
__gfx__
00000000000000011000000000000001100000000000000110000000000000011000000000000001100000000990000000000000000000000000000000000000
00000000000000167100000000000016710000000000001661000000000000167100000000000016710000009779000000000000000000000000000000000000
00700700000000111d100000000000111d1000000000011111100000000001d111000000000001d1110000009779000000000000000000000000000000000000
00077000000001ccc1100000000001ccc1100000000001cccc1000000000011ccc1000000000011ccc1000009aa9000000000000000000000000000000000000
0007700000001c77cc11000000001c77cc11000000001c77ccc10000000011c77cc10000000011c77cc100009aa9000000000000000000000000000000000000
0070070000001c7c1c11000000001c7c1c11000000001c7cc1c10000000011c7c1c10000000011c7c1c100000990000000000000000000000000000000000000
0000000000001c111c11100000011c111c11100000111c1111c11100000111c111c11000000111c111c100000000000000000000000000000000000000000000
0000000000001c111c17100000011c111c17100000171c1111c17100000171c111c11000000171c111c100000000000000000000000000000000000000000000
0000000000011cc17116100000161cc1171610000016117117116100000161711cc16100000161171cc110000000000000000000000000000000000000000000
000000000001d1c711d6d1000016d1c77116d10001d6d117711d6d10001d61177c1d6100001d6d117c1d10000000000000000000000000000000000000000000
00000000001ddd111d6d7d1001dddd1111dd6710176d6d1111d6d6710176dd1111dddd1001d7d6d111ddd1000000000000000000000000000000000000000000
00000000001dd6ddd6d66d1001dd66dddd6d66101666d6dddd6d66610166d6dddd66dd1001d66d6ddd6dd1000000000000000000000000000000000000000000
00000000001d676676d6dd1001d6676676d6dd101dd6d676676d6dd101dd6d6766766d1001dd6d676676d1000000000000000000000000000000000000000000
00000000000176d167d1110000117dd1171111000111171661711110001111711dd7110000111d761d6710000000000000000000000000000000000000000000
000000000000151155d110000001655155d11000000161511516100000011d551556100000011d55115100000000000000000000000000000000000000000000
00000000000001111111000000001111111100000000111111110000000011111111000000001111111000000000000000000000000000000000000000000000
好的,下面是一个简单的基于HTML5 Canvas的打飞机游戏制作教程: 1. 创建HTML文件,并在文件头部引入Canvas标签和JavaScript文件: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打飞机游戏</title> <script src="game.js"></script> </head> <body> <canvas id="gameCanvas" width="480" height="640"></canvas> </body> </html> ``` 2. 在JavaScript文件中获取Canvas对象和上下文,并绘制游戏场景: ```javascript var canvas = document.getElementById("gameCanvas"); var context = canvas.getContext("2d"); // 绘制背景 context.fillStyle = "#000000"; context.fillRect(0, 0, canvas.width, canvas.height); // 绘制飞机 context.fillStyle = "#ffffff"; context.fillRect(220, 580, 40, 40); ``` 3. 添加游戏循环,在游戏循环中更新游戏状态并重新绘制游戏场景: ```javascript var playerX = 220; var playerY = 580; function gameLoop() { // 清空画布 context.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景 context.fillStyle = "#000000"; context.fillRect(0, 0, canvas.width, canvas.height); // 绘制飞机 context.fillStyle = "#ffffff"; context.fillRect(playerX, playerY, 40, 40); // 更新游戏状态 // 重新绘制游戏场景 requestAnimationFrame(gameLoop); } gameLoop(); ``` 4. 添加键盘事件监听器,使玩家能够控制飞机移动: ```javascript document.addEventListener("keydown", function(event) { switch(event.keyCode) { case 37: // 左箭头 playerX -= 5; break; case 39: // 右箭头 playerX += 5; break; } }); ``` 5. 添加敌机和子弹,使游戏更具挑战性: ```javascript var bullets = []; var enemies = []; function spawnEnemy() { var enemyX = Math.random() * (canvas.width - 40); var enemyY = 0; enemies.push({x: enemyX, y: enemyY}); } function spawnBullet() { var bulletX = playerX + 20; var bulletY = playerY - 10; bullets.push({x: bulletX, y: bulletY}); } function gameLoop() { // 清空画布 context.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景 context.fillStyle = "#000000"; context.fillRect(0, 0, canvas.width, canvas.height); // 绘制飞机 context.fillStyle = "#ffffff"; context.fillRect(playerX, playerY, 40, 40); // 更新游戏状态 for(var i = 0; i < bullets.length; i++) { bullets[i].y -= 10; context.fillStyle = "#ff0000"; context.fillRect(bullets[i].x, bullets[i].y, 4, 10); } for(var i = 0; i < enemies.length; i++) { enemies[i].y += 5; context.fillStyle = "#00ff00"; context.fillRect(enemies[i].x, enemies[i].y, 40, 40); } // 重新绘制游戏场景 requestAnimationFrame(gameLoop); } // 每隔一秒钟生成一个敌机 setInterval(spawnEnemy, 1000); // 按空格键发射子弹 document.addEventListener("keydown", function(event) { switch(event.keyCode) { case 32: // 空格键 spawnBullet(); break; } }); ``` 以上代码只是一个简单的教程示例,你可以根据自己的需求和想象,添加更多的游戏元素和特效,制作更有趣、更具挑战性的打飞机游戏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值