html 网页游戏教程,HTML网页游戏测试2

心已赠人 2021-09-08 07:40 359阅读 0赞

本次测验为看你有多色，挑战你对颜色的分辨，游戏简洁明了

代码如下：

1：main.thml

无标题文档

2:app.js

/\*

\* @Author: your name

\* @Date: 2020-03-28 16:23:45

\* @LastEditTime: 2020-03-28 16:23:45

\* @LastEditors: your name

\* @Description: In User Settings Edit

\* @FilePath: \\3.14d:\\schoolsoftware\\2d\\3.28\\2\\app.js

\*/

// JavaScript Document

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

for (var indexY=0;indexY

var r = new Rect(n,color);//var r = new Rect(n,color,RectColor);

gameView.addChild(r);

r.x = indexX;

r.y = indexY;

if(r.y == y&&r.x == x)\{

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

/\*

\* @Author: your name

\* @Date: 2020-03-28 16:24:49

\* @LastEditTime: 2020-03-28 16:24:49

\* @LastEditors: your name

\* @Description: In User Settings Edit

\* @FilePath: \\3.14d:\\schoolsoftware\\2d\\3.28\\2\\Rect.js

\*/

// JavaScript Document

function Rect(n,color)\{ //function Rect(n,color,RectColor);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("\#ff0000");

break;

this.setColor = function(colorString)\{

this.graphics.beginFill(colorString); //开始绘制

this.graphics.drawRect(0,0,400/n-5,400/n-5);//左居左为0，上居上为0，右居左为宽400px/n-5(计算列数，-5是为了设置列间距)，下居上为400/n-5(正好为正方形)

this.graphics.endFill(); //结束绘制

//设置类型

this.getRectType = function()\{

return this.\_RectType;

this.setRectType(1);

//初始化

Rect.prototype = new createjs.Shape();

运行结果如下：

![8284972104a8f287b0e348f3f99a0abb.png][]

来源：oschina

链接：https://my.oschina.net/u/4461803/blog/3213673

[8284972104a8f287b0e348f3f99a0abb.png]: /images/20210813/5bcc939bf98140f4893e8018849b7bbf.png

html 网页游戏教程,HTML网页游戏测试2

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关基于HTML和JavaScript的小鱼冒险网页游戏设计

相关基于HTML5的消灭星星网页小游戏设计

相关基于html的火柴人羽毛球网页游戏设计

相关基于HTML的《尼尔机械纪元》游戏专题网页设计

相关网页游戏引擎

相关网页游戏服务器配置失败,网页游戏服务器怎么配置

相关 javascript实现html网页版的2048游戏源代码

相关 html+css+js实现网页拼图游戏

相关基于HTML5的捕鱼达人游戏网页版

相关 html 网页游戏教程,HTML网页游戏测试2