2022-11-11 来源：华纳网 责任编辑：谷雨老师 人气：
核心提示：大家好，欢迎来到谷雨课堂 本节， 我们使用H5来初步实现一下， 最近火遍全网的小游戏羊了个羊， 这个游戏是使用微信小程序开发的， 我们为了方便，使用纯H5来开发， 核心原理是使用H5的canvas（画布） 来进行绘图 具体核心代码为： /** * 草 */ var Grass =
大家好，欢迎来到谷雨课堂


本节，

我们使用H5来初步实现一下，

最近火遍全网的小游戏“羊了个羊”，

这个游戏是使用微信小程序开发的，

我们为了方便，使用纯H5来开发，

核心原理是使用H5的canvas（画布）

来进行绘图

具体核心代码为：

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
 /** * 草 */var Grass = function () {    // 总共定义8朵草    this.num = 8;    // 存储每个草的坐标    this.x = [80, 330, 230, 330, 90, 270, 305, 120];    this.y = [80, 95, 195, 395, 300, 485, 755, 545];    // y轴偏移量    this.alpha = 10;    this.delay = 45;    this.count = 0;}

Grass.prototype.draw = function () {    ctx.drawImage(picResourceMap.get("bg") , 0, 0, 460, 800);    ctx.save();    ctx.strokeStyle = "#000";    ctx.font="20px Arial";    var text = "";//can.width + "*" + can.height + " fps:" + Math.trunc(1000 / deltaTime);    ctx.strokeText(text,10,30);    // 小草跳动延迟    this.count = this.count + 1;    var l = this.alpha;    if (this.count > this.delay) {        l = 1.5 * this.alpha;        this.count = 0;    }    ctx.lineWidth = 2;    ctx.lineCap = "round";    ctx.strokeStyle = "#54951A";    for (var i = 0; i < this.num; i++) {        ctx.beginPath();        // 控制点        ctx.moveTo(this.x[i], this.y[i]);        // 二次贝塞尔曲线，结束点        ctx.quadraticCurveTo(this.x[i] + 2, this.y[i] - (this.alpha + l), this.x[i] + 8, this.y[i]);        ctx.moveTo(this.x[i] + 5, this.y[i]);        ctx.quadraticCurveTo(this.x[i] + 8 + 2, this.y[i] - (this.alpha + l), this.x[i] + 16, this.y[i]);        ctx.moveTo(this.x[i] + 11, this.y[i]);        ctx.quadraticCurveTo(this.x[i] + 11 + 2, this.y[i] - (this.alpha + l * 2 ), this.x[i] + 24, this.y[i]);        ctx.stroke();    }    ctx.restore();}

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
/** * 关卡控制 */var Level = function () {    this.levelLocation = {        "x": 160,        "y": 390,        "width": 150,        "height": 60    };    // 总共定义8朵草    this.level = 1;    this.levelSwitch = true;    // 开始关卡按钮偏移量    this.offset = 460;}
Level.prototype.draw = function () {    if (this.levelSwitch) {        ctx.drawImage(picResourceMap.get("shadow"), -50, -50, 540, 890);        ctx.drawImage(picResourceMap.get("blackBlock"), 20 + this.offset, 300, 420, 200);        ctx.save();        ctx.font="50px Arial";        ctx.strokeStyle = "#000";        ctx.strokeText("第  " + this.level + "  关",140 + this.offset, 365);        ctx.font="20px Arial";        ctx.strokeStyle = "#fff";        ctx.drawImage(picResourceMap.get("nextLevel"), 160 + this.offset, 390, 150, 60);        ctx.strokeText("开始关卡",200 + this.offset, 425);        ctx.restore();        if (this.offset >= 0) {            this.offset -= 3;        }    }}
Level.prototype.getLevelSwitch = function () {    return this.levelSwitch;}
Level.prototype.showLevelSwitch = function () {     this.levelSwitch = true;     this.offset = 460;}
Level.prototype.addLevel = function () {    this.level = this.level + 1;}
Level.prototype.getIndex = function (point) {    var returnIndex = -1;        if ((this.levelLocation.x < point.x) && (point.x  < (Number(this.levelLocation.x) + Number(this.levelLocation.width))            && (this.levelLocation.y < point.y) && (point.y < (Number(this.levelLocation.y) + Number(this.levelLocation.height))))) {            return 1;        }    return returnIndex;}
Level.prototype.startGame = function () {    this.levelSwitch = false;    goods.init(this.level);    button.init();}

 

完整的源代码可以登录【华纳网】下载。

https://www.worldwarner.com/





 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