HTML5推箱子格子计算,第九讲：HTML5该canvas推箱子原型实现

动

body{margin:0px;padding:0px;}

#main{margin: 100 auto 0 auto;border: 10px solid #030303;width:300px;height:460px;border-radius:10px;}

var canvas = document.getElementById('mc');

var cxt = canvas.getContext('2d');

//定义背景的颜色

function init_background(){

cxt.fillStyle = "#6A6C6C";

cxt.fillRect(0,0,canvas.width,canvas.height);

cxt.fill();

}

//定义移动的红方块

var red_diamond = {

x : 200,

y : 100,

width : 20,

height : 20,

color : "#FC0000"

}

//初始化红小方块的方法

function init_red_diamond(){

cxt.fillStyle = red_diamond.color;

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

//定义将被空方块移动的黄方块

var yellow_diamond = {

x : 100,

y : 200,

width : 20,

height : 20,

color : "#F2FA0A"

}

//初始化黄小方块的方法

function init_yellow_diamond(){

cxt.fillStyle = yellow_diamond.color;

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

//消除黄小方块的方法

function clear_yellow_diamond(){

cxt.fillStyle = "#6A6C6C";

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

//消除红小方块的方法

function clear_red_diamond(){

cxt.fillStyle = "#6A6C6C";

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

//定义四个方法，分别控制红小方块四个方向的移动

function move_right_red_diamond (){//右边

if(red_diamond.x + red_diamond.width + 5 <= canvas.width){

//清除曾经的方块

clear_red_diamond();

cxt.fillStyle = red_diamond.color;

red_diamond.x += 20;

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

}

function move_left_red_diamond(){

if(red_diamond.x - 5 >= 0 ){

//清除曾经的方块

clear_red_diamond();

cxt.fillStyle = red_diamond.color;

red_diamond.x -= 20;

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

}

function move_up_red_diamond(){

if(red_diamond.y - 5 >= 0 ){

//清除曾经的方块

clear_red_diamond();

cxt.fillStyle = red_diamond.color;

red_diamond.y -= 20;

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

}

function move_down_red_doamond(){

if(red_diamond.y + red_diamond.height + 5 <= canvas.height){

//清除曾经的方块

clear_red_diamond();

cxt.fillStyle = red_diamond.color;

red_diamond.y += 20;

cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);

cxt.fill();

}

}

//定义一个方法用户推断红方块在小方块的哪一方

var red_diamond_to_yellow_diamond = "";

function red_diamond_position (){

if(red_diamond.x + red_diamond.width == yellow_diamond.x && red_diamond.y == yellow_diamond.y){

red_diamond_to_yellow_diamond = "left";

}

if(red_diamond.x == yellow_diamond.x + yellow_diamond.width && red_diamond.y == yellow_diamond.y){

red_diamond_to_yellow_diamond = "right";

}

if(red_diamond.y + red_diamond.height == yellow_diamond.y && red_diamond.x == yellow_diamond.x){

red_diamond_to_yellow_diamond = "top";

}

if(red_diamond.y == yellow_diamond.y + yellow_diamond.height && red_diamond.x == yellow_diamond.x){

red_diamond_to_yellow_diamond = "down";

}

}

//定义四个方法来移动黄色小方块

function move_right_yellow_diamond (){//右边

if(yellow_diamond.x + yellow_diamond.width + 5 <= canvas.width){

//清除曾经的方块

clear_yellow_diamond();

cxt.fillStyle = yellow_diamond.color;

yellow_diamond.x += 20;

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

}

function move_left_yellow_diamond(){

if(yellow_diamond.x - 5 >= 0 ){

//清除曾经的方块

clear_yellow_diamond();

cxt.fillStyle = yellow_diamond.color;

yellow_diamond.x -= 20;

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

}

function move_up_yellow_diamond(){

if(yellow_diamond.y - 5 >= 0 ){

//清除曾经的方块

clear_yellow_diamond();

cxt.fillStyle = yellow_diamond.color;

yellow_diamond.y -= 20;

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

}

function move_down_yellow_doamond(){

if(yellow_diamond.y + yellow_diamond.height + 5 <= canvas.height){

//清除曾经的方块

clear_yellow_diamond();

cxt.fillStyle = yellow_diamond.color;

yellow_diamond.y += 20;

cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);

cxt.fill();

}

}

//获取键盘点击的事件，以推断小方块想哪里移动

var direction = "";

document.onkeydown = function (e) {

red_diamond_position();

if (e.keyCode == 39 ){

if(red_diamond_to_yellow_diamond == "left" && red_diamond.x + red_diamond.width * 2 + 5 <= canvas.width ){

move_right_yellow_diamond();

move_right_red_diamond();

}else{

if(red_diamond_to_yellow_diamond != "left"){

red_diamond_to_yellow_diamond = "";

move_right_red_diamond();

}

}

};

if (e.keyCode == 37 ) {

if(red_diamond_to_yellow_diamond == "right" && red_diamond.x - 5 - red_diamond.width >= 0){

move_left_yellow_diamond();

move_left_red_diamond();

}else{

if(red_diamond_to_yellow_diamond != "right"){

move_left_red_diamond();

red_diamond_to_yellow_diamond = "";

}

}

};

if (e.keyCode == 38 ){

if(red_diamond_to_yellow_diamond == "down" && red_diamond.y - 5 - red_diamond.height >= 0){

move_up_yellow_diamond();

move_up_red_diamond();

}else{

if(red_diamond_to_yellow_diamond != "down"){

move_up_red_diamond();

red_diamond_to_yellow_diamond = "";

}

}

};

if (e.keyCode == 40 ){

if(red_diamond_to_yellow_diamond == "top" && red_diamond.y + red_diamond.height * 2 + 5 <= canvas.height){

move_down_yellow_doamond();

move_down_red_doamond();

}else{

if(red_diamond_to_yellow_diamond != "top"){

move_down_red_doamond();

red_diamond_to_yellow_diamond = "";

}

}

};

}

//初始化

init_background();

init_red_diamond();

init_yellow_diamond();

move_diamond();

版权声明：本文博主原创文章，博客，未经同意不得转载。