使用CreateJS实现一个【拯救球员】小游戏，快@你的小伙伴一起来玩儿吧

news2024/11/25 22:43:29

拯救球员

    • 游戏需求
      • 👇核心玩法👇
      • 👇界面原型👇
      • 👇成品演示👇
    • 游戏开发
      • 1.游戏素材准备
      • 2.代码实现
        • 1.创建index.html页面
        • 2.首页转场动画实现
        • 3.添加分数倒计时
        • 4.卡片排序展示
        • 5.游戏结束

  世界杯开赛前夕，球员离奇失踪。经过调查，原来是被外星人关在了一个时间幻境中，球员被分散在不同的位置。经过世界杯足协的商议，决定派你前去解救被关在时间幻境中的球员。你需要在有限的时间中尽快的解救他们。
ps：一个消除游戏说的这么玄乎,吃我一刀!!!
在这里插入图片描述

游戏需求

  不扯了，今天我们要开发的是一款常见的消除类游戏，接下来就对游戏得玩法和原型进行简单得说明。然后再进行开发

👇核心玩法👇

  1️⃣.限时，当时间结束时游戏结束。
  2️⃣.计分规则，消除一对卡牌得一分。
  3️⃣.重玩规则，1.卡牌消除完毕 2.时间结束。
  🟡.历史高分。

👇界面原型👇

  1️⃣.采用4*5布局
  2️⃣.首页展示卡牌，分数，时间
  3️⃣.游戏结束页面，展示分数以及重玩
  🟡.游戏开始过场动画
  🟡.翻牌，消除 音效

👇成品演示👇

  为快速展示成品，将时间设置为5秒
在这里插入图片描述

游戏开发

由于部分函数需要在之前的代码中引用，下方仅贴出核心代码以供参考
由于部分函数需要在之前的代码中引用，下方仅贴出核心代码以供参考
由于部分函数需要在之前的代码中引用，下方仅贴出核心代码以供参考
   下面就总结下实现过程。

1.游戏素材准备

（素材来自网络）
在这里插入图片描述
以上素材作用如下👇

作用图片
卡牌正面1.jpg,…6.jpg
卡牌背面back.png
背景图bg.png
过场准备图ready.png ，go.png
重玩replay.png

2.代码实现

1.创建index.html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>球星配对</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/createjs-2013.12.12.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
<style>
html,body,canvas {
	margin: 0px;
	padding: 0px;
	border:none;
	text-align: center;
	background-color: black;
}
canvas {
	background-color: white;
}
</style>
	<body>
		<canvas id="stage"> </canvas>
	</body>
</html>

2.首页转场动画实现

//创建画布 
var memory;
//创建画布 
var stage, W = 640, H = 960;
onload = function () {
	//舞台创建  stage为canvas标签的 id值
	stage = new createjs.Stage("stage");
	 //检测是否支持触摸，然后把stage设置为可以接受触摸事件，如果不设置的话，在移动设备上不能点击
	if (createjs.Touch.isSupported()) {
		createjs.Touch.enable(stage, !0);
		// 创建一个形状对象
		var s = new createjs.Shape;
		s.graphics.f("white").r(0, 0, W, H);
		stage.addChild(s);
	}
	 //刷新频率
	createjs.Ticker.setFPS(60);
	setTimeout(setCanvas, 100);
	//setCanvas();
	createjs.Ticker.on("tick", stage);
	loadResource();
};

//窗体适配
function setCanvas() {
	var canvasAttr = stage.canvas,
	formWidth = window.innerWidth, 
	formHeight = window.innerHeight - 3;
	d = W * formHeight / H, formWidth >= d ? (formWidth = d, stage.x = 0) : stage.x = (formWidth - d) / 2;
	canvasAttr.width = W;
	canvasAttr.height = H;
	canvasAttr.style.width = formWidth + "px";
	canvasAttr.style.height = formHeight + "px";
}


