down | 易学教程

2D游戏制作：第五周作业

阅读更多关于 2D游戏制作：第五周作业

一，寻找不同颜色 1.index.html <!DOCTYPE html > < html lang ="en" > < head > < 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" > < title > Title </ title > </ head > < body > < div class ="main" > < canvas id ="gameView" ></ canvas > </ div > < script src ="app.js" ></ script > </ body > </ html > 2.app.js var stage = new createjs.Stage( "gameView" ); createjs.Ticker.setFPS( 30 ); createjs.Ticker.addEventListener(

10.HTML5-------围住猫游戏

阅读更多关于 10.HTML5-------围住猫游戏

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; //猫移动的6个方向 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

html游戏2

阅读更多关于 html游戏2

一，简易版的“围住神经猫” 新建JS：app.js, 编写主要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;//保存这只猫 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; //6个方向的参数 function getMoveDir(cat){ //分别判断能走的位置 var distanceMap = []; //left var can = true; for (var x = cat.indexX;x>=0;x--) { if(circleArr[x][cat

围住神经猫游戏

阅读更多关于围住神经猫游戏

运行结果： index.htm： <html lang="en"> <head> <meta charset="UTF-8"> <title>围住神经猫</title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas width="800px" height="800px" id="gameView"></canvas> <script src="app.js"></script> </body> </html>``` 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;//保存这只猫 var MOVE_NONE=

2D游戏开发（4） CreateJS函数库简单案例

阅读更多关于 2D游戏开发（4） CreateJS函数库简单案例

案例1：围住神经猫开发工具： VsCode 游戏介绍：蓝色圆圈表示神经猫，点击灰色圆圈围捕神经猫，不让神经猫逃走即可获胜。代码参考： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> 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

使用createJS制作游戏

阅读更多关于使用createJS制作游戏

使用createJS制作网页小游戏一、目录 1、createJS介绍 2、案例设计二、createJS介绍 1、什么是createJS？ CreateJS为CreateJS库，是一款为HTML5游戏开发的引擎。CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。 2、createJS都有什么？ easeljs ：主要用来sprites，动画，向量和位图的绘制，创建html5 canvas 上的交互体验 tweenjs：主要用来做动画效果 soundjs：音频播放引擎 preloadjs:网站资源预加载三、案例设计 1、围住神经猫 1.1实验结果图片 1.2实验代码 1.2.1 html关键部分代码连接createJS <script src="easeljs.min.js"></script> 连接circle和appjs函数 <script src="Circle.js"></script> <script src="app.js"></script> 创建canvas画布 <canvas id="gameView" width="800px" height="800px" ></canvas> 1.2.2 circle.js部分代码 function

pygame-打飞机游戏

阅读更多关于 pygame-打飞机游戏

通过左右键控制飞机移动 import pygame from sys import exit from pygame.locals import * import random # 定义类 SCREEN_WIDTH = 480 SCREEN_HEIGHT = 800 TYPE_SMALL = 1 TYPE_MIDDLE = 2 TYPE_BIG = 3 # 子弹类 class Bullet(pygame.sprite.Sprite): def __init__ ( self , bullet_img , init_pos): pygame.sprite.Sprite. __init__ ( self ) self .image = bullet_img self .rect = self .image.get_rect() self .rect.midbottom = init_pos self .speed = 10 def move ( self ): self .rect.top -= self .speed # 玩家类 class Player(pygame.sprite.Sprite): def __init__ ( self , plane_img , player_rect , init_pos): pygame.sprite.Sprite. __init__ (

2D小游戏开发学习笔记（5）-CreateJs游戏案例

阅读更多关于 2D小游戏开发学习笔记（5）-CreateJs游戏案例

一、围住神经猫游戏游戏玩法：玩法很简单，蓝色圆圈代表神经猫，通过点击周围圆圈把猫困住，就算游戏成功游戏效果逻辑梳理： 1、绘制规律的圆点； 2、设置神经猫位置； 3、设置逻辑 1）六个方向游走； 2）游戏结束：走到边界、围堵到中间不能跳动开发过程 1.下载CreateJs包文件包 2.围绕神经猫游戏页面元素的绘制 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;//保存这只猫 function addCircles(){ //生成游戏背景 for (var indexY = 0; indexY <9;indexY++ ) { for (var indexX = 0;indexX<9;indexX++) { var c = new Circle();

2D游戏开发：CreatJS简单效果案例

阅读更多关于 2D游戏开发：CreatJS简单效果案例

案例一：围住神经猫小游戏 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>围住神经猫</title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas width="800px" height="800px" id="gameView"></canvas> <script src="app.js"></script> </body> </html> 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;//保存这只猫

CreateJS 作业

阅读更多关于 CreateJS 作业

1.围住神经猫游戏简介：将图中的猫围住（蓝色圆），不让它从旁边跑掉，游戏开始会几个随机分布的格子（橙色），用它围住猫。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>game1</title> <script src="js/easeljs.min.js"></script> <script src="js/Circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html> 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; /

订阅 down