游戏1：HTML5制作网页游戏围住神经猫--createjs

游戏简介：点击小圆圈，是蓝色的小圆圈不跑出圆圈外，跑出则结束游戏

准备工作：

　　下载easejs ：下载地址：http://www.createjs.cc/easeljs 中文网站

效果：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>围住神经猫游戏</title><script src="js/easeljs.min.js"></script><script src="js/Circle.js"></script>
</head>
<body>
<canvas width="800px" height="800px" id="gameView"></canvas>
<script src="js/app.js"></script>
</body>
</html>

app.js

/*** Created by xxc on 2018/11/24.*/
var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);var gameView = new createjs.Container;
gameView.x = 30;
gameView.y = 30;
stage.addChild(gameView);var circleArr = [[],[],[],[],[],[],[],[],[]];
var currentCat;
var MOVE_NONE=-1,MOVE_LEFT= 0,MOVE_UP_LEFT= 1,MOVE_UP_RIGHT= 2,MOVE_RIGHT= 3,MOVE_DOWN_RIGHT= 4,MOVE_DOWN_LEFT=5;function getMoveDir(cat){var distanceMap=[];//leftvar can = true;for(var x = cat.indexX;x>=0;x--){if(circleArr[x][cat.indexY].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_LEFT] = cat.indexX-x;break;}}if(can){return MOVE_LEFT;}//LEFT UPcan = true;var x = cat.indexX,y = cat.indexY;while(true){if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_UP_LEFT] = cat.indexY-y;break;}if(y%2==0){x--;}y--;if(y<0||x<0){break;}}if(can){return MOVE_UP_LEFT;}//right upcan = true;x = cat.indexX,y = cat.indexY;while(true){if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_UP_RIGHT] = cat.indexY-y;break;}if(y%2==1){x++;}y--;if(y<0||x>8){break;}}if(can){return MOVE_UP_RIGHT;}//rightcan = true;for(var x = cat.indexX;x<9;x++){if(circleArr[x][cat.indexY].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_RIGHT] = x-cat.indexX;break;}}if(can){return MOVE_RIGHT;}//right downcan = true;x = cat.indexX,y = cat.indexY;while(true){if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_DOWN_RIGHT] = y-cat.indexY;break;}if(y%2 == 1){x++;}y++;if(y>8||x>8){break;}}if(can){return MOVE_DOWN_RIGHT;}//left downcan = true;x = cat.indexX,y = cat.indexY;while(true){if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){can = false;distanceMap[MOVE_DOWN_LEFT] = y-cat.indexY;break;}if(y%2 == 0){x--;}y++;if(y>8||x<0){break;}}if(can){return MOVE_DOWN_LEFT;}var maxDir = -1,maxValue = -1;for(var dir = 0;dir<distanceMap.length;dir++){if(distanceMap[dir]>maxValue){maxValue = distanceMap[dir];maxDir = dir;}}if(maxValue>1){return maxDir;}else{return MOVE_NONE;}
}function circleClicked(event) {if(event.target.getCircleType()!=Circle.TYPE_CAT){event.target.setCircleType(Circle.TYPE_SELECTED);}else{return ;}if(currentCat.indexX == 0 || currentCat.indexX == 8 || currentCat.indexY == 0 || currentCat.indexY == 8){alert("游戏结束");return;}var dir = getMoveDir(currentCat);switch (dir){case MOVE_LEFT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexX-1][currentCat.indexY];currentCat.setCircleType(Circle.TYPE_CAT);break;case MOVE_UP_LEFT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY-1];currentCat.setCircleType(Circle.TYPE_CAT);break;case MOVE_UP_RIGHT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1];currentCat.setCircleType(Circle.TYPE_CAT);break;case MOVE_RIGHT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexX+1][currentCat.indexY];currentCat.setCircleType(Circle.TYPE_CAT);break;case MOVE_DOWN_RIGHT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1];currentCat.setCircleType(Circle.TYPE_CAT);break;case MOVE_DOWN_LEFT:currentCat.setCircleType(Circle.TYPE_UNSELECTED);currentCat=circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1];currentCat.setCircleType(Circle.TYPE_CAT);break;default :alert("游戏结束");}}
function addCircles(){for(var indexY = 0;indexY<9;indexY++){for(var indexX = 0;indexX<9;indexX++){var c = new Circle();gameView.addChild(c);circleArr[indexX][indexY] = c;c.indexX = indexX;c.indexY = indexY;c.x = indexY%2?indexX*55 + 25 : indexX*55;c.y = indexY * 55;if(indexX == 4 && indexY==4){c.setCircleType(Circle.TYPE_CAT);currentCat = c;}else if(Math.random()<0.1){c.setCircleType(Circle.TYPE_SELECTED);}c.addEventListener("click",circleClicked);}}
}
addCircles();