// 加载资源 2
function loadResource() {
	queue = game.queue = new createjs.LoadQueue(!1);
	queue.setMaxConnections(30);
	//执行setup 函数
	queue.on("complete", setup, null, !0);
	//加载资源
	queue.loadManifest({path:RES_DIR + "img/", manifest:[{src:"1.jpg", id:"1"}, {src:"2.jpg", id:"2"}, {src:"3.jpg", id:"3"}, {src:"4.jpg", id:"4"}, {src:"5.jpg", id:"5"}, {src:"6.jpg", id:"6"}, {src:"back.png", id:"back"}, {src:"ready.png", id:"ready"}, {src:"go.png", id:"go"}, {src:"bg.png", id:"bg"}, {src:"replay.png", id:"replaybtn"}]}, !1);
	queue.load();
}

function setup() {
	game.view = new memory.initIndexView;
	stage.addChild(game.view);
	game.gamePlay();
}

此时首页算是完成了一部分了，下面看下效果👇

在这里插入图片描述

3.添加分数倒计时

   设置分数，时间，并将对象添加到主页面中的合适位置中

	memory.indexViewTop = function () {
		this.initialize();
		//得分
		var score = new createjs.Text("0", "bold 49px Arial", "#88D888");
		score.x = 220;
		//剩余时间
		var timeRemaining = new createjs.Text(memory.gameTime, "bold 49px Arial", "#88D888");
		timeRemaining.x = 510;
		score.y = timeRemaining.y = H / 8 /2.5;
		this.addChild(score, timeRemaining);
		this.on("tick", function () {
			score.text = game.score;
			timeRemaining.text = game.remainingTime;
		});
	};

效果如下：
在这里插入图片描述

4.卡片排序展示

   初始化卡牌，卡牌默认为背面
1.卡牌数组生成
   6为使用卡牌数，对应的6个卡牌，如果改为2的话，则生成的卡牌数组中只会有两个

	game.cardArr = function () {
		game.arrOpenedCard = [];
		game.gv.clearCard();
		game.gv.mouseChildren = !0;
		for (var a = [], b = 0; 10 > b; b++) {
			a[2 * b] = a[2 * b + 1] = b % 6 + 1;
		}
		game.gv.setupCard(a);
	};

2.初始化卡牌布局

		memory.ininGameView = function (rowIndex, columnIndex, cardId) {			
		this.initialize();
		this.x = game.gamePlayCard(rowIndex, columnIndex)[0];
		this.y = game.gamePlayCard(rowIndex, columnIndex)[1];
		this.scaleX = this.scaleY = this.initScale = 150 / 130;
		//牌id
		this.cid = cardId;
		this.mouseChildren = !1;
		//创建卡片对象
		cardAttr = new createjs.Bitmap(game.loading_resources(cardId));
		var backImg = new createjs.Bitmap(game.loading_resources("back"));
		this.regX = backImg.getBounds().width / 2;
		this.regY = backImg.getBounds().height / 2;
		this.addChild(cardAttr, backImg);
	};

3,卡牌添加点击对象
👇生成卡牌后，就应该为卡牌绑定点击事件了。需要注意以下两点👇
1️⃣卡牌点击后两两比对，如果匹配成功则消除。如果匹配不成功则在点击第三个时前两个卡牌牌面反转。
2️⃣分数，卡牌匹配成功后分数加1
2.1卡牌判断.成功消除，加分数，不成功则翻转牌面

	game.checkCard = function (card) {
		1 == game.arrOpenedCard.length && card.cid == game.arrOpenedCard[0].cid ? (card.dismiss(function () {
			game.score += 1;
			0 >= game.gv.getNumChildren() && (game.cardArr(), game.score += 5);
		}), 
		game.arrOpenedCard.pop().dismiss()) : game.cardOther(card);
	
	};

2.2 卡牌匹配成功，消除卡牌

		//消除卡片
		this.dismiss = function (card) {
			createjs.Tween.get(this).wait(200).to({rotation:1080, scaleX:0, scaleY:0}, 100).call(function () {
				this.parent.removeChild(this);
				card && card();
			});
		};

2.3 卡牌不匹配处理

		this.close = function () {
			backImg.visible || (this.mouseEnabled = !1, createjs.Tween.get(this).to({scaleX:0}, 50).call(function () {
				backImg.visible = !0;
				shadow.visible = !1;
				createjs.Tween.get(this).to({scaleX:this.initScale}, 50).call(function () {
					this.mouseEnabled = !0;
				});
			}));
		};

