three编写一个微信跳一跳小游戏效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three编写一个微信跳一跳小游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">

<style>
    body{
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.mask{
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 500px;
	height: 500px;
	border-radius: 20px;
	background: rgba(0,0,0,0.4);
	border: 5px solid rgba(255,255,255,0.05);

}
.score-container{
	color: #ffffff;
	/* color: #232323; */
	text-align: center;
}
.title{
  font-size: 20px;
  font-weight: bold;
  /* color: rgba(255,255,255,0.6); */
}
.score{
	font-size: 100px;
	font-weight: bold;
	margin-top: 20px;
}
button.restart{
	width: 200px;
	height: 40px;
	border-radius: 20px;
	background: white;
	border: none;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
}
button.restart:hover{
	color:#232323;
}
.info{
  margin: 20px 0;
  position: absolute;
  text-align: center;
  width:100%;
  color: rgba(255,255,255,0.2);
}
.info a{
  /* display: block; */
  font-size: 16px;
  line-height: 28px;
  color: rgba(255,255,255,0.2);
	/* color: #232323; */
  text-decoration: none;
}
a.title{
  font-size: 20px;
  font-weight: bold;
}
.score-gaming{
	margin-top: 10px;
	color: rgba(255,255,255,1);
	font-size: 16px;
}
</style>
</head>
<body>
  <div class="mask">
    <div class="content">
      <div class="score-container">
				<p class="title">本次得分</p>
				<p>历史最高: <span class="record">0</span></p>
	    	<p class="score">0</p>
	    </div>
	  	<button class="restart">
	  		重新开始
	  	</button>
    </div>
  </div>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/createjs-1.3.2.js"></script>
	<script>
	
	// 通过canvas创建材质
var canvasTexture = null;

function clock()
{
	canvasTexture = document.createElement('canvas');
	canvasTexture.width=200;
	canvasTexture.height=200;
	var ctx = canvasTexture.getContext('2d');
	if(ctx){
		var timerId;
		var frameRate = 60;
		function canvObject(){
			this.x = 0;
			this.y = 0;
			this.rotation = 0;
			this.borderWidth = 2;
			this.borderColor = '#000000';
			this.fill = false;
			this.fillColor = '#ff0000';
			this.update = function(){
			if(!this.ctx)throw new Error('你没有指定ctx对象。');
			var ctx = this.ctx
			ctx.save();
			ctx.lineWidth = this.borderWidth;
			ctx.strokeStyle = this.borderColor;
			ctx.fillStyle = this.fillColor;
			ctx.translate(this.x, this.y);
			if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
			if(this.draw)this.draw(ctx);
			if(this.fill)ctx.fill();
			ctx.stroke();
			ctx.restore();
			}
		};
		function Line(){};
			Line.prototype = new canvObject();
			Line.prototype.fill = false;
			Line.prototype.start = [0,0];
			Line.prototype.end = [5,5];
			Line.prototype.draw = function(ctx){
			ctx.beginPath();
			ctx.moveTo.apply(ctx,this.start);
			ctx.lineTo.apply(ctx,this.end);
			ctx.closePath();
		};

		function Circle(){};
			Circle.prototype = new canvObject();
			Circle.prototype.draw = function(ctx){
			ctx.beginPath();
			ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
			ctx.closePath();
		};

		var circle = new Circle();
		circle.ctx = ctx;
		circle.x = 100;
		circle.y = 100;
		circle.radius = 90;
		circle.fill = true;
		circle.borderWidth = 6;
		circle.fillColor = '#ffffff';

		var hour = new Line();
		hour.ctx = ctx;
		hour.x = 100;
		hour.y = 100;
		hour.borderColor = "#000000";
		hour.borderWidth = 10;
		hour.rotation = 0;
		hour.start = [0,20];
		hour.end = [0,-50];

		var minute = new Line();
		minute.ctx = ctx;
		minute.x = 100;
		minute.y = 100;
		minute.borderColor = "#333333";
		minute.borderWidth = 7;
		minute.rotation = 0;
		minute.start = [0,20];
		minute.end = [0,-70];

		var seconds = new Line();
		seconds.ctx = ctx;
		seconds.x = 100;
		seconds.y = 100;
		seconds.borderColor = "#ff0000";
		seconds.borderWidth = 4;
		seconds.rotation = 0;
		seconds.start = [0,20];
		seconds.end = [0,-80];

		var center = new Circle();
		center.ctx = ctx;
		center.x = 100;
		center.y = 100;
		center.radius = 5;
		center.fill = true;
		center.borderColor = 'orange';

		for(var i=0,ls=[],cache;i<12;i++){
			cache = ls[i] = new Line();
			cache.ctx = ctx;
			cache.x = 100;
			cache.y = 100;
			cache.borderColor = "orange";
			cache.borderWidth = 2;
			cache.rotation = i * 30;
			cache.start = [0,-70];
			cache.end = [0,-80];
		}

		timerId = setInterval(function(){
			// 清除画布
			ctx.clearRect(0,0,200,200);
			// 填充背景色
			ctx.fillStyle = 'orange';
			ctx.fillRect(0,0,200,200);
			// 表盘
			circle.update();
			// 刻度
			for(var i=0;cache=ls[i++];)cache.update();
			// 时针
			hour.rotation = (new Date()).getHours() * 30;
			hour.update();
			// 分针
			minute.rotation = (new Date()).getMinutes() * 6;
			minute.update();
			// 秒针
			seconds.rotation = (new Date()).getSeconds() * 6;
			seconds.update();
			// 中心圆
			center.update();
		},(1000/frameRate)|0);
	}else{
	alert(&#.........完整代码请登录后点击上方下载按钮下载查看