![模仿微信"转你妹"游戏](https://image.shishitao.com:8440/aHR0cDovL2Jic21heC5pa2FmYW4uY29tL3N0YXRpYy9MM0J5YjNoNUwyaDBkSEF2YVcxbkxtSnNiMmN1WTNOa2JpNXVaWFF2TWpBeE5UQTJNRFV4TkRBMU1qZ3hNemMvZDJGMFpYSnRZWEpyTHpJdmRHVjRkQzloU0ZJd1kwUnZka3d5U25OaU1tTjFXVE5PYTJKcE5YVmFXRkYyWkVkc2FHSnRNV2hPYWsxM0wyWnZiblF2TldFMlREVk1NbFF2Wm05dWRITnBlbVV2TkRBd0wyWnBiR3d2U1RCS1FsRnJSa05OUVQwOUwyUnBjM052YkhabEx6Y3dMMmR5WVhacGRIa3ZRMlZ1ZEdWeS5qcGc%3D.jpg?w=700&webp=1 "模仿微信"转你妹"游戏")
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>微信小游戏-转你妹</title>
</head>
<body>
<div>
<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>
<script> var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); var index = 0;
var timer;
var iStop = false;
var ladderLen = 60;
var outerLen = 200;
var boxLen = 20;
var score = 0;
var isCal = false; var ladderA = {'degree':0, 'boxes':[{'index':1,'color':'red'}, {'index':2,'color':'green'}]};
var ladderB = {'degree':60, 'boxes':[{'index':1,'color':'yellow'}]};
var ladderC = {'degree':120, 'boxes':[]};
var ladderD = {'degree':180, 'boxes':[]};
var ladderE = {'degree':240, 'boxes':[]};
var ladderF = {'degree':300, 'boxes':[{'index':1,'color':'blue'}]}; var ladderX = [{'degree':300, 'index':7, 'color':'red'}, {'degree':240, 'index':7, 'color':'red'}]; var colors = ['yellow', 'blue', 'green', 'red']; function drawBg(){ /*********外部六边形**********/
cxt.save();
cxt.beginPath();
cxt.fillStyle = 'gray';
cxt.translate(300, 300); cxt.moveTo(outerLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(outerLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(outerLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(outerLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(outerLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(outerLen, 0); cxt.closePath();
cxt.fill();
cxt.restore(); /********内部六边形***********/
cxt.save();
cxt.beginPath();
cxt.translate(300, 300); cxt.moveTo(ladderLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen, 0); cxt.closePath();
cxt.fill();
cxt.restore();
} function drawLadder(ladderA){
for(var i=0; i<ladderA.boxes.length; i++){
cxt.save();
cxt.translate(300, 300);
cxt.fillStyle = ladderA.boxes[i].color;
cxt.beginPath();
cxt.rotate(ladderA.degree*Math.PI/180);
cxt.moveTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
cxt.rotate(60*Math.PI/180);
cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
cxt.lineTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
cxt.closePath();
cxt.fill();
cxt.restore();
}
} // 画下落的梯形
function drawX(){
isCal = true;
var _ladderX = [];
for(var i=0; i<ladderX.length; i++){ cxt.save();
cxt.translate(300, 300);
cxt.fillStyle = ladderX[i].color;
cxt.beginPath();
cxt.rotate(ladderX[i].degree * Math.PI / 180);
cxt.moveTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
cxt.rotate(60 * Math.PI / 180);
cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
cxt.lineTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
cxt.closePath();
cxt.fill();
cxt.restore(); var isDel = false;
var _ladder = qryLadder(ladderX[i].degree);
if(_ladder.boxes.length == 0){
if(ladderX[i].index == 1){
isDel = true;
_ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
getScore();
}
}else if(_ladder.boxes.length == 7 && ladderX[i].index == 7){
iStop = true;
alert('game over!');
}else if((_ladder.boxes[_ladder.boxes.length-1].index + 1) == ladderX[i].index){
isDel = true;
_ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
getScore();
} if(!isDel){
_ladderX.push(ladderX[i]);
} if(index%20 == 0){
ladderX[i].index -= 1;
} } ladderX = _ladderX; if(ladderX.length == 0){
randomX();
} isCal = false;
} // 随机下落的梯形
function randomX(){
ladderX = [];
var degree = Math.floor(Math.random()*6)*60;
var color = colors[Math.floor(Math.random()*4)]; var num = Math.round(Math.random()*3);
for(var i=0; i<num; i++){
var _degree = degree + i*60;
if(_degree >= 360){
_degree -= 360;
} ladderX.push({'degree':_degree, 'index':7, 'color':color});
}
console.log(ladderX);
} // 依据degree查找相应的梯形
function qryLadder(degree){
if(ladderA.degree == degree){
return ladderA;
}
if(ladderB.degree == degree){
return ladderB;
}
if(ladderC.degree == degree){
return ladderC;
}
if(ladderD.degree == degree){
return ladderD;
}
if(ladderE.degree == degree){
return ladderE;
}
if(ladderF.degree == degree){
return ladderF;
}
} function draw(){
drawBg();
drawLadder(ladderA);
drawLadder(ladderB);
drawLadder(ladderC);
drawLadder(ladderD);
drawLadder(ladderE);
drawLadder(ladderF);
drawX();
drawScore();
} function erase(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
} function add60(ladder){
if(ladder.degree == 300){
ladder.degree = 0;
}else{
ladder.degree += 60;
}
} function del60(ladder){
if(ladder.degree == 0){
ladder.degree = 300;
}else{
ladder.degree -= 60;
}
} function getScore(){
var minLen = ladderA.boxes.length;
minLen = ladderB.boxes.length<minLen?ladderB.boxes.length:minLen;
minLen = ladderC.boxes.length<minLen?ladderC.boxes.length:minLen;
minLen = ladderD.boxes.length<minLen?ladderD.boxes.length:minLen;
minLen = ladderE.boxes.length<minLen?ladderE.boxes.length:minLen;
minLen = ladderF.boxes.length<minLen?ladderF.boxes.length:minLen; score += minLen*10;
for(var i=0; i<minLen; i++){
ladderA.boxes.shift();
for(var j=0; j<ladderA.boxes.length; j++){
ladderA.boxes[j].index --;
}
ladderB.boxes.shift();
for(var j=0; j<ladderB.boxes.length; j++){
ladderB.boxes[j].index --;
}
ladderC.boxes.shift();
for(var j=0; j<ladderC.boxes.length; j++){
ladderC.boxes[j].index --;
}
ladderD.boxes.shift();
for(var j=0; j<ladderD.boxes.length; j++){
ladderD.boxes[j].index --;
}
ladderE.boxes.shift();
for(var j=0; j<ladderE.boxes.length; j++){
ladderE.boxes[j].index --;
}
ladderF.boxes.shift();
for(var j=0; j<ladderF.boxes.length; j++){
ladderF.boxes[j].index --;
}
}
} function drawScore(){
cxt.save();
cxt.font="40px Verdana";
cxt.fillStyle = 'skyblue';
cxt.fillText(score + "", 280, 314);
cxt.restore();
} var last = new Date();
document.onkeydown = (function(e){
var now = new Date();
if((now.getTime() - last.getTime()) < 200 || isCal){
return;
}
last = now;
switch(e.which){
case 39:
del60(ladderA);
del60(ladderB);
del60(ladderC);
del60(ladderD);
del60(ladderE);
del60(ladderF);
break;
case 37:
add60(ladderA);
add60(ladderB);
add60(ladderC);
add60(ladderD);
add60(ladderE);
add60(ladderF);
break;
}
}); window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame; window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame; function animate() {
index ++;
erase();
draw();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
} animate();
</script>
</div>
</body>
</html>
模仿微信"转你妹"游戏的更多相关文章
-
自定义控件(模仿微信ToggleButton控件)
弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...
-
（转）ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果
场景:移动支付需要对二维码的生成与部署有所了解,掌握目前主流的二维码生成技术. 1 ZXing 生成二维码 首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老 ...
-
Android Studio精彩案例(三)《模仿微信ViewPage+Fragment实现方式二》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 写在前面的话:此专栏是博主在工作之余所写,每一篇文章尽可能写的思路清晰一些,属于博主的"精华"部分,不同于以往专栏 ...
-
微信小程序开发(5) 2048游戏
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
-
css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
-
js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
-
微信小程序——【百景游戏小攻略】
微信小程序--[百景游戏小攻略] 本次课程小项目中的图片以及文章还未获得授权!请勿商用!未经授权,请勿转载! 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE ...
-
Android 模仿微信启动动画（转）
本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...
-
wing带你玩转自定义view系列（3）模仿微信下拉眼睛
发现了爱神的自定义view系列,我只想说一个字:凸(艹皿艹 ) !!相见恨晚啊,早看到就不会走这么多弯路了 另外相比之下我这完全是小儿科..所以不说了,这篇是本系列完结篇....我要从零开始跟随爱哥脚 ...
随机推荐
-
AutoMapper(二)
返回总目录 首先,先创建一个控制台项目,引用AutoMapper程序集,创建三个类User,UserDto,UserMappingProfile,下面的知识点的演示都以此项目为基础,代码分别如下: n ...
-
js中== 和===中的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
-
maven filter 乱码，MalformedByteSequenceException: Invalid byte 3 of 3-byte UTF-8 sequence.
<plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...
-
linkbutton datagrid showdialog 行效果
protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e) { ListItemType itemTy ...
-
The Socket API, Part 3: Concurrent Servers
转:http://www.linuxforu.com/2011/10/socket-api-part-3-concurrent-servers/ By Pankaj Tanwar on October ...
-
Nodejs与Net 和SQL 交互利器Edge.js
https://github.com/tjanczuk http://www.cnblogs.com/joylee/archive/2013/02/05/msnodesql.html edge.js这 ...
-
adb安装和卸载apk的方式
昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: D:\testApk>adb uninstall HelloWorld Failure 后来发现原来卸载程序时,只adb ...
-
dropdownlist绑定和选中
最近在使用dropdownlist控件,对于这个控件,目前我知道的会使用两种方式去绑定数据,现在将这两种方式分享给大家: 现在是后台数据绑定 protected void BindCarID() { ...
-
怎样清除SWAP里的文件
在vim 编辑一个文件时断了网,文件就留在SWAP里,但我再vim这个文件保存后,再打开时又提示SWAP里有这文件了,此时swapoff -a后再ls -al查看,把文件所在目录里*.swp结尾的文件 ...
-
OpenFace库(Tadas Baltrusaitis)中基于Haar Cascade Classifiers进行人脸检測的測试代码
Tadas Baltrusaitis的OpenFace是一个开源的面部行为分析工具.它的源代码能够从 https://github.com/TadasBaltrusaitis/OpenFace 下载. ...