4.翻转卡牌添加阴影效果

		//翻牌阴影效果
		var shadow = new createjs.Shape;
		shadow.name = "frame";
		//阴影
		shadow.graphics.beginFill("#88D888").drawRect(8, 8, cardAttr.getBounds().width + 2, cardAttr.getBounds().height + 2).endFill();
		//图片边框颜色
		shadow.graphics.beginStroke("#88D888").setStrokeStyle(10).drawRect(2, 2, cardAttr.getBounds().width - 2, cardAttr.getBounds().height - 2).endStroke();
		shadow.visible = !1;

5.卡牌音效添加
1️⃣点击翻牌音效
2️⃣消除音效
1.使用以下代码

createjs.Sound.play("bonus", !0);

将对象addChild()即可，到这里主要的功能已经完成了，看下效果吧👇
在这里插入图片描述

5.游戏结束

👇游戏结束实现涉及到以下两点👇
1️⃣游戏结束时，跳转到结束页，展示当前分数和历史最高分数。需要注意的是游戏结束分为两种情况:
 1.卡牌完全消除      2.游戏时间结束
2️⃣游戏重玩

5.1 游戏结束界面

	//游戏结束布局
	memory.gameOverView = function () {
		console.log("gameOverView:")
		this.initialize();
		this.setBounds(0, 0, W, H);
		
		//游戏结束
	    var gameOverText = new createjs.Text("游戏结束", "bold 48px Arial", "#488888");
		gameOverText.x = 240;
		gameOverText.y = 170;

		//当前分数分数颜色
		var nowSalleColer = new createjs.Text(game.score, "bold 48px Arial", "#F86888");
		var nowSalleText = new createjs.Text("当前分数:", "bold 48px Arial", "#488888");
		nowSalleColer.x = 400;
		nowSalleText.x = 150;
		nowSalleText.y=nowSalleColer.y = 300;
	    nowSalleColer.textBaseline=nowSalleText.textBaseline="middle";

		var bestScaleColer = new createjs.Text(0 > best ? 0 : best, "bold 48px Arial", "#F86888");
		var bestScaleText = new createjs.Text("历史最高:", "bold 48px Arial", "#488888");
		bestScaleColer.x = 400;
		bestScaleText.x=150;
		bestScaleColer.y = bestScaleText.y=410;
		bestScaleText.textBaseline = bestScaleColer.textBaseline = "middle";
		//重玩
		var replaybtn = new createjs.Bitmap(game.loading_resources("replaybtn"));
		replaybtn.x = 320;	
		replaybtn.regX =  115;
		replaybtn.regY =  40;
		replaybtn.y =  540;
		
		var backShpae = new createjs.Shape, k = this.getBounds();
		backShpae.graphics.beginFill("#ffffff").drawRect(k.x, k.y, k.width, k.height);
		backShpae.alpha = 0.8;
		// 将实例添加到场景上
		this.addChild(backShpae, gameOverText,bestScaleText, nowSalleColer,nowSalleText, bestScaleColer, replaybtn);
		replaybtn.onClick(function (gameOverText) {
	        game.view.removeChild(gameOverText.target.parent);
			game.gamePlay();
		});

	};

5.2 历史最高分
历史最高分存储在cookies中，当游戏结束时。计算分数，如果当前分数大于历史分数则更新历史分数。

👇最终效果如下👇
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/89101.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

拷贝构造，赋值运算符重载（六千字长文详解！）

拷贝构造，赋值运算符重载（六千字长文详解！）

c之类和对象详解 拷贝构造&#xff0c;赋值运算符重载 文章目录c之类和对象详解 拷贝构造&#xff0c;赋值运算符重载拷贝构造拷贝构造特征拷贝构造的注意赋值运算符重载运算符重载赋值重载赋值运算符的写法注意赋值重载的默认性赋值重载和拷贝赋值的区别在哪里&#xff1f;拷贝…
阅读更多...
Ubuntu问题汇总

Ubuntu问题汇总

