您的位置：首页 > Web前端 > HTML

html 看你有多色游戏案例

2020-03-29 19:46 926 查看

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包获得。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

html 看你有多色 游戏案例

html 看你有多色游戏案例