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

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

代码语言：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];
			Li.........完整代码请登录后点击上方下载按钮下载查看