1.sudo ifconfig 找不到命令 ubuntu找不到ifconfig_猿 白的博客-CSDN博客_ubuntu ifconfig命令找不到 没有找到ifconfig的命令&#xff0c;需要进行安装&#xff0c;按照提示中的命令安装相关的工具包 sudo apt install net-tools 2.ip查找 3.重启服务器后&#xff0c;nvid…
阅读更多...
记一次浏览器预览通过nginx且有权限控制的静态文件

记一次浏览器预览通过nginx且有权限控制的静态文件

我的需求是&#xff0c;后台生成了合同文件&#xff0c;用户需要进行预览&#xff0c;如果采用流的实现方式的话&#xff0c;会涉及到输入流、输出流&#xff0c;性能开销较大&#xff0c;所以采用的是直接访问文件&#xff0c;这里就涉及到一个问题&#xff0c;就是 需要设置…
阅读更多...
Mobtech秒验SDK——一站式解决用户登录场景

Mobtech秒验SDK——一站式解决用户登录场景

据悉&#xff0c;北京中文万维科技有限公司旗下多款APP&#xff0c;和MobTech开发的秒验SDK达成合作&#xff0c;为其提供用户一键登录解决方案。 北京中文万维科技有限公司是一家立志以移动互联网阅读为发展起点的阅读互动娱乐高新技术企业&#xff0c;旗下拥有多款阅读类APP。…
阅读更多...
互动教学场景下的视频直播线上研讨会应用（组图）

互动教学场景下的视频直播线上研讨会应用（组图）

阿酷TONY / 原创 / 2022-12-14 / 长沙 / 互动教学/互动培训类场景特点&#xff1a; 1. 直播过程中&#xff0c;学员不仅是观看讲师的授课内容&#xff0c;还要与讲师直接进行音视频会话&#xff1b;当然一些非培训教学场景也常用到&#xff0c;比如线上学术类研讨会等等。 2…
阅读更多...
【Pycharm教程】 详解 PyCharm Macros宏

【Pycharm教程】 详解 PyCharm Macros宏

宏提供了一种方便的方法来自动化您在编写代码时经常执行的重复过程。您可以录制、编辑和播放宏&#xff0c;为它们分配快捷方式并共享它们。 宏可用于在文件中组合一系列与编辑器相关的操作。 您无法记录按钮单击、导航到弹出窗口以及访问工具窗口、菜单和对话框。 可以使用没…
阅读更多...
从3s到40ms，看看人家的性能优化技巧，确实优雅

从3s到40ms，看看人家的性能优化技巧，确实优雅

什么是高性能系统 先理解一下什么是高性能设计&#xff0c;官方定义: 高可用(High Availability&#xff0c;HA)核心目标是保障业务的连续性&#xff0c;从用户视角来看&#xff0c;业务永远是正常稳定的对外提供服务&#xff0c;业界一般用几个 9 来衡量系统的可用性。通常采…
阅读更多...
代码随想录算法训练营第五十天|123.买卖股票的最佳时机III、 188.买卖股票的最佳时机IV

代码随想录算法训练营第五十天|123.买卖股票的最佳时机III、 188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 此题限定了买卖的次数&#xff0c;所以应该用几个状态来记录所对应得利润 至多买卖两次&#xff0c;这意味着可以买卖一次&#xff0c;可以买卖两次&#xff0c;也可以不买卖。 dp数组及下标含义 一天一共就有五个状态&#xff0c; 0 没有操作 1 第…
阅读更多...
java+mysql 基于ssm的驾校预约管理系统

java+mysql 基于ssm的驾校预约管理系统

随着现代驾校预约管理的快速发展,可以说驾校预约管理已经逐渐成为现代驾校预约管理过程中最为重要的部分之一。但是一直以来我国传统的驾校预约管理并没有建立一套完善的行之有效的驾校预约管理系统,传统的驾校预约管理已经无法适应高速发展,无论是从效率还是从效果来看都远远的…
阅读更多...
代码随想录Day50|123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

代码随想录Day50|123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

文章目录123.买卖股票的最佳时机III188.买卖股票的最佳时机IV123.买卖股票的最佳时机III 文章讲解&#xff1a;代码随想录 (programmercarl.com) 题目链接&#xff1a;123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给定一个数组&…
阅读更多...
[附源码]Python计算机毕业设计感动校园人物投稿网站Django（程序+LW）

