模仿微信"转你妹"游戏
<!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 模仿微信启动动画（转）
本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...
随机推荐
- BinaryReader 和BinaryWriter 读写类对象
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- SORT_AREA_RETAINED_SIZE
manual pga: SORT_AREA_RETAINED_SIZE specifies (in bytes) the maximum amount of the user global area ...
- MOS管体二极管的作用
这里有两种解释: 1.mos管本身自带有寄生二极管,作用是防止VDD过压的情况下,烧坏mos管,因为在过压对MOS管造成破坏之前,二极管先反向击穿,将大电流直接到地,从而避免MOS管被烧坏. 2.防止 ...
- 哈希，哈希表，哈希Map
数组: 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1):数组的特点是:寻址容易,插入和删除困难: 链表: 链表存储区间离散,占用内存比较宽松,故空间复杂 ...
- （转）未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService~~导出！解决方案。
今天刚到公司,打开VS2012准备些个小程序练练手,结果打开C#控制台程序创建时弹出个出错警告,于是呼赶紧跑到百度娘那里问问. 百度一番之后,找到了两篇文章: vs2012建立c++项目为啥会这样? ...
- [收藏转贴]WCFRESTFul服务搭建及实现增删改查
RESTful Wcf是一种基于Http协议的服务架构风格, RESTful 的服务通常是架构层面上的考虑. 因为它天生就具有很好的跨平台跨语言的集成能力,几乎所有的语言和网络平台都支持 HTTP ...
- 使用GO语言灵活批量ssh登录服务器执行操作
摘要: 在工作中时常需要登录服务器做一系列操作,每次输入ssh xxx总是很麻烦.这时候为什么不考虑写一个通用的小脚本呢? go语言是一门新兴语言,能够在很多地方发挥总用.初学go语言,做了这么一个小 ...
- BOM的来源是不可能出现的字符，GB2312双字节高位都是1，Unicode理论的根本缺陷导致UTF8的诞生
Unicode字符编码规范 http://www.aoxiang.org 2006-4-2 10:48:02Unicode是一种字符编码规范 . 先从ASCII说起.ASCII是用来表示英文字符的 ...
- Specify a culture in string conversion explicitly
Specify a culture in string conversion explicitly There are different methods of grouping symbols, l ...
- 数据库sql整体整理
create database 数据库 /* 数据库的服务.数据库文件. */ --修改表添加列 create table biao ( name ) ) ) --往表里增加一列 alter tabl ...