模仿微信"转你妹"游戏
<!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 模仿微信启动动画（转）
本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...
随机推荐
- Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架
Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架 本章节,我将通过示例介绍如何搭建mvvmlight开发环境.示例中的我会针对wpf ...
- 一个matlab数字图像处理程序的解释
clc; %clc是清除command window里的内容 clear all; %clear是清除workspace里的变量 close all; %close all来关闭所有已经打开的图像窗口 ...
- csu 10月 月赛 D 题 CX and girls
Description CX是要赶去上课,为了不迟到必须要以最短的路径到达教室,同时CX希望经过的路上能看到的学妹越多越好.现在把地图抽象成一个无向图,CX从1点出发,教室在N号点,告诉每个点上学妹的 ...
- Android使用开源框架加载图片
Android开发时,有时候需要们来加载网络图片,我们可以通过api的方式进行加载,但是前几天做的时候,发现了一个优秀的开源框架,可以帮助我们非常简单便捷的进行图片的加载,所以记录一下. 我所用的是: ...
- 前端性能优化（三）——传统 JavaScript 优化的误区
注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...
- bzoj2186
首先我们看到题目要求的是1~N!内有M!互质的个数 N!>M!,而我们是知道在M!以内与M!互质的数的个数,即phi(M!) 但是M!~N!内与M!互质的数有多少个呢? 对于每个互质的数,如果我 ...
- POJ_3045_Cow_Acrobats_(贪心)
描述 http://poj.org/problem?id=3045 n头牛,每头牛都有重量w[i]和力量s[i].把这n头牛落起来,每头牛会有一个危险值,危险值是它上面所有牛的重量和减去它的力量.求危 ...
- SharePoint 2010顶部链接导航栏的详细操作
转:http://www.360sps.com/Item/UseTopLink.aspx 在SharePoint 2010环境的页面中,导航链接总体上可以分为两类,一类是显示在左侧的快速启动栏,另一类 ...
- poj 2586 Y2K Accounting Bug
http://poj.org/problem?id=2586 大意是一个公司在12个月中,或固定盈余s,或固定亏损d. 但记不得哪些月盈余,哪些月亏损,只能记得连续5个月的代数和总是亏损(<0为 ...
- ASCII，Unicode和UTF-8字符编码
ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是 ...