js俄罗斯方块小游戏源码

实例介绍

【实例简介】记事本小游戏，

【实例截图】

from clipboard

【核心代码】<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta id="viewport" name="viewport" content="width=540,user-scalable=no,target-densitydpi=high-dpi">
<title>俄罗斯方块</title>

<script type="text/javascript">
var zt = false;
(function () {

var updatemovie = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
var can;
var paint;
var xch = 0;
var jsq = 0;
var fktype;
var fkstate;
var score = 0;
var speed = 1;
var x;
var W = 30;
var y;
var time = 0;
var j = 0;
var flag = 0;
var zm = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var tx = zm[0];
var keycom = {"38": "turn()", "40": "down()", "37": "left()", "39": "right()"};
var map = new Array2(13, 23, 0);//背景
var shapes = [
// i
[[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0]],
// s
[[0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0]],
// z
[[1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]],
// j
[[0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
// o
[[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
// l
[[1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
// t
[[0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 0, 0, 1, 0, 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]]
// ,
//
// [[0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
// [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
// [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0],
// [0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0]]
];

function getT() {
tx = zm[rmInt(26)];

}

function drawwall() {
for (var i = 0; i < 12; i ) {
map[i][21] = 2;
}
for (var j = 0; j < 22; j ) {
map[11][j] = 2;
map[0][j] = 2;
}
}

function makefk() {
fktype = rmInt(7)
fkstate = rmInt(4)
x = W;
y = 0;
getT();
if (gameover(x, y) == 1) {
alert("came over!");
newmap();
drawwall();
score = 0;

}
}

function newmap() {
for (var i = 0; i < 12; i ) {
for (var j = 0; j < 22; j ) {
map[i][j] = 0;
}
}
}

function turn() {
var tempturnState = fkstate;
fkstate = (fkstate 1) % 4;
mplay('xz');
if (blow(x, y, fktype, fkstate) == 1) {

}
if (blow(x, y, fktype, fkstate) == 0) {
fkstate = tempturnState;

}
}

function left() {
if (blow(x - 1 * W, y, fktype, fkstate) == 1) {
x = x - 1 * W;
mplay('mv');
}

}

// 右移的方法
function right() {
if (blow(x 1 * W, y, fktype, fkstate) == 1) {
x = x 1 * W;
mplay('mv');
}

}

// 下落的方法
function down() {
if (blow(x, y 1 * W, fktype, fkstate) == 1) {
y = y 1 * W;
delline();
}

if (blow(x, y 1 * W, fktype, fkstate) == 0) {
add(x, y, fktype, fkstate);
makefk();
delline();
}

}

// 是否合法的方法
function blow(x, y, blockType, turnState) {
for (var a = 0; a < 4; a ) {
for (var b = 0; b < 4; b ) {
if (((shapes[blockType][turnState][a * 4 b] == 1) && (map[Math.floor(x / W)
b 1][Math.floor(y / W) a] == 1))
|| ((shapes[blockType][turnState][a * 4 b] == 1) && (map[Math.floor(x / W)
b 1][Math.floor(y / W) a] == 2))) {

return 0;
}
}
}
return 1;
}

// 消行的方法
function delline() {
var c = 0;
for (var b = 0; b < 22; b ) {
for (var a = 0; a < 12; a ) {
if (map[a][b] == 1) {

c = c 1;
if (c == 10) {
xch = b;
score = 10;
mplay('xc');

}
}
}

c = 0;
}
}

// 判断你挂的方法
function gameover(x, y) {
if (blow(x, y, fktype, fkstate) == 0) {
return 1;
}
return 0;
}

// 把当前添加map
function add(x, y, blockType, turnState) {
var j = 0;
for (var a = 0; a < 4; a ) {
for (var b = 0; b < 4; b ) {
if (map[Math.floor(x / W) b 1][Math.floor(y / W) a] == 0) {
map[Math.floor(x / W) b 1][Math.floor(y / W) a] = shapes[blockType][turnState][j];
}
;
j ;
}
}
}

function getscore() {
return score;
}

// 画方块的的方法
function Paint(g) {
g.fillStyle = "snow";
g.font = "italic small-caps bold 50px Arial";
g.fillText("分数______", 500, 100);
g.fillText(getscore(), 650, 100);
g.fillText("所学字母______", 500, 200);
g.font = "italic small-caps bold 20px Arial";
g.fillText("玩法说明：←向左移动，→向右移动，↑变幻形状", 500, 350);
g.fillText('↓加速下落，横向满格消除,加十分', 500, 400);
g.fillStyle = "gold";
g.font = "italic small-caps bold 100px Arial";
g.fillText(tx, 750, 200);
// 画当前方块
for (var j = 0; j < 16; j ) {
if (shapes[fktype][fkstate][j] == 1) {

var grd = g.createRadialGradient((j % 4 Int(x / W) 1) * W, (Int(j / 4) Int(y / W)) * W, 2, (j % 4 Int(x / W) 1) * W 20, (Int(j / 4) Int(y / W)) * W 20, 40);
grd.addColorStop(0, "pink");
grd.addColorStop(0.6, "red");
grd.addColorStop(0.7, "pink");
grd.addColorStop(1, "white");
g.fillStyle = grd;
g.fillRect((j % 4 Int(x / W) 1) * W, (Int(j / 4) Int(y / W)) * W, W - 1, W - 1);
g.fillStyle = "snow";
g.font = "26px Arial";
g.fillText(tx, (j % 4 Int(x / W) 1) * W 5, (Int(j / 4) Int(y / W)) * W 23);

}

}

// 画已经固定的方块

for (var j = 0; j < 22; j ) {
for (var i = 0; i < 12; i ) {
if (map[i][j] == 1) {

if (xch != 0 && j == xch) {
var grd = g.createRadialGradient(i * W, j * W, 2, i * W 20, j * W 20, 40);
grd.addColorStop(0, "gold");
grd.addColorStop(0.3, "red");
grd.addColorStop(0.6, "gold");
grd.addColorStop(1, "yellow");
g.fillStyle = grd;
g.fillRect(i * W, j * W, W - 1, W - 1);
jsq ;
if (jsq > 300) {
for (var d = xch; d > 0; d--) {
for (var e = 0; e < 11; e ) {
map[e][d] = map[e][d - 1];

}
}
xch = 0;
jsq = 0;

}

} else {
var grd = g.createRadialGradient(i * W, j * W, 2, i * W 20, j * W 20, 40);
grd.addColorStop(0, "gold");
grd.addColorStop(0.3, "yellow");
grd.addColorStop(0.6, "red");
grd.addColorStop(1, "white");
g.fillStyle = grd;
g.fillRect(i * W, j * W, W - 1, W - 1);

}

g.fillStyle = "snow";
g.font = "italic small-caps bold 26px Arial";
g.fillText(tx, i * W 3, j * W 24);

}
if (map[i][j] == 2) {

var grd = g.createRadialGradient(i * W 20, j * W, 2, i * W 40, j * W 20, 40);
grd.addColorStop(0, "red");
grd.addColorStop(0.3, "yellow");
grd.addColorStop(0.5, "orange");
grd.addColorStop(1, "white");
g.fillStyle = grd;
g.beginPath();
g.arc(i * W 20, j * W, 20, (0 * Math.PI) / 180, (360 * Math.PI) / 180, true);
g.fill();

}
}
}

}

function update() {
drawmain();
time = speed;
if (time % 35 == 0) {

jt();
if(time>1000){ time=0;}
}

updatemovie(update);
}

function drawmain() {
if (null != paint) {
paint.clearRect(0, 0, 1000, 850);
paint.strokeStyle = "pink"

Paint(paint);
}
}

function init() {
can = document.getElementById("canvas");
paint = can.getContext("2d");
score = 0;
addmusic('xc', './mic/xc.wav', false);
addmusic('xz', './mic/xz2.mp3', false);
addmusic('mv', './mic/xz1.wav', false);
addmusic('bg', './mic/woniu.mp3', true);
addmusic('yw', './mic/yw.mp3', false);
makefk();
newmap();
drawwall();
mplay('bg');
}

onload = function () {
init();
update();

}

function jt() {
if (!zt) {

if (blow(x, y W, fktype, fkstate) == 1) {
y = y W;
delline();
}
;
if (blow(x, y W, fktype, fkstate) == 0) {

if (flag == 1) {
add(x, y, fktype, fkstate);
delline();
makefk();
flag = 0;
}
flag = 1;
}
}
}

document.onkeydown = function (e) {
eval(keycom[(e ? e : event).keyCode]);

};

})()

function Array2(a, b, m) {
console.log('d');
var k = [];
k.length = a;
for (var i = 0; i < a; i ) {
k[i] = new Array();
k[i].length = b;
}
if (null != m) {
for (var k2 = 0; k2 < a; k2 ) {
for (var p = 0; p < b; p ) {
k[k2][p] = m;
}
}
}
return k;
}

function rmInt(a) {
return Math.floor(Math.random() * a);
}
function Int(a) {
return Math.floor(a);

}
function getRandomColor() {
var c = '#';
var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
for (var i = 0; i < 6; i ) {
var cIndex = Math.round(Math.random() * 15);
c = cArray[cIndex];
}
return c;
}

function addmusic(nam, src, loop) {
var music = document.createElement("audio");

if (loop) {
var str = '<audio id="' nam '" controls="controls" style="display: none" loop="loop" src="' src '" type="audio/mpeg"></audio>';
music.innerHTML = str;

document.body.appendChild(music);
} else {

var str = '<audio id="' nam '" controls="controls" style="display: none" src="' src '" type="audio/mpeg"></audio>';
music.innerHTML = str;

document.body.appendChild(music);

}
}

function mplay(name) {

var music = document.getElementById(name);
// document.getElementById(name).play();

if (music != null) {
try {
document.getElementById(name).play();

} catch (err) {

console.log("音乐加载错误");
}

}
}

function mstop(name) {

var music = document.getElementById(name);

if (music != null) {
try {
document.getElementById(name).pause();

} catch (err) {

console.log("音乐加载错误");
}

}
}

</script>
</head>
<body style="text-align: center;overflow-y: hidden">
<div style="border-radius: 100px;background-color: greenyellow">
<button id="bt"
style="color:green;font-size:30px;position:absolute;left:720px;top:260px;z-index: 50;width: 100px;height: 50px;border: 0;background-color: gold;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
οnclick="javascript:var val=document.getElementById('bt').innerText;zt=(zt==false)? true:false;document.getElementById('bt').innerText=(document.getElementById('bt').innerText=='暂停')? '开始':'暂停'">
暂停
</button>
<button id="bt1"
style="color:green;font-size:30px;position:absolute;left:920px;top:260px;z-index: 50;width: 100px;height: 50px;border: 0;background-color: gold;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;"
οnclick="javascript:window.location.reload();">重玩
</button>
<button id="bt2"
style="color:green;font-size:30px;position:absolute;left:770px;top:450px;z-index: 50;width: 200px;height: 50px;border: 0;background-color: #ff5f5d;border-radius: 20px"
οnclick="javascript:mplay('yw');">跟我读字母
</button>

<canvas id="canvas" width="1000" height="850"
style="background-color:rgba(109, 116, 77, 0.74);border-radius: 50px"></canvas>
</div>
</body>

</html>

标签： 俄罗斯方块俄罗斯小游戏记事本游戏

实例下载地址

点此下载实例

不能下载？内容有错？点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

网友评论

我要评论

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见版权及免责申明

js俄罗斯方块小游戏源码

同类人气实例

实例介绍

实例下载地址