软件工程第一次作业--疯狂伐木工

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 熟悉git代码管理流程，将源代码上传到到github 在博客园班级中写一篇相应的博文
作业源代码	https://github.com/shita-no/crazyTreeMan
学号	31801117
姓名	柴晨培
院系	计算学院计算机专业

 

 

 

 

 

 

 

 

 

提交项目所用工具：GitHub Desktop

 

 

 

前言：软件工程的第一次作业·。个人第一次接触小程序，主要通过他人demo进行学习和改编

界面展示

 

 

 

 

 

 文件结构

 

 

遇到的问题：

1.原demo通过分数来决定砍树获得每次增加的量，分数越高增量越低，最后维持在一个平衡点，在这个平衡点上保持速度均衡。我调整下通过不间断的砍树来减少时间的流缓，并调整了掉血速度即时间减少速度让此现象更明显

 2.树节点和树基点位置没匹配好 改动树节点位置会出现图层割裂的情况

 

 3.想加入es6 js雪花特效 但是没成功，对小游戏这块依旧不熟悉

bg.js 简单的背景图插入

let screenHeight = window.innerHeight
let screenWidth  = window.innerWidth

let bg = new Image()
bg.src = 'images/bg.jpg'

export default class back{
    constructor(ctx){
        this.ctx = ctx
    }

    render(){
        var that = this        
        that.ctx.drawImage(bg,0,0,screenWidth,screenHeight)        
    }
}

细读代码，该demo组成比较简洁，从小到大，一颗大树是由无数的树节点组成的，因此先写树结，然后大树，最后是得分场景。这样细分下来程序运行逻辑就比较简单

 

 

 databus.js用来控制数据对象   对树结进行剔除和延伸的操作，移除树节点并加入到对象池当中

import Pool from './pool.js'

/*状态管理*/
export default class databus{
    constructor(){
        this.score = 0
        this.gameOver = false
        this.pool = new Pool()
        this.trees = []
        this.moveTree = []
    }

    reset(){
        this.score = 0
        this.gameOver = false
        this.trees = []
        this.moveTree = []
    }    

    pushTree(tree){        
        this.trees.push(tree)
    }

    shiftTree(){
        let temp = this.trees.shift()
        this.pool.recover('tree', temp)
    }
}

tree.js  大树是树节点的集合，由一个一个的节点依次排列组成。这里主要功能就是设置树枝的方向以及树根的位置而这个游戏一直在变化的是树节点，

因为目前初期改动，控制树节点和树根位置统一有时存在bug。

let screenHeight = window.innerHeight
let screenWidth  = window.innerWidth

export default class tree{
    constructor(ctx,src='',l=true){
        this.ctx = ctx
        this.img = new Image()
        this.img.src = src
        this.posiDr = l  // 1代表左边，0代表右边
    }

    update(src,posiDr){
        this.img.src = src
        this.posiDr =posiDr
    }

    renderTree(i){
        let that = this
        that.treePosition(i)
    //    that.img.onload = function(){    
            that.ctx.drawImage(that.img,that.x,that.y,207,60)
    //    }
    }

    treePosition(i){
        i++
        if (this.posiDr && this.posiDr != "center") {
            this.x = screenWidth/2-54
        }else{
            this.x = screenWidth/2-156
            
        }
        this.y = screenHeight-60-i*60        
    }

    renderMove(){
        if (!this.posiDr) {
            this.x = this.x + 16
        }else{
            this.x = this.x - 16
        }
        this.ctx.drawImage(this.img,this.x,this.y,207,60)
    }
}

 

main.js 因为大树的类是整个游戏的重点逻辑，npc需在没有树枝的结点进行生存，而产生树枝也是需要随机的，因此这里写了randomTree（）和点击函数以及碰撞检测，

并通过这个问题得到游戏结束后的触摸事件处理逻辑 touchEventHandler(e)函数，另外概率随机是可以调整的，因此可以调整游戏难度

import Databus from './base/databus.js'
import Back from './base/bg.js'
import Tree from './base/tree.js'
import Npc from './base/npc.js'
import Gameinfo from './base/gameinfo.js'

let ctx = canvas.getContext('2d')
let databus = new Databus()

let screenHeight = window.innerHeight
let screenWidth  = window.innerWidth

let treeLeft = "images/treeLeft.png"
let treeCen = "images/tree.png"
let treeRight = "images/treeRight.png"

