Html5开发小游戏看你有多色

极客学院

看你有多色HTML游戏开发视频播放网址:点击打开链接

以下代码为看视频后敲得。可供参考。

1.index.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>看你有多色</title><script src="easeljs-0.7.1.min.js"></script><script src="Rect.js"></script>
</head>
<body><canvas id="gameView" width="400px" height="400px"></canvas><script src="app.js"></script>
</body>
</html>

2.app.js

var stage=new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);
var n=2;
function addRect() {var cl=parseInt(Math.random()*1000000);var color="#"+cl;var x=parseInt(Math.random()*n);var y=parseInt(Math.random()*n);for(var indexX=0;indexX<n;indexX++){for(var indexY=0;indexY<n;indexY++){var r =  new Rect(n,color);gameView.addChild(r);r.x=indexX;r.y=indexYif(r.x==x&& r.y==y){r.setRectType(2);}r.x=indexX*(400/n);r.y=indexY*(400/n);if(r.getRectType()==2){r.addEventListener("click", function () {if(n<7){++n;}gameView.removeAllChildren();addRect();})}}}
}
addRect();

3.Rect.js

/*** Created by Administrator on 2014/8/9.*/
function Rect(n,color) {createjs.Shape.call(this);this.setRectType= function (type) {this._RectType=type;switch (type){case 1:this.setColor(color);break;case 2:this.setColor("#ff0000");break;}}this.setColor= function (colorString) {this.graphics.beginFill(colorString);this.graphics.drawRect(0,0,400/n-5,400/n-5);this.graphics.endFill();}this.getRectType= function () {return this._RectType;}this.setRectType(1);
}
Rect.prototype = new createjs.Shape();

Html5开发小游戏看你有多色相关推荐

《游戏开发》html5 益智小游戏-小熊吃星星
游戏截图项目结构一共3个文件分别为 index.html script.js style.css index.html文件源码展示 <!DOCTYPE html> <htm ...
【phaser】快速实现HTML5 2D小游戏
原文链接前言最近忙着看项目和写项目,在 github 上无意中发现了别人用 phaser 实现的2d小游戏,代码简单易懂,而且phaser框架本身就是非常的简单,非常适合想快速开发小游戏的开发者. ...
个人使用CocosCreator开发小游戏路上的一些“坑坑洼洼”
个人使用CocosCreator开发小游戏路上的一些"坑坑洼洼" 开场自白微信小游戏适配一般界面弹窗节点适配套路的需求适配 PS ps中的ps 摄像机的新手操作 tiled ...
[python] 开发小游戏豆豆吃花瓣
今天来做一个python游戏使用python的游戏框架pygame开开发一个自创的豆豆吃花瓣的游戏[还没有取名字?] 首先看下游戏主目录下有些什么文件就一个img的文件夹,和一个py的文件 img ...
【Unity3D开发小游戏】《愤怒的小鸟》开发教程
[Unity3D开发小游戏]<愤怒的小鸟>开发教程 2019年09月11日 10:34:36 恬静的小魔龙阅读数 1698更多分类专栏: Unity3D日常 Unity3d手游开发 U ...
个人开发小游戏应该如何选择游戏引擎?
随着微信生态中,小程序应用指数级的增长,许多休闲游戏变成为了众多游戏厂商流量变现的新手段.以近期很火的"羊了个羊"为例,它便是我们常常所说的小游戏.今天我们就来介绍几款游戏开发引擎 ...
Html5在线小游戏在线玩压扁小鸟（flyBird）游戏源码
这个源码无需后台上传服务器,直接在线即可使用. 该游戏源码是基于HTML5和JavaScript开发的,运行在浏览器中,使得用户能够方便地进行游戏,而且不需要进行任何安装和下载操作.想要玩游戏的用户只 ...
如何用HTML和css实现拼图,打造自己的html5拼图小游戏
得益于liuyubobobo老师的canvas课程和思路指点,做了一版简单的 html5拼图小游戏,下面就简单介绍一下实现的原理... 利用canvas裁剪拼图所需的小块图片//核心代码如下: var ...
【Unity3D开发小游戏】专栏文章导读清单
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 一.前言本专栏,以小游戏的开发为手段,以学习为目的,在学习的道路中,总是要 ...
一个都不能死HTML5网页小游戏免费下载
一个都不能死HTML5网页小游戏免费下载今天我在网上看见了一个小游戏,我想研究一下源码,在网上找了许久,全是套路,要钱的. 于是我自己花钱,免费分享给你们源码. 点我如果对你们有帮助请给我一个免费 ...

Html5开发小游戏看你有多色

Html5开发小游戏看你有多色相关推荐

最新文章

热门文章