Circle.js

/*** Created by xxc on 2018/11/24.*/
//画圆
function Circle(){createjs.Shape.call(this);this.setCircleType = function (type) {this._circleType = type;switch (type){case Circle.TYPE_UNSELECTED:this.setColor("#cccccc");break;case Circle.TYPE_SELECTED:this.setColor("#ff6600");break;case Circle.TYPE_CAT:this.setColor("#0000ff");break;}}this.setColor = function (colorString) {this.graphics.beginFill(colorString);this.graphics.drawCircle(0,0,25);this.graphics.endFill();}this.getCircleType = function () {return this._circleType;}this.setCircleType(1);
}
Circle.prototype = new createjs.Shape();
Circle.TYPE_UNSELECTED = 1;
Circle.TYPE_SELECTED = 2;
Circle.TYPE_CAT = 3;

转载于:https://www.cnblogs.com/alex-xxc/p/10013142.html

游戏1：HTML5制作网页游戏围住神经猫--createjs相关推荐

[Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
HTML5跑酷网页游戏源码
介绍: HTML5跑酷网页游戏,按空格键上下左右控制跳跃网盘下载地址: http://kekewangLuo.net/tzGmMF9q6Fg0 图片:
html5倒车游戏,html5制作转盘游戏
html5制作转盘游戏 h1{ width: 100%; height: 3rem; line-height: 3rem; font-size: 1.8rem; color:#c60; text-al ...
使用html5的游戏,使用HTML5制作游戏
使用HTML5制作简单游戏记录一下自己制作游戏的基本模式和思路. 游戏架构我的游戏制作架构图: l 浏览器接入层: 提供浏览器检测能力(主要看是否支持HTML5),提供多种客户端接入的兼容处理. ...
html5 在线 ppt 制作软件,使用HTML5制作网页.ppt
使用HTML5制作网页技术文档不做精美排版 http://ylmf.eu正在策划中根据你们询问的人,HTML 5不是迈向创造更语义化的网络的下一个重要步伐,就是用一系列不完整的标签和标记大杂烩让 ...
使用HTML5制作物理游戏
原文:http://www.enjoyhtml5.com/2011/11/html5-game-with-box2djs/ 简介 HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间, ...
C#使用 WebBrowser制作网页游戏辅助工具关键技术分析
使用WebBrowser控件,实现起来确实很方便,但灵活性差,比不上直接组包发包.对三国风云这款网页游戏来说,WebBrowser用的好的话理论上可以实现想要的功能(我只实现了整点自动"举 ...
H5网页游戏(js)，游戏小程序，网页游戏引擎
采用了Three.js作为3D引擎库,结合tween.js作为配套的动画库,以及基于webpack的脚手架nowa链接作为技术支持.市面上比较成熟的3D库有Three.js和Babylon.js. B ...
flash游戏移植html5,分享将游戏从Flash移植到Unity的5个体会
作者:Alex Nichiporchik <No Time to Explain>最初是一款网页Flash游戏,之后转向Kickstarter平台筹资,成为Steam上的一款商业游戏.这款 ...

游戏1：HTML5制作网页游戏围住神经猫--createjs

游戏1：HTML5制作网页游戏围住神经猫--createjs相关推荐

最新文章

热门文章