放风筝H5小游戏

2023-12-05 12:04

文章标签 h5 小游戏放风筝

本文主要是介绍放风筝H5小游戏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

欢迎来到程序小院

放风筝

玩法：点击鼠标拖动风筝上下左右移动，不能碰到树叶，移动风筝要注意缓慢移动哦，
不然会飞的很快收不回来的，根据你飞行的高度会有一个分数统计，快去放风筝吧^^。

开始游戏

html

  <canvas width="640" height="1036"></canvas>

css

canvas{display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 340px; height: 550px; cursor: default; margin-left: 370px; margin-right: -370px; margin-top: 0px;
}

js

Kiteflying.Game.prototype = {create: function() {this.game.touchControl = this.game.plugins.add(Phaser.Plugin.TouchControl);this.game.touchControl.settings.singleDirection = false; //控制方式 false:360°控制 true:上下左右控制this.bg = this.add.tileSprite(0,0,Kiteflying.GAME_WIDTH,Kiteflying.GAME_HEIGHT,'gameBg');this.branchGroup = this.add.group();this.branchGroup.enableBody = true;this.kite = this.add.sprite(Kiteflying.GAME_WIDTH/2-30,Kiteflying.GAME_HEIGHT/2,'kite');this.kite.animations.add('fly');this.kite.animations.play('fly', 10, true);this.physics.enable(this.kite,Phaser.Physics.ARCADE);this.kite.body.setSize(55, 120, 10, 20);this.kite.body.collideWorldBounds = true;this.bmpText = this.add.bitmapText(30, 10, 'desyrel','0', 64);this.scoreBox = this.add.group();this.hasStarted = false;this.time.events.loop(2500, this.createBranch, this);this.time.events.stop(false);this.startGame();},easeInSpeed : function(x){return x * Math.abs(x) / 1500;},update: function() {if(!this.hasStarted) return;this.physics.arcade.overlap(this.kite, this.branchGroup, this.hitBranch, null, this);if(!this.gameIsover){this.checkScore();this.speed = this.game.touchControl.speed;this.bg.tilePosition.x += this.easeInSpeed(this.speed.x/3);this.kite.x -= this.easeInSpeed(this.speed.x);this.kite.y -= this.easeInSpeed(this.speed.y);}},rd : function(n,m){var c = m-n+1;return Math.floor(Math.random() * c + n);},startGame : function(){this.gameSpeed = 200;this.hasStarted = true;this.gameIsover = false;this.score = 0;this.bg.autoScroll(0,this.gameSpeed/5);this.time.events.start();this.game.touchControl.inputEnable();},gameover : function(){this.gameIsover = true;this.bg.stopScroll();this.branchGroup.forEachExists(function(kite){kite.body.velocity.y = 0;}, this);this.time.events.stop(true);this.bmpText.destroy();this.branchGroup.destroy();this.kite.destroy();this.showGameOverTxt();},showGameOverTxt : function(){this.scoreBox.create(0,0,'scoreBox');this.scoreBox.x = 30;this.scoreBox.y = 70;this.style = { font: "38px Microsoft Yahei", fill: "#774b16", wordWrap: true, wordWrapWidth: this.scoreBox.width, align: "center" };this.scoreTxt = this.add.text(150, 118, "恭喜你\n你的最终得分是" + this.bmpText.text);this.add.button(Kiteflying.GAME_WIDTH/2-160, Kiteflying.GAME_HEIGHT/2 - 180,'button-rest', this.gameReset, this);},gameReset : function(){this.state.start('Game');},createBranch : function(){this.gap = this.gap || 150;var leftBranch = -(100 + this.rd(150,450));var rightBranch = leftBranch + this.gap + 640;if(this.resetBranch(leftBranch,rightBranch)) return;var leftBranch = this.add.sprite(leftBranch, -150, 'branchs', 0, this.branchGroup);var rightBranch = this.add.sprite(rightBranch, -150, 'branchs', 1, this.branchGroup);this.branchGroup.setAll('checkWorldBounds',true);this.branchGroup.setAll('outOfBoundsKill',true);this.branchGroup.setAll('body.velocity.y', this.gameSpeed);},resetBranch : function(leftBranch,rightBranch){var i = 0;this.branchGroup.forEachDead(function(kite){if(kite.x<=0){kite.reset(leftBranch, -150);}else{kite.reset(rightBranch, -150);}kite.body.velocity.y = this.gameSpeed;i++;},this)return i == 2;},hitBranch : function(){if(this.gameIsover) return;this.gameover();},checkScore : function(){this.bmpText.text = ++this.score / 10;this.gameSpeed+=0.1;}
};

源码

需要源码请关注添加好友哦^ ^