動

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

#main{margin: 100 auto 0 auto;border: 10px solid #030303;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();

版權聲明：本文博主原創文章，博客，未經同意不得轉載。

總結

以上是生活随笔為你收集整理的html推箱子怎么清除走过的,第九讲：HTML5该canvas推箱子原型实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。