游戏简介及操作 ： 1.游戏分为五关，每关限时60秒。 2.游戏每关难度递增。 3.口红命中一个，增加10分。 4.口红命中重复位置即为失败。 开发工具 ：Pycharm 游戏截图 ： 游戏制作步骤 一、准备素材 搜集素材以及字体 二、游戏初始设置 1.设置游戏屏幕大小，游戏界面标题 SCREEN_WIDTH = 480 SCREEN_HEIGHT = 800 pygame.init() screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT)) # 游戏界面标题 pygame.display.set_caption('口红挑战') image_dir = 'image/lipstick/' ttf_dir = 'ttf/' index_background = pygame.image.load(image_dir+'index_background.jpg') index_background = pygame.transform.scale(index_background, (SCREEN_WIDTH, SCREEN_HEIGHT)) lipstick_head = pygame.image.load(image_dir+'lipstick_head.png') lipstick_head = pygame.transform.scale(lipstick_head, (400, 100)) game_begin = pygame.image.load(image_dir+'game_begin.png') game_begin = pygame.transform.scale(game_begin, (400, 200)) process_background = pygame.image.load(image_dir+'process_background.jpg') process_background = pygame.transform.scale(process_background, (SCREEN_WIDTH, SCREEN_HEIGHT)) fail_image = pygame.image.load(image_dir+'fail.png') fail_image = pygame.transform.scale(fail_image, (400, 164)) success_image = pygame.image.load(image_dir+'success.png') success_image = pygame.transform.scale(success_image, (400, 164)) man_image = pygame.image.load(image_dir+'manImg.jpg') man_image = pygame.transform.scale(man_image, (65, 65)) 2.60 个 0-59，绘制圆的图片 # 60 个 0-59 circle_img = pygame.image.load(image_dir+'circle.png') circle_pos = [120, 200] # 圆的图片 circle_rect = pygame.Rect(0, 0, 240, 240) # 口红 lipstick_img = pygame.image.load(image_dir + 'lipstick_zhijia.png') # 下一关 next_game_img = pygame.image.load(image_dir + '下一关.png') # 剩余口红 lipstick_remain = pygame.transform.scale(lipstick_img, (lipstick_img.get_width()//2, lipstick_img.get_height()//2)) lipstick_remain = pygame.transform.rotate(lipstick_remain, -140) lipstick_pos = [220, 660] lipstick_group = pygame.sprite.Group() lipstick_hit_group =pygame.sprite.Group() 3.游戏循环帧率设置，旋转速度 度数越大，旋转的却快 # 游戏循环帧率设置 clock = pygame.time.Clock() # 旋转速度 度数越大，旋转的却快 ROLL_SPEED = 6 4.设置口红数量，当前关 # 口红数量 LIPSTICK_COUNT = 6 # 当前关 CURRENT_INDEX = 1 5.创建口红类 class Lipstick(pygame.sprite.Sprite): def __init__(self, init_img, init_pos): pygame.sprite.Sprite.__init__(self) self.image = init_img self.rect = self.image.get_rect() self.rect.topleft = init_pos self.rect.top = self.rect.top-140 self.speed = 30 self.degrees = 0 self.roll_speed = ROLL_SPEED self.is_hit = False self.is_rotate = True def move(self): self.rect.top -= self.speed if self.rect.top < circle.rect.bottom: self.rect.top = circle.rect.bottom-55 def auto_move(self): self.degrees = self.degrees + self.roll_speed if self.degrees >= 360: self.degrees = 0 angle_ = 360 - self.degrees # 旋转角度 x = CENTER[0] + (RADIUS + 35) * math.cos(math.pi * (angle_ - 90) / 180) # 圆上一点横坐标 y = CENTER[1] - (RADIUS + 35) * math.sin(math.pi * (angle_ - 90) / 180) # 圆上一点纵坐标 center = (x, y) self.rect = pygame.transform.rotate(self.image, angle_).get_rect() self.rect.center = center screen.blit(pygame.transform.rotate(self.image, angle_), self.rect) 6.创建转盘类 class Circle(pygame.sprite.Sprite): def __init__(self, init_img, init_rect, init_pos): pygame.sprite.Sprite.__init__(self) self.image = init_img # 图片 self.rect = init_rect # 初始化图片所在的矩形 self.rect.topleft = init_pos # 初始化矩形的左上角坐标 self.speed = ROLL_SPEED # 初始化速度，这里是一个确定的值 self.is_hit = False # 玩家是否被击中 self.degrees = 0 def roll(self): self.degrees = self.degrees+self.speed if self.degrees >= 180: self.degrees = 0 angle_ = 180 - self.degrees # 旋转角度 self.rect = pygame.transform.rotate(self.image, angle_).get_rect() self.rect.center = (240, 320) screen.blit(pygame.transform.rotate(self.image, angle_), self.rect) 7.创建按钮类 class Button(object): def __init__(self, image, position): self.image = image self.position = position def is_click(self): point_x, point_y = pygame.mouse.get_pos() x, y = self.position w, h = self.image.get_size() in_x = x < point_x < x + w in_y = y < point_y < y + h return in_x and in_y def render(self): return self.is_click() begin_button = Button(game_begin, (55, 500)) lipstick_button = Button(lipstick_img, (220, 640)) next_game_button = Button(next_game_img, (140, SCREEN_HEIGHT//2)) is_index = True is_begin = False 8.定义游戏得分、游戏时间，自定义计时事件 # 定义游戏得分 score = 0 # 定义游戏时间 game_time = 60 # 自定义计时事件 COUNT = pygame.USEREVENT + 1 CLICK = pygame.USEREVENT + 2 circle = None 9.判断游戏循环退出的参数，是否生成支架，是否挑战成功 # 判断游戏循环退出的参数 running = True # 是否生成支架 is_produce = False produce_count = 0 direction = pygame.math.Vector2(0, 1) CENTER = (240, 320) RADIUS = 120 # 是否挑战成功 is_success = False is_next_game = False 10.定义下一关，口红数量和时间 def draw_next_game(): screen.blit(process_background, (0, 0)) screen.blit(man_image, (50, 30)) screen.blit(success_image, (40, 80)) score_font = pygame.font.Font(ttf_dir + '楷体GB2312.ttf', 36) score_text = score_font.render('得分:' + str(score), True, (128, 128, 128)) score_text_rect = score_text.get_rect() score_text_rect.topleft = [180, 320] screen.blit(score_text, score_text_rect) screen.blit(next_game_button.image, next_game_button.position) pygame.display.update() # 绘制口红数量 def draw_lipstick_count(): score_font = pygame.font.Font(ttf_dir + '楷体GB2312.ttf', 25) score_text = score_font.render('数量:' + str(LIPSTICK_COUNT-len(lipstick_hit_group)), True, (255, 0, 0)) score_text_rect = score_text.get_rect() score_text_rect.topleft = [SCREEN_WIDTH//10+50, SCREEN_HEIGHT*2//3+30] screen.blit(score_text, score_text_rect) screen.blit(lipstick_remain, [SCREEN_WIDTH//10, SCREEN_HEIGHT*2//3]) # 绘制时间 def draw_time(): time_font = pygame.font.Font(ttf_dir + '楷体GB2312.ttf', 36) time_text = time_font.render(str('时间:') + str(game_time), True, (128, 128, 128)) current_font = pygame.font.Font(ttf_dir + '楷体GB2312.ttf', 30) current_text = current_font.render(str('第') + str(CURRENT_INDEX)+'关', True, (0, 0, 255)) time_text_rect = time_text.get_rect() time_text_rect.topleft = [190, 30] current_text_rect = current_text.get_rect() current_text_rect.topleft = [360, 32] screen.blit(time_text, time_text_rect) screen.blit(current_text, current_text_rect) 三、设置游戏主循环 1.控制游戏最大帧率为60，首页展示， 绘制背景，中心点坐标，屏幕填充，绘制背景和头像，时间 while running: # 控制游戏最大帧率为60 clock.tick(60) # 首页展示 if is_index: # 绘制背景 screen.blit(index_background, (0, 0)) screen.blit(lipstick_head, (40, 50)) screen.blit(game_begin, (55, 500)) pygame.display.flip() # 游戏开始 if is_begin: direction.rotate_ip(6) # By 4 degrees. # 中心点坐标 ball_pos = [int(i) for i in CENTER + direction * (RADIUS + 50)] # 屏幕填充 screen.fill((0, 0, 0)) # 绘制背景和头像 screen.blit(process_background, (0, 0)) screen.blit(man_image, (25, 15)) # 绘制时间 draw_time() 2.口红按钮，击中的位置集 # 口红按钮 screen.blit(lipstick_button.image, lipstick_button.position) # 击中的位置集 degrees_list = [] for lip in lipstick_hit_group: degrees_list.append(lip.degrees) 3.支架，显示口红列表 # 支架 for lip in lipstick_group: # 支架移动 lip.move() # # 是否击中 if pygame.sprite.collide_rect(lip, circle): # 移除生成group lipstick_group.remove(lip) lip.is_hit = True # 判断是不是击中点是否重复 if 0 in degrees_list: running = False break else: score += 10 # 添加到击中group lipstick_hit_group.add(lip) # 显示口红列表 lipstick_group.draw(screen) for lip in lipstick_hit_group: lip.auto_move() 4.绘制得分、口红数量 # 绘制得分 score_font = pygame.font.Font(None, 36) score_text = score_font.render(str(score), True, (128, 128, 128)) score_text_rect = score_text.get_rect() score_text_rect.topleft = [100, 40] screen.blit(score_text, score_text_rect) # 绘制口红数量 放在这里有讲究 draw_lipstick_count() # 圆 if circle is None: circle = Circle(circle_img, circle_rect, circle_pos) 5.更换图片索引使有动画效果 circle.roll() roll_frequency += 2 if roll_frequency >= 60: roll_frequency = 0 pygame.display.update() 6.检测 KEYDOWN 事件: KEYDOWN 是 pygame.locals 中定义的常量，pygame.locals文件开始已经导入 （如果按下 Esc 那么主循环终止 检测 QUIT : 如果 QUIT, 终止主循环 每隔1秒发送一次自定义事件 重新设定时间 设置速度 是之前的1.5倍） for event in pygame.event.get(): # 检测 KEYDOWN 事件: KEYDOWN 是 pygame.locals 中定义的常量，pygame.locals文件开始已经导入 if event.type == pygame.KEYDOWN: # 如果按下 Esc 那么主循环终止 if event.key == pygame.K_ESCAPE: running = False # 检测 QUIT : 如果 QUIT, 终止主循环 elif event.type == pygame.QUIT: running = False pygame.quit() exit() elif event.type == pygame.MOUSEBUTTONDOWN and is_index: point_x, point_y = pygame.mouse.get_pos() is_begin = begin_button.render() if is_begin: is_index = False # 每隔1秒发送一次自定义事件 pygame.time.set_timer(COUNT, 1000) elif event.type == pygame.MOUSEBUTTONDOWN: if lipstick_button.render() and is_begin: lipstick = Lipstick(lipstick_img, lipstick_pos) lipstick_group.add(lipstick) if is_next_game and next_game_button.render(): is_begin = True # 重新设定时间 game_time = 60 # 设置速度 是之前的1.5倍 ROLL_SPEED = ROLL_SPEED * 1.5 CURRENT_INDEX += 1 LIPSTICK_COUNT += 2 circle = None elif event.type == COUNT: if game_time > 0: game_time -= 1 7.时间到游戏结束，判断是否挑战成功、口红数量是否全部点击完成 if game_time <= 0: # 时间到游戏结束 running = False # 判断是否挑战成功 if CURRENT_INDEX == 3 and len(lipstick_hit_group) == LIPSTICK_COUNT: # 稍微停顿一下 time.sleep(0.3) is_success = True running = False # 判断口红数量是否全部点击完成 if len(lipstick_hit_group) == LIPSTICK_COUNT: # 稍微停顿一下 time.sleep(0.3) is_begin = False is_next_game = True draw_next_game() for lip in lipstick_hit_group: lipstick_hit_group.remove(lip) print('-----over------') # screen.fill((0, 0, 0)) screen.blit(process_background, (0, 0)) screen.blit(man_image, (50, 30)) if is_success: screen.blit(success_image, (40, 80)) else: screen.blit(fail_image, (40, 80)) 8.绘制得分，显示得分并处理游戏退出 score_font = pygame.font.Font(ttf_dir+'楷体GB2312.ttf', 36) score_text = score_font.render('得分:'+str(score), True, (128, 128, 128)) score_text_rect = score_text.get_rect() score_text_rect.topleft = [180, 320] screen.blit(score_text, score_text_rect) # 显示得分并处理游戏退出 while 1: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() exit() pygame.display.update() 四、运行并测试 鼠标点击口红命中中间旋转的西瓜，若命中重复位置的口红，则失败，成功即进入下一关

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() { //判断方格为最大7个时（如果不是继续添加），清除所有子元素，重新调用addRect（）绘制方格 if (n < 7){ ++n; } gameView.removeAllChildren(); addRect(); } function getCanvasSize() {//获取canvas大小 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();//函数入口 ============================================================================== 运行截图：

开发工具： vscode 一、什么是Createjs？ 二、Createjs之围住神经猫 三、Createjs之看你有多色 一、什么是Createjs？ 官网： http://www.createjs.cc/ createjs中包含以下四个部分： EaselJS： 用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控） TweenJS： 用于做动画效果 SoundJS： 音频播放引擎 PreloadJS： 网站资源预加载 类似于SoundJS，PreloadJS，如果自己处理起来比较方便的话，也可以自己写，总的来说，它们相当于一个辅助作用，可选可不选。 二、Createjs之围住神经猫 游戏介绍： 1、首先这个游戏的玩法非常的简单，就是将图中的那只猫围住，不让它从旁边跑掉； 2、在游戏开始会有几个随机分布的点亮了的格子； 3、你需要点一个圈将猫围起来，这时候你会发现猫的姿势会改变； 4、而此时最终的目的就是让它无路可走 5、最终游戏结束了，看看你用了几步。 主要代码： 1.判断可以走的方向 function getMoveDir(cat){ //分别判断能走的位置 var distanceMap = []; //left var 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 up can =true; var x = cat.indexX , y = cat.indexY; while(true){ if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ can = false; distanceMap[MOVE_UP_LEFT] = can.indexY-y; break; } if(y%2 == 0){ x--; } y--; if(y<0 ||x<0){ break; } } if(can){ return MOVE_UP_LEFT; } //right up can =true; var x = cat.indexX , y = cat.indexY; while(true){ if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ can = false; distanceMap[MOVE_UP_RIGHT] = can.indexY-y; break; } if(y%2 == 1){ x++; } y--; if(y <0||x>8){ break; } } if(can){ return MOVE_UP_RIGHT; } //right can =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; } //ritht down can = 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 down can = 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.index; 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;dirmaxValue){ maxValue = distanceMap[dir]; maxDir = dir; } } if(maxValue > 1){ return maxDir; }else{ return MOVE_NONE; } } 2.判断游戏是否结束（走到边缘或者没有可以走的方向即为结束） 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("游戏结束"); } } 参考代码： 1.index.html 2.Circle.js /* * @Author: your name * @Date: 2020-03-29 20:08:48 * @LastEditTime: 2020-03-29 20:21:49 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: \html5\围住神经猫\Circle.js */ 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; 3.app.js 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; //定义7种状态 表示 移动位置 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 = []; //left var 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 up can =true; var x = cat.indexX , y = cat.indexY; while(true){ if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ can = false; distanceMap[MOVE_UP_LEFT] = can.indexY-y; break; } if(y%2 == 0){ x--; } y--; if(y<0 ||x<0){ break; } } if(can){ return MOVE_UP_LEFT; } //right up can =true; var x = cat.indexX , y = cat.indexY; while(true){ if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ can = false; distanceMap[MOVE_UP_RIGHT] = can.indexY-y; break; } if(y%2 == 1){ x++; } y--; if(y <0||x>8){ break; } } if(can){ return MOVE_UP_RIGHT; } //right can =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; } //ritht down can = 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 down can = 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.index; 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;dirmaxValue){ 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; //因为Y轴是 一前一后 所有判断一下 Y%2 c.x = indexY%2?indexX*55+25:indexX*55; c.y = indexY * 55; if(indexX == 4 && indexY == 4){ //中间出现一只猫 c.setCircleType(3); currentCat = c; }else if(Math.random() <0.1){ //让页面上随机出现 不能走的方框 方便围这只猫 c.setCircleType(Circle.TYPE_SELECTED); } //添加事件 c.addEventListener("click",circleClicked); } } } addCircles(); 运行结果如下： 三、Createjs之看你有多色 游戏介绍： 1、这款游戏的玩法就是找出所有风格中颜色比较淡的,主要是考你的眼力和注意力,这是游戏的界面 2、最开始是最简单的,轻易可以辨认出,越到后面就越难 3、方块越来越多,颜色的对比度也越来越小 主要代码： 添加方格（当方格数>7x7不在添加方格） 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;indexX0)?(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(); } 参考代码： 1.index.html

2.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(); 3.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); 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;indexX0)?(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(); 运行结果如下：

游戏介绍:看你有多色“是一款基于Html5技术、挑战人类眼球对颜色的分辨能力、好玩易上手的小游戏。据开发者Kaiser介绍，其游戏灵感是源于大家都很熟悉的找茬游戏，并根据 移动互联网的用户行为习惯进行简化，仅通过色块的颜色差距来进行“找色”。 main.html 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

来源：OSCHINA

发布时间：2020-03-28 16:34:00