let npcImg = 'images/npc.png'
let npcMove = 'images/npcMove.png'
let npcDie = 'images/npcDie.png'

export default class main{
    constructor(){
        this.restart = false
        this.init()                
    }

    init(){
        databus.reset()
        canvas.removeEventListener('touchstart',this.touchHandler)
        wx.triggerGC()
        /*降低帧率*/
        this.back = new Back(ctx)    
        this.npc = new Npc(ctx)        
        this.gameinfo = new Gameinfo(ctx)
                    
        for (var i = 1; i < 12; i++) {
            let _img = this.randomTree()        
            let _tree =  databus.pool.getItemByClass('tree',Tree,ctx,_img.img,_img.p)    
            databus.pushTree(_tree)
        }
        this.touch()
        window.requestAnimationFrame(
          this.loop.bind(this),
          canvas
        )
        
                
    }

    run(){            
        /*计算当前点击位置*/
        this.collisionDetection()
        if(databus.gameOver){
            return
        }
        let tap = this.touchX>=screenWidth/2
        if (!(this.npc.posi == tap)) {
            this.npc.posi = !this.npc.posi
            return
        }        

        databus.score++
        this.npc.blood = (this.npc.blood + 80>=6000)?6000:this.npc.blood+80
        /*木头池*/
        databus.shiftTree() //弹出        
        let _img = this.randomTree()
        let _tree =  databus.pool.getItemByClass('tree',Tree,ctx,_img.img,_img.p)    
        databus.pushTree(_tree)
    }

    /*随机产生木头*/
    randomTree(){
        /*判断上一个木头*/
        let _a,_b,_random=true;
        let random = Math.random()
        let last = true
        if (databus.trees.length>0) {
            last = databus.trees[databus.trees.length-1].posiDr
        }
        if (last == "center") {
            if (random<=0.3334) {
                _a = treeRight
                _b = true
            }else if(random>0.3334&&random<=0.6667){
                _a = treeLeft
                _b = false
            }else{
                _a = treeCen
                _b = "center"
            }            
            
        }else{
            _a = treeCen
            _b = "center"
        }
        return {
            img:_a,
            p:_b
        }
    }

    /*碰撞检测*/
    collisionDetection(){
        let isCollision = (this.npc.posi==databus.trees[0].posiDr)
        isCollision&&(databus.gameOver = true)&&(this.npc.update(npcDie))
    }
   
    touchEventHandler(e) {
         e.preventDefault()

        let x = e.touches[0].clientX
        let y = e.touches[0].clientY

        let area = this.gameinfo.btnArea
        if (x >= area.startX
        && x <= area.endX
        && y >= area.startY
        && y <= area.endY ){
               ctx.clearRect(0, 0, canvas.width, canvas.height)
            this.init()
        }
    }

    touchCuttree(e){
        e.preventDefault()
        let that = this;
        if (databus.gameOver) {
            return
        }
        that.npc.update(npcMove)
        setTimeout(()=>{
            that.npc.update(npcImg)
        },100)
        that.touchX = e.touches[0].clientX;
        that.run()    
    }

    touch(){
        let that = this;
        this.touchCuttrees = that.touchCuttree.bind(this) // 更改this指向
        canvas.addEventListener('touchstart', this.touchCuttrees)
    }
    loop() { 
        let that = this
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        this.back.render()
        this.npc.render()

        for(var k in databus.trees){
            databus.trees[k].renderTree(k)
        }
        this.npc.renderLifebar()
        /*检测结束*/
        if (databus.gameOver||this.npc.blood<0.017) {    
          databus.gameOver = true
          this.gameinfo.gameOver(databus.score)
          canvas.removeEventListener('touchstart',this.touchCuttrees)             
          this.touchHandler = that.touchEventHandler.bind(this)
            canvas.addEventListener('touchstart', this.touchHandler)               
          return
        }else{                  
          this.gameinfo.render(databus.score)
        }            

         window.requestAnimationFrame(
          this.loop.bind(this),
          canvas
        )
    }

}

 

总结

这次主要都在看demo的代码以及微信小游戏原生demo的分析博客来学习小游戏，由于初步接触js和微信小游戏，在修改代码上遇到较大困难。

博客地址：https://www.cnblogs.com/Phoenix-blog/p/10948630.html