模仿微信"转你妹"游戏
<!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 ...
- 一个模仿微信群聊的H5页面
开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...
- Android 模仿微信启动动画（转）
本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...
随机推荐
- usb host和usb device
S3C2440的数据手册将USB功能分为两章--usb host和usb device.具体什么意思呢? usb host: 微处理器作为usb主设备,可以挂接U盘之类的从属设备. usb devic ...
- Java笔记2 ： 泛型的体现，及其上限、下限、通配符
Java中的泛型是在jdk5.0引入的,语法不难,但是需要注意的细节有很多,这里写一下备忘. 首先是最简单的泛型类,泛型方法,泛型接口: //泛型接口的定义 interface MyInter< ...
- 使用EF6.0出现：CS0029 无法将类型“System.Data.Entity.Core.Objects.ObjectContext”隐式转换为“System.Data.Objects.ObjectContext”错误
这是因为EF6.0重构了一些命名空间后,和VS原有的实体数据模型模板不一致了(ObjectContext context = ((IObjectContextAdapter)dataContext). ...
- Java 文件操作大全
Java 文件操作大全 //1.创建文件夹 //import java.io.*; File myFolderPath = new File(str1); try { if (!myFolderPat ...
- C#中引用（ref关键字）参数
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 函数的参 ...
- hdu 4433
一道dp题,虽然知道是dp,但是不会做: 学习了ACM_cxlove大神的代码,终于明白了: 搬运工: dp[i][j][k]表示 前i个已经完全匹配,而这时候,第i+1个已经加了j位,第i+2位已经 ...
- android java 堆栈的实现
android和java不提供堆栈的实现,只提供了list,vector,deque得存储结构,对于以前做面向过程语言的程序员来说,总觉得缺少了些什么: Stack.java文件: public cl ...
- 让你的短信应用迎接Android 4.4(KitKat)
原文地址:Getting Your SMS Apps Ready for KitKat 发送和接收短信是手机最基本的功能,很多的开发者也开发了很多成功的应用来增强Android这一方面的体验.你们当中 ...
- Navicate使用注意事项
2. Navicat如何连接数据库:点击连接——>输入连接名,然后如果是本机不用更改localhost,如果是别的主机,要将对方 的ip地址输入,端口号3306不变,用户名root,密 ...
- BZOJ_1901_&_ZJU_2112_Dynamic_Rankings_(主席树+树状数组/线段树+(Treap/Splay))
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1901 给出一个长度为n的数列A,有m次询问,询问分两种:1.修改某一位置的值;2.求区间[l, ...