UDN-企业互联网技术人气社区

板块导航

浏览  : 1291
回复  : 20

[原生js] 用JS来写简易的射击游戏

[复制链接]
Reborn的头像 楼主
发表于 2018-1-17 17:20:17 | 显示全部楼层 |阅读模式
## 最近喜欢研究用JS来写小游戏了,用canvas来画内容JS控制

很简单的一个射击小游戏

>先定义游戏中元素
  1. //玩家
  2. px = 100
  3. py = 400
  4. pd = 30
  5. ps =5
  6. //目标
  7. el = []
  8. ed = 25
  9. es = 3
  10. //子弹
  11. sl = []
  12. sd = 4
  13. ss = 7
  14. cool = 0
  15. //分数
  16. score = 0
  17. //按键绑定
  18. u = {
  19.     actions: {},
  20.     keydowns: {},
  21.     registerAction: function(key, callback) {
  22.         this.actions[key] = callback
  23.     }
  24. }
  25. //简单物体碰撞检测
  26. function isCollide(x1, y1, s1, x2, y2, s2) {
  27.     if (x1 + s1 < x2 || y1 + s1 < y2 || x2 + s2 < x1 || y2 + s2 < y1) {
  28.         return false
  29.     }
  30.     return true
  31. }
  32. //重置
  33. function reset() {
  34.     px = 100
  35.     py = 300
  36.     sl = []
  37.     el = []
  38.     score = 0
  39. }
复制代码
>游戏主体
  1. window.onload = function() {

  2.     canvas = document.createElement('canvas')
  3.     canvas.with = 320
  4.     canvas.height = 480
  5.     ctx = canvas.getContext('2d')

  6.     document.body.appendChild(canvas)

  7.     window.addEventListener('keydown', function(e) {
  8.         u.keydowns[e.key] = true
  9.     })
  10.     window.addEventListener('keyup', function(e) {
  11.         u.keydowns[e.key] = false
  12.     })
  13.     setInterval(update, 1000 / 60)
  14.     setInterval(spawn, 2000)
  15.     setInterval(keyPush, 1000 / 60)
  16. }
复制代码





>随机生成目标的坐标
  1. function spawn() {
  2.     el.push({
  3.         x: Math.random() * canvas.width,
  4.         y: -ed
  5.     })
  6. }
复制代码


>更新元素
  1. function update() {
  2.                 //背景
  3.     ctx.fillStyle = 'black'
  4.     ctx.fillRect(0, 0, canvas.width, canvas.height)
  5.                 //玩家
  6.     ctx.fillStyle = 'white'
  7.     ctx.fillRect(px, py, pd, pd)
  8.                 //文字
  9.     ctx.fillStyle = 'white'
  10.     var txt = '击中目标: ' + score
  11.     ctx.fillText(txt, 20, 30)
  12.                 //子弹
  13.     ctx.fillStyle = 'red'
  14.     if(cool > 0){
  15.             cool --
  16.     }
  17.     for (var s = 0; s < sl.length; s++) {
  18.         sl[s].y -= ss
  19.         ctx.fillRect(sl[s].x, sl[s].y, sd, sd)
  20.         for (var e = el.length - 1; e >= 0; e--) {
  21.             if (isCollide(el[e].x, el[e].y, ed, sl[s].x, sl[s].y, sd)) {
  22.                 el.splice(e, 1)
  23.                 sl.splice(s, 1)
  24.                 score++
  25.             }
  26.         }
  27.         if (sl[s].y < -sd) {
  28.             sl.splice(s, 1)
  29.         }
  30.     }
  31.                 //目标
  32.     ctx.fillStyle = 'yellow'
  33.     for (var e = 0; e < el.length; e++) {
  34.         el[e].y += es
  35.         ctx.fillRect(el[e].x, el[e].y, ed, ed)
  36.         if (isCollide(el[e].x, el[e].y, ed, px, py, pd)) {
  37.             reset()
  38.             break
  39.         }
  40.         if (el[e].y >= canvas.height) {
  41.             el.splice(e, 1)
  42.         }
  43.     }
  44. }
复制代码




>按键绑定
  1. function keyPush() {
  2.     var actions = Object.keys(u.actions)
  3.     for (var i = 0; i < actions.length; i++) {
  4.         var key = actions[i]
  5.         if (u.keydowns[key]) {
  6.             u.actions[key]()
  7.         }
  8.     }

  9.     u.registerAction('j', function() {
  10.         if(cool == 0){
  11.                 cool = 9
  12.                 sl.push({
  13.                     x: px + pd / 2 - sd / 2,
  14.                     y: py
  15.                 })
  16.         }
  17.     })
  18.     u.registerAction('w', function() {
  19.         if (py <= 0) {
  20.             py = 0
  21.         } else {
  22.             py -= ps
  23.         }
  24.     })
  25.     u.registerAction('s', function() {
  26.         if (py >= canvas.height - pd) {
  27.             py = canvas.height - pd
  28.         } else {
  29.             py += ps
  30.         }
  31.     })
  32.     u.registerAction('a', function() {
  33.         if (px <= 0) {
  34.             px = 0
  35.         } else {
  36.             px -= ps
  37.         }
  38.     })
  39.     u.registerAction('d', function() {
  40.         if (px >= canvas.width - pd) {
  41.             px = canvas.width - pd
  42.         } else {
  43.             px += ps
  44.         }
  45.     })
  46. }
复制代码



至此 一个简单的射击小游戏就完成了
w a s d 控制移动方向 j 射击

不支持markdown书写  有点伤心

发表于 2018-1-17 17:20:47 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2018-1-17 17:20:49 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2018-1-20 13:20:27 | 显示全部楼层
学习一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部