js 俄罗斯方块 canvas
俄罗斯方块背景- canvans
第一次写不知道说些什么好,直接上代码了@_@...
jquery引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js"></script>index.js代码
$(function(){
//动态获取屏幕宽高
var screenWidth = $(window).width();
var screenHeight = $(window).height();
window.addEventListener('resize', function () {
screenWidth =
$(window).width();
screenHeight =
$(window).height();
});
//canvas插入到body中
$("body").prepend($(`<canvas id="Tetris"></canvas>`))
//数据准备
var data = {
speed: 200, //下落速度
linecolor: "#ddd",
borderColor: "#fff",
unitsize: 30,
baseColor: "#ddd",
boxTypeArr: [
[
[1, 4, 5, 8],
[0, 1, 5, 6],
],
[
[1, 2, 4, 5],
[1, 5, 6, 10],
],
[[0, 1, 4, 5]],
[
[1, 5, 9, 13],
[4, 5, 6, 7],
],
[
[1, 4, 5, 6],
[1, 5, 6, 9],
[0, 1, 2, 5],
[1, 4, 5, 9],
],
[
[1, 5, 8, 9],
[0, 4, 5, 6],
[0, 1, 4, 8],
[0, 1, 2, 6],
],
],
boxColorArr: [
"#ffc0cb",
"#dda0dd",
"#9370db",
"#6495ed",
"#fa8072",
"#ff8c00",
"#ddd",
"#ddd",
"#ddd",
"#ddd",
"#ddd",
"#ddd",
],
canvas: null,
ctx: null,
w: 0,
h: 0,
row: 0,
col: 0,
chequerArr: [],
nowbox: {},
timer: null,
}
//游戏初始化
TetrisInit();
//改变屏幕大小时重载游戏
$(window).bind('resize', TetrisInit)
$(window).keydown(function (event) {
switch (event.keyCode) {
case 65: //左
moveLeft();
break;
case 87: //上
moveUp();
break;
case 68: //右
moveRight();
break;
case 83: //下
movedown();
break;
};
})
//游戏初始化
function TetrisInit() {
if (!data.canvas) {
data.canvas = document.querySelector("#Tetris");
data.ctx = data.canvas.getContext("2d");
};
DataInit(); //数据初始化
drawline();
gameinit();
}
//数据初始化
function DataInit() {
data.w = screenWidth;
data.h = screenHeight;
data.row = Math.round(data.w / data.unitsize);
data.col = Math.round(data.h / data.unitsize);
data.canvas.width = data.w;
data.canvas.height = data.h;
for (let i = 0; i < data.col; i++) {
data.chequerArr[i] = [];
for (let j = 0; j < data.row; j++) {
data.chequerArr[i][j] = 0;
}
}
data.nowbox = {};
clearInterval(data.timer);
}
//画格子
function drawline() {
data.ctx.lineWidth = 1;
data.ctx.strokeStyle = data.linecolor;
for (let i = 0; i <= data.row; i++) {
data.ctx.moveTo(data.unitsize * i, 0);
data.ctx.lineTo(data.unitsize * i, data.h);
}
data.ctx.stroke();
for (let j = 0; j <= data.col; j++) {
data.ctx.moveTo(0, data.unitsize * j);
data.ctx.lineTo(data.w, data.unitsize * j);
}
data.ctx.stroke();
}
//下落方块初始化
function nowboxinit() {
let index = Math.floor(Math.random() * data.boxTypeArr.length);
data.nowbox.Type = data.boxTypeArr[index];
data.nowbox.state = 0;
data.nowbox.color = data.boxColorArr[index];
data.nowbox.initX = Math.floor(Math.random() * (data.row - 3));
data.nowbox.initY = -4;
}
//游戏载入
function gameinit() {
nowboxinit();
data.timer = setInterval(movedown, data.speed);
}
//下落方法
function movedown() {
if (
bang(
data.nowbox.initX,
data.nowbox.initY + 1,
data.nowbox.Type[data.nowbox.state]
)
) {
clearnbox();
data.nowbox.initY++;
drawbox();
} else {
for (
let i = 0;
i < data.nowbox.Type[data.nowbox.state].length;
i++
) {
let x =
data.nowbox.initX +
(data.nowbox.Type[data.nowbox.state][i] % 4);
let y =
data.nowbox.initY +
Math.floor(data.nowbox.Type[data.nowbox.state][i] / 4);
if (data.chequerArr[y]) {
data.chequerArr[y][x] = 1;
} else {
setInterval(data.timer);
return TetrisInit();
}
}
data.nowbox.color = data.baseColor;
drawbox();
fullLine();
nowboxinit();
}
}
//左移方法
function moveLeft() {
if (
bang(
data.nowbox.initX - 1,
data.nowbox.initY,
data.nowbox.Type[data.nowbox.state]
)
) {
clearnbox();
data.nowbox.initX--;
drawbox();
}
}
//右移方法
function moveRight() {
if (
bang(
data.nowbox.initX + 1,
data.nowbox.initY,
data.nowbox.Type[data.nowbox.state]
)
) {
clearnbox();
data.nowbox.initX++;
drawbox();
}
}
//变形方法
function moveUp() {
let s = data.nowbox.state;
if (s == data.nowbox.Type.length - 1) {
s = 0;
} else {
s++;
}
if (
bang(data.nowbox.initX, data.nowbox.initY, data.nowbox.Type[s])
) {
clearnbox();
data.nowbox.state = s;
drawbox();
}
}
//画方块方法
function drawbox() {
data.ctx.fillStyle = data.nowbox.color;
data.ctx.strokeStyle = data.borderColor;
var arr = data.nowbox.Type[data.nowbox.state];
for (let i = 0; i < arr.length; i++) {
let x = data.nowbox.initX + (arr[i] % 4);
let y = data.nowbox.initY + Math.floor(arr[i] / 4);
data.ctx.fillRect(
data.unitsize * x,
data.unitsize * y,
data.unitsize,
data.unitsize
);
data.ctx.strokeRect(
data.unitsize * x,
data.unitsize * y,
data.unitsize,
data.unitsize
);
}
}
//移出方块方法
function clearnbox() {
data.ctx.lineWidth = 1;
data.ctx.strokeStyle = data.linecolor;
data.ctx.fillStyle = data.nowbox.color;
var arr = data.nowbox.Type[data.nowbox.state];
for (let i = 0; i < arr.length; i++) {
let x = data.nowbox.initX + (arr[i] % 4);
let y = data.nowbox.initY + Math.floor(arr[i] / 4);
data.ctx.clearRect(
data.unitsize * x,
data.unitsize * y,
data.unitsize,
data.unitsize
);
data.ctx.strokeRect(
data.unitsize * x,
data.unitsize * y,
data.unitsize,
data.unitsize
);
}
}
//相撞判定
function bang(x, y, nowArr) {
for (let i = 0; i < nowArr.length; i++) {
if (y + Math.ceil((nowArr[i] + 1) / 4) > data.col) {
return false;
} else if (data.chequerArr[y + Math.floor(nowArr[i] / 4)] &&
data.chequerArr[y + Math.floor(nowArr[i] / 4)][
x + (nowArr[i] % 4)
]
) {
return false;
} else if (
x + (nowArr[i] % 4) < 0 ||
x + (nowArr[i] % 4) > data.row - 1
) {
return false;
}
}
return true;
}
//满行判定
function fullLine() {
let fullarr = [];
for (let i = data.chequerArr.length - 1; i > 0; i--) {
let isfull = true;
for (let j = 0; j < data.chequerArr[i].length; j++) {
if (data.chequerArr[i][j] == 0) {
isfull = false;
break;
}
}
if (isfull) {
fullarr.push(i);
}
}
if (fullarr.length) {
for (let i = 0; i < fullarr.length; i++) {
let arr = data.chequerArr.splice(fullarr[i], 1);
data.chequerArr.unshift(arr.fill(0));
}
data.ctx.clearRect(0, 0, data.w, data.h);
drawline();
data.ctx.fillStyle = data.baseColor;
data.ctx.strokeStyle = data.borderColor;
for (let i = 0; i < data.col; i++) {
for (let j = 0; j < data.row; j++) {
if (data.chequerArr[i][j] == 1) {
data.ctx.fillRect(
data.unitsize * j,
data.unitsize * i,
data.unitsize,
data.unitsize
);
data.ctx.strokeRect(
data.unitsize * j,
data.unitsize * i,
data.unitsize,
data.unitsize
);
}
}
}
}
}
})
效果和我的博客背景一样