[附源码]Python计算机毕业设计感动校园人物投稿网站Django（程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
极简入门 2022 docker 部署skywalking9.2.0

极简入门 2022 docker 部署skywalking9.2.0

安装skywalking服务 官方地址&#xff1a;官网 安装文档&#xff1a;文档地址 拉取镜像 docker pull apache/skywalking-oap-server:9.2.0 docker pull apache/skywalking-ui:9.2.0运行skywalking-oap容器 docker run --name skywalking-oap -e TZAsia/Shanghai -p 12800:1…
阅读更多...
ffmpeg的基本用法

ffmpeg的基本用法

title: ffmpeg的基本用法 categories:[ffmpeg] tags:[音视频编程] 一、ffmpeg的安装 1.Centos安装 FFmpeg 在默认的CentOS 8 源仓库中没有提供。你可以选择通过源文件编译安装 FFmpeg&#xff0c;或者使用dnf工具从Negativo17源仓库中安装。我们将会使用第二个选项。 完成…
阅读更多...
正大期货数据整合 新鲜事简单报

正大期货数据整合 新鲜事简单报

本周观察重点: &#x1f539;美国11月CPI数据昨晚公布为7.1%&#xff0c;低于市场预期7.3%&#xff0c;较于前值7.7%大幅回落&#xff0c;随通膨回落&#xff0c;静待联准会未来货币政策方向。 12/15 (四) 美国、香港、欧洲、英国、台湾央行12月利率决策会议 12/16 (六) 日本、…
阅读更多...
基于java+springboot+mybatis+vue+mysql的小学家校一体作业帮

基于java+springboot+mybatis+vue+mysql的小学家校一体作业帮

项目介绍 本系统采用java语言开发&#xff0c;后端采用springboot框架&#xff0c;前端采用vue技术&#xff0c;数据库采用mysql进行数据存储。系统功能如下&#xff1a; 前台&#xff1a; 首页、微社区、试卷、公告通知、个人中心、后台管理 后台&#xff1a; 首页、个人中…
阅读更多...
SpringCloud02

SpringCloud02

1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我们需要一种统一配置管理方案&#xff…
阅读更多...
技术分享 | 软件项目管理与跨部门沟通协作

技术分享 | 软件项目管理与跨部门沟通协作

项目管理是在项目活动中运用知识、技能、工具和方法&#xff0c;以便达到项目要求。 软件项目管理有其特定的对象、范围和活动&#xff0c;着重关注成本、进度、风险和质量的管理&#xff0c;还需要协调开发团队和客户的关系&#xff0c;协调内部各个团队之间的关系&#xff0…
阅读更多...
怎么把pdf格式转成word文档？如何将 PDF 转换为 Word

怎么把pdf格式转成word文档？如何将 PDF 转换为 Word

怎么把pdf格式转成word文档&#xff1f;PDF是运用得很广泛地的办公文档&#xff0c;但是不能编辑&#xff0c;为了方便编辑&#xff0c;需要将PDF转换为word&#xff0c;那么&#xff0c;如何将 PDF 转换为 Word&#xff0c;下面&#xff0c;易我小编会讲解实用的pdf转word的操…
阅读更多...
基于VBA实现电缆结构自动出图(二) —— 单芯线

基于VBA实现电缆结构自动出图(二) —— 单芯线

大家敢相信吗&#xff0c;原来VBA竟然可以实现电缆结构自动出图&#xff0c;换句话说&#xff0c;只要输入数据&#xff0c;VBA会自动将电缆的结构画出来&#xff0c;同时还可以渲染&#xff0c;结果竟然不输画图软件&#xff0c;真真让我刮目相看。这里我就不过多介绍VBA了&am…
阅读更多...
传奇登录器列表显示不连接

传奇登录器列表显示不连接

传奇登录器列表显示不连接 我们打开登录器后列表显示不连接怎么办&#xff1f; 图中有打码部分望读者理解&#xff08;平台gz&#xff09; 以下我们大家说下几种列表显示不连接的几种情况 第一种&#xff1a;列表格式错误 在我们开区的位置默认是127.0.0.1 端口默认7000 如果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023