html 看你有多色 游戏案例
时间: 2020-03-29来源:OSCHINA
前景提要
html <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <script src="easeljs.min.js"></script> <script src="Rect.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <canvas id="gameView"></canvas> </div> <script src="app2.js"></script> </body> </html>
Rect.js function Rect(n,color,Rectcolor){ createjs.Shape.call(this); this.setRectType=function(type){ this._RectType=type; switch(type){ case 1: this.setColor(color); break; case 2: this.setColor(Rectcolor); break; } } this.setColor=function(colorString){ this.graphics.beginFill(colorString); this.graphics.drawRect(0,0,getSize()/n-2,getSize()/n-2); this.graphics.endFill(); } this.getRectType=function(){ return this._RectType; } this.setRectType(1); } Rect.prototype=new createjs.Shape();
app2.js var stage=new createjs.Stage('gameView'); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener('tick',stage); var gameView=new createjs.Container(); stage.addChild(gameView); function startGame(){ getCanvasSize(); n=2; addRect(); } function addRect(){ var c1=parseInt(Math.random()*1000000); var color=('#'+c1); 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 c2=parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY)); var Rectcolor=('#'+c2); var c3=parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY)); var Rectcolor=('#'+c3); var r=new Rect(n,color,Rectcolor); gameView.addChild(r); r.x=indexX; r.y=indexY; if(r.x==x&&r.y==y){ r.setRectType(2); } r.x=indexX*(getSize()/n); r.y=indexY*(getSize()/n); if(r.getRectType()==2){ r.addEventListener('click',clickRect) } } } } function clickRect(){ if(n<7){ ++n; } gameView.removeAllChildren(); addRect(); } function getCanvasSize(){ var gView=document.getElementById("gameView"); gView.height=window.innerHeight-4; gView.width=window.innerWidth-4; } function getSize(){ if(window.innerHeight>=window.innerWidth){ return window.innerWidth; }else { return window.innerHeight; } } startGame();
style.css *{ margin: 0px; padding: 0px; } .main{ width: 80%; margin: 0px 2px; } #gameView{ width: 100%; margin: 20px auto; }
效果

easeljs.min.js可下载createjs包获得。

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

热门排行