HTML5游戏开发入门案例俄罗斯方块

HTML5游戏开发,基础入门案例俄罗斯方块

默认教学计划
964人加入学习
(0人评价)
价格 ¥99.00
教学计划

var groupLeftColIndex;

var groupRightColIndex;

function getGroupLeftCol(){

var arr=crtT[tIndex];

for(var cIndex=0;cIndex<4;cIndex++){

for(var rIndex=0;rIndex<4;rIndex++){

if(arr[rIndex][cIndex]==1)

return cIndex;

}

}

return 0;

}

function getGroupRightCol(){

var arr=crtT[tIndex];

for(var cIndex=0;cIndex<4;cIndex++){

for(var rIndex=0;rIndex<4;rIndex++){

if(arr[rIndex][cIndex]==1)

return cIndex;

}

}

return 0;

}

function init(){

.........

groupLeftColIndex = getGroupLeftCol();

groupRightColIndex = getGroupRightCol();

}

function keydownHandler(event){

....

KeyType.LEFT:

if(crtColIndex+groupLeftColIndex>0)
        crtColIndex--;

KeyType.RIGHT:          if(crtColIndex+groupRightColIndex<gridMaxCol-1)
        groupLeftColIndex--;

KeyType.DOWN:

crtRowIndex = getTargetRowIndex();

}

var count=0;

function gameTick(){

....

if(count % 20 ==0){

if(crtRowIndex<getTargetRowIndex()){

     crtRowIndex++;

}else{

    addToGrid();

    checkRows();

   crtRowIndex=0;

   crtColIndex=5;

}

}

}

 

 

 

[展开全文]

//消除

function checkRows(){

var rows=0;

for(var rIndex=rowNum-1;rIndex>0;

rIndex--){

if(checkRow(rIndex)){

  grid.splice(rIndex,1);

  rows++;

}

}

//清除后在数组开头添加空行

for(var i=0;i<rows;i++)

   grid.unshift(getRow());

}

//判断某一行是否有可消除的

function checkRow(rowIndex){

for(var cIndex=0;cIndex<colNum;cIndex++){

if(grid[rowIndex][cIndex]==0) 

return false;

}

return true;

}

[展开全文]
jeanne · 2015-06-19 · 消除 0

//获取目标行索引(要放置方块的行)

function getTopRow(colIndex){

for(var rIndex=0;rIndex<rowNum;rIndex++){

if(grid[rIndex][colIndex]==1)

return rIndex;

}

return rowNum-1;

}

function getTargetRowIndex(){

var min = 19;

for(var cIndex=0;cIndex<4;cIndex++){

if(getBottomRow(cIndex)!=-1 && getTopRow(crtColIndex+cIndex)-getBottomRow(cIndex)<min){

min = getTopRow(crtColIndex+cIndex)-getBottomRow(cIndex);

}

}

return min-1;

}

[展开全文]

function keydownHandler(e){

....

case 40:

crtRowIndex++;

if(crtRowIndex==getTargetRowIndex()){

addToGrid();

crtRowIndex=0;

crtColIndex = 5;

}

break;

}

 

 

var grid;

var rowNum=20,colNum=13;

function initGrid(){

grid=[];

for(var rIndex=0;rIndex<rowNum;rIndex++){

grid[rIndex]=getRow();

}

}

//获取一个空行

function getRow(){

var row=[];

for(var cIndex=0;cIndex<colNum;cIndex++){

row[cIndex]=0;

}

return row;

}

function drawGrid(){

for(var rIndex=0;rIndex<rowNum;rIndex++){

for(var cIndex=0;cIndex<colNum;cIndex++){

if(grid[rIndex][cIndex]==1)

drawBlock(rIndex,cIndex);

else

drawBlockBG(rIndex,cIndex);

}

}

}

 

function addToGrid(){

var arr = crtT[tIndex];

for(var rIndex=0;rIndex<4;rIndex++){

for(var cIndex=0;cIndex<4;cIndex++){

if(arr[rIndex][cIndex]==1)

grid[crtRowIndex+rIndex][crtColIndex+cIndex] = 1;

}

}

}

 

[展开全文]

function keydownHandler( e ){

case 40:

crtRolwIndex++;

break

}

 

//----检测方块组是否达到底部-----//

//获取方块组某一列的最下面的方块行数,没有则返回-1

function getBottomRow( colIndex ){

var arr = crtT[tIndex];

for(var rIndex=3;rIndex>=0;rIndex--){

if(arr[rIndex][colIndex]==1)

return rIndex;

}

return -1;

}

function getTargetRowIndex(){

var n=19, max=0;

for(var cIndex=0;cIndex<4;cIndex++){

if(getBottomRow(cIndex)>max)

max = getBottomRow(cIndex);

}

return n-max;

}

[展开全文]

window.onkeydown = keydownHandler;

//处理键盘事件

var KEY={LEFT:37,RIGHT:39,UP:38,DOWN:40

}

function keydownHandler( e ){

switch(e.keyCode){

case 37:

crtColIndex--;

break;

case 38:

tIndex = (tIndex+1)%tMax;

break;

case 39:

crtColIndex++;

break;

case 40:

break

}

}

 

var count = 0;

function gameTick(){

clearScree();

dragBG();

drawBlocks();

if(count%20==0)

crtRowIndex++;

}

var crtT = [[

[0,0,0,0],

[1,1,1,0],

[0,1,0,0],

[0,0,0,0]],[

[0,1,0,0],

[1,1,0,0],

[0,1,0,0],

[0,0,0,0]],[

[0,1,0,0],

[1,1,1,0],

[0,0,0,0],

[0,0,0,0]],[

[0,1,0,0],

[0,1,1,0],

[0,1,0,0],

[0,0,0,0]]

];

var tIndex = 0;

var tMax = crtT.length;

function drawBlocks(){

var arr = crtT[tIndex];

........

}

[展开全文]

function init(){ 

....... 

block = loadImage("res/block.png");

}

//绘制方块

var crtT=[ [0,0,0,0], [1,1,1,1], [0,1,0,0], [0,0,0,0] ]; 

var block; 

var itemWidth=18, itemHeight=18;

var crtRowIndex=0, crtColIndex=5;

function drawBlocks(){

for(var rIndex=0;rIndex<4;rIndex++){

for(var cIndex=0;cIndex<4;cIndex++){

if(crt[rIndex][cIndex]==1)

drawBlock(crtRowIndex+rIndex,crtColIndex+cIndex);

}

}

}

//指定位置绘制一个小方块

function drawBlock(rowIndex, colIndex){ 

context.drawImage(block,colIndex*itemWidth,rowIndex*itemHeight);

}

[展开全文]

var blockbg;

var cw = 234, ch=360;

function init(){

.......

blockbg = loadImage("res/blockbg2.png");

setInteval( gameTick, 1000 / 60 );

}

//循环机制

function gameTick(){

drawBG();

}

 

//绘制背景

function drawBG(){

context.drawImage(blockbg,0,0);

//另一种绘制方法

/*

var pattern = context.createPattern(blockbg,"repeat");

context.fillstyle = pattern;

context.fill();*/

}

//常用方法

function loadImage( src ){

var img = new Image();

img.src = src;

return img;

}

function clearScree(){

context.clearRect(0,0,cw,ch);

}

[展开全文]
jeanne · 2015-06-19 · 绘制背景 0

初始化

window.onload = init;

var canvas;

var context;

function init(){

canvas = document.getElementById("gameCanvas");

context = canvas.getContext("2d");

 

}

[展开全文]

授课教师

dzq
泰课联合创始人

课程特色

视频(10)
下载资料(1)

学员动态