|
|
@@ -1,855 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <meta charset="utf-8" />
|
|
|
- <title>Square Jump</title>
|
|
|
- <style type="text/css">
|
|
|
- * {
|
|
|
- padding: 0px;
|
|
|
- margin: 0px;
|
|
|
- }
|
|
|
- a {
|
|
|
- text-decoration: none;
|
|
|
- list-style: none;
|
|
|
- color: rgb(0, 0, 0);
|
|
|
- }
|
|
|
- #main_box {
|
|
|
- margin: 0px auto;
|
|
|
- width: 420px;
|
|
|
- height: 580px;
|
|
|
- background: skyblue;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .can {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- }
|
|
|
- #score {
|
|
|
- width: auto;
|
|
|
- height: 40px;
|
|
|
- font-size: 22px;
|
|
|
- color: #7fffd4;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- #game_title {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- width: 240px;
|
|
|
- height: 80px;
|
|
|
- line-height: 80px;
|
|
|
- text-align: center;
|
|
|
- top: 35%;
|
|
|
- left: 50%;
|
|
|
- margin-left: -120px;
|
|
|
- font-size: 42px;
|
|
|
- font-family: "century gothic";
|
|
|
- font-weight: bolder;
|
|
|
- text-shadow: 4px 3px 2px black;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- #login_btn {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- bottom: 100px;
|
|
|
- left: 50%;
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- margin-left: -50px;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 12px;
|
|
|
- border: 2px solid #ffffff;
|
|
|
- font-size: 18px;
|
|
|
- color: #000000;
|
|
|
- font-weight: normal;
|
|
|
- background: peachpuff;
|
|
|
- }
|
|
|
- #login_btn:hover {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- #login_btn:active {
|
|
|
- background: #ffffff;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- #square_main {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- border: 2px solid #ffffff;
|
|
|
- display: none;
|
|
|
- background: #ff6688;
|
|
|
- }
|
|
|
- #state {
|
|
|
- width: 280px;
|
|
|
- height: 60px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bolder;
|
|
|
- text-shadow: #fdf5e6;
|
|
|
- color: blueviolet;
|
|
|
- font-family: "arial narrow";
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 50%;
|
|
|
- line-height: 60px;
|
|
|
- text-align: center;
|
|
|
- margin-left: -140px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- #colorChangeTime_div {
|
|
|
- width: 200px;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- position: absolute;
|
|
|
- text-align: center;
|
|
|
- top: 3%;
|
|
|
- left: 50%;
|
|
|
- display: none;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="main_box">
|
|
|
- <canvas id="myCanvas1" class="can"></canvas>
|
|
|
- <canvas id="myCanvas2" class="can"></canvas>
|
|
|
- <a href="javascript:loginGame()" id="login_btn">开始游戏</a>
|
|
|
- <div id="score"></div>
|
|
|
- <div id="game_title">方 块 跳 跃</div>
|
|
|
- <div id="state"></div>
|
|
|
- <span id="square_main"></span>
|
|
|
- <div id="colorChangeTime_div">10</div>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- var can1;
|
|
|
- var can2;
|
|
|
- var ctx1;
|
|
|
- var ctx2;
|
|
|
- var canWidth = 820;
|
|
|
- var canHeight = 640;
|
|
|
- var maxHeight = window.innerHeight;
|
|
|
- var maxWidth = window.innerWidth;
|
|
|
-
|
|
|
- var beginGame;
|
|
|
- var gameOver;
|
|
|
-
|
|
|
- var backrgound;
|
|
|
- var squares;
|
|
|
- var mySquare;
|
|
|
-
|
|
|
- var beginAnim; //开始界面动画
|
|
|
-
|
|
|
- var lastTime;
|
|
|
- var changeColorTime;
|
|
|
- var changeTimeArrays = [
|
|
|
- "10",
|
|
|
- "9",
|
|
|
- "8",
|
|
|
- "7",
|
|
|
- "6",
|
|
|
- "5",
|
|
|
- "4",
|
|
|
- "3",
|
|
|
- "2",
|
|
|
- "1",
|
|
|
- "color change!",
|
|
|
- ];
|
|
|
- var changeColorindex = 0;
|
|
|
- var totalSpeed = 3;
|
|
|
-
|
|
|
- var isStep;
|
|
|
-
|
|
|
- var colorChangeTimeW = 0;
|
|
|
-
|
|
|
- var score;
|
|
|
-
|
|
|
- let AnimPX = [];
|
|
|
- let AnimPY = [];
|
|
|
- let jump_count = 0;
|
|
|
-
|
|
|
- const squareColor = [
|
|
|
- "#FF6688",
|
|
|
- "#00FF00",
|
|
|
- "#3399FF",
|
|
|
- "#FFDAB9",
|
|
|
- "blueviolet",
|
|
|
- ];
|
|
|
- document.body.onload = game;
|
|
|
-
|
|
|
-
|
|
|
- function init() {
|
|
|
- score = 0;
|
|
|
- beginGame = false;
|
|
|
- gameOver = false;
|
|
|
- isStep = false;
|
|
|
-
|
|
|
- lastTime = Date.now();
|
|
|
-
|
|
|
- can1 = document.getElementById("myCanvas1");
|
|
|
- ctx1 = can1.getContext("2d");
|
|
|
- can2 = document.getElementById("myCanvas2");
|
|
|
- ctx2 = can2.getContext("2d");
|
|
|
-
|
|
|
- if (maxWidth != canWidth) {
|
|
|
- canWidth = maxWidth;
|
|
|
- }
|
|
|
- if (maxHeight != canHeight) {
|
|
|
- canHeight = maxHeight;
|
|
|
- }
|
|
|
-
|
|
|
- const mainBox = document.getElementById("main_box");
|
|
|
- mainBox.style.width = canWidth + "px";
|
|
|
- mainBox.style.height = canHeight + "px";
|
|
|
-
|
|
|
- can1.width = canWidth;
|
|
|
- can2.width = canWidth;
|
|
|
- can1.height = canHeight;
|
|
|
- can2.height = canHeight;
|
|
|
-
|
|
|
- // 模拟 slideDown 效果
|
|
|
- const gameTitle = document.getElementById("game_title");
|
|
|
- gameTitle.style.display = "block";
|
|
|
- gameTitle.style.height = "0";
|
|
|
- gameTitle.style.overflow = "hidden";
|
|
|
- setTimeout(() => {
|
|
|
- gameTitle.style.height = "auto";
|
|
|
- }, 0);
|
|
|
-
|
|
|
- // 模拟 delay 和 slideToggle 效果
|
|
|
- const loginBtn = document.getElementById("login_btn");
|
|
|
- setTimeout(() => {
|
|
|
- loginBtn.style.display = "block";
|
|
|
- loginBtn.style.height = "0";
|
|
|
- loginBtn.style.overflow = "hidden";
|
|
|
- setTimeout(() => {
|
|
|
- loginBtn.style.height = "auto";
|
|
|
- }, 10);
|
|
|
- }, 500);
|
|
|
-
|
|
|
- colorChangeTimeW = (canHeight > canWidth ? canWidth : canHeight) * 0.5;
|
|
|
- const colorChangeTimeDiv = document.getElementById(
|
|
|
- "colorChangeTime_div"
|
|
|
- );
|
|
|
- colorChangeTimeDiv.style.width = colorChangeTimeW * 1.6 + "px";
|
|
|
- colorChangeTimeDiv.style.height = colorChangeTimeW * 0.5 + "px";
|
|
|
- colorChangeTimeDiv.style.marginLeft = -colorChangeTimeW * 0.8 + "px";
|
|
|
- colorChangeTimeDiv.style.lineHeight = colorChangeTimeW * 0.5 + "px";
|
|
|
- colorChangeTimeDiv.style.fontSize = colorChangeTimeW * 0.3 + "px";
|
|
|
-
|
|
|
- backrgound = new backgroundObj();
|
|
|
- backrgound.init();
|
|
|
-
|
|
|
- squares = new squareObj();
|
|
|
- squares.init();
|
|
|
-
|
|
|
- mySquare = new mySquareObj();
|
|
|
- mySquare.init();
|
|
|
-
|
|
|
- beginAnim = new beginAnimObj();
|
|
|
- beginAnim.init();
|
|
|
- }
|
|
|
-
|
|
|
- function restartInit() {
|
|
|
- AnimPX = new Array();
|
|
|
- AnimPY = new Array();
|
|
|
- changeColorindex = 0;
|
|
|
- jump_count = 0;
|
|
|
-
|
|
|
- // 隐藏元素
|
|
|
- document.getElementById("colorChangeTime_div").style.display = "none";
|
|
|
- document.getElementById("score").style.display = "none";
|
|
|
-
|
|
|
- // 初始化动画
|
|
|
- beginAnim.init();
|
|
|
-
|
|
|
- // 设置游戏状态
|
|
|
- beginGame = false;
|
|
|
- gameOver = true;
|
|
|
- lastTime = Date.now();
|
|
|
-
|
|
|
- // 设置游戏标题
|
|
|
- const gameTitle = document.getElementById("game_title");
|
|
|
- gameTitle.innerHTML = "方 块 跳 跃";
|
|
|
-
|
|
|
- // 显示游戏标题（模拟slideDown效果）
|
|
|
- gameTitle.style.display = "block";
|
|
|
- gameTitle.style.height = "0";
|
|
|
- gameTitle.style.overflow = "hidden";
|
|
|
- setTimeout(() => {
|
|
|
- gameTitle.style.height = "auto";
|
|
|
- }, 0);
|
|
|
-
|
|
|
- // 延迟显示登录按钮（模拟delay和slideToggle效果）
|
|
|
- const loginBtn = document.getElementById("login_btn");
|
|
|
- setTimeout(() => {
|
|
|
- loginBtn.style.display = "block";
|
|
|
- loginBtn.style.height = "0";
|
|
|
- loginBtn.style.overflow = "hidden";
|
|
|
- setTimeout(() => {
|
|
|
- loginBtn.style.height = "auto";
|
|
|
- }, 10);
|
|
|
- }, 500);
|
|
|
-
|
|
|
- // 设置登录按钮文本
|
|
|
- loginBtn.innerHTML = "再来一次";
|
|
|
-
|
|
|
- // 显示状态（模拟slideDown效果）
|
|
|
- const state = document.getElementById("state");
|
|
|
- state.style.display = "block";
|
|
|
- state.style.height = "0";
|
|
|
- state.style.overflow = "hidden";
|
|
|
- setTimeout(() => {
|
|
|
- state.style.height = "auto";
|
|
|
- }, 500);
|
|
|
-
|
|
|
- // 设置状态文本
|
|
|
- state.innerHTML = "游戏结束，得分：" + Math.floor(score);
|
|
|
- }
|
|
|
-
|
|
|
- function game() {
|
|
|
- init();
|
|
|
- loop = setInterval(gameloop, 20);
|
|
|
- }
|
|
|
- function restart() {
|
|
|
- // 调用初始化方法
|
|
|
- backrgound.init();
|
|
|
- squares.init();
|
|
|
- mySquare.init();
|
|
|
-
|
|
|
- // 更新时间戳
|
|
|
- lastTime = Date.now();
|
|
|
-
|
|
|
- // 隐藏元素
|
|
|
- document.getElementById("state").style.display = "none";
|
|
|
- document.getElementById("game_title").style.display = "none";
|
|
|
- document.getElementById("login_btn").style.display = "none";
|
|
|
-
|
|
|
- // 显示分数
|
|
|
- document.getElementById("score").style.display = "block";
|
|
|
-
|
|
|
- // 重置分数和速度
|
|
|
- score = 0;
|
|
|
- totalSpeed = 3;
|
|
|
- }
|
|
|
- function gameloop() {
|
|
|
- backrgound.draw();
|
|
|
- ctx2.clearRect(0, 0, canWidth, canHeight);
|
|
|
- ctx2.save();
|
|
|
-
|
|
|
- if (beginAnim.isLive && Date.now() - lastTime > 1000) {
|
|
|
- beginAnim.draw();
|
|
|
- }
|
|
|
-
|
|
|
- if (beginGame && !gameOver) {
|
|
|
- document.getElementById("score").innerHTML =
|
|
|
- "得分:" + Math.floor(score);
|
|
|
- addSpeed();
|
|
|
- squares.draw();
|
|
|
- mySquare.draw();
|
|
|
- squaresToMy();
|
|
|
-
|
|
|
- // 添加点击事件监听器
|
|
|
- const mainBox = document.getElementById("main_box");
|
|
|
- mainBox.addEventListener("click", function () {
|
|
|
- mySquare.jump();
|
|
|
- });
|
|
|
- } else if (gameOver && !beginGame) {
|
|
|
- // 这里可以添加游戏结束时的逻辑
|
|
|
- }
|
|
|
-
|
|
|
- ctx2.restore();
|
|
|
- }
|
|
|
- function loginGame() {
|
|
|
- changeColorTime = Date.now();
|
|
|
-
|
|
|
- // 显示颜色变化时间div
|
|
|
- const colorChangeTimeDiv = document.getElementById(
|
|
|
- "colorChangeTime_div"
|
|
|
- );
|
|
|
- colorChangeTimeDiv.style.display = "block";
|
|
|
-
|
|
|
- // 随机设置颜色
|
|
|
- const randomColor =
|
|
|
- squareColor[Math.floor(Math.random() * squareColor.length)];
|
|
|
- colorChangeTimeDiv.style.color = randomColor;
|
|
|
-
|
|
|
- // 设置颜色变化时间div的内容
|
|
|
- colorChangeTimeDiv.innerHTML = "" + changeTimeArrays[changeColorindex];
|
|
|
-
|
|
|
- if (!gameOver && !beginGame) {
|
|
|
- // 显示分数，隐藏游戏标题和方块
|
|
|
- document.getElementById("score").style.display = "block";
|
|
|
- document.getElementById("game_title").style.display = "none";
|
|
|
- document.getElementById("square_main").style.display = "none";
|
|
|
-
|
|
|
- // 设置游戏状态
|
|
|
- beginGame = true;
|
|
|
-
|
|
|
- // 隐藏登录按钮
|
|
|
- document.getElementById("login_btn").style.display = "none";
|
|
|
- } else if (gameOver && !beginGame) {
|
|
|
- // 重新开始游戏
|
|
|
- restart();
|
|
|
-
|
|
|
- // 更新游戏状态
|
|
|
- gameOver = false;
|
|
|
- beginGame = true;
|
|
|
- }
|
|
|
-
|
|
|
- // 设置动画状态
|
|
|
- beginAnim.isLive = false;
|
|
|
-
|
|
|
- // 隐藏方块
|
|
|
- document.getElementById("square_main").style.display = "none";
|
|
|
- }
|
|
|
- function addSpeed() {
|
|
|
- totalSpeed += 0.04 * 0.05;
|
|
|
- score += 0.04;
|
|
|
- }
|
|
|
- function squaresToMy() {
|
|
|
- for (var i = 0; i < squares.num; i++) {
|
|
|
- if (squares.isLive[i]) {
|
|
|
- if (squares.color[i] != mySquare.color) {
|
|
|
- if (mySquare.isLive) {
|
|
|
- if (
|
|
|
- ((mySquare.x + mySquare.l - 1 > squares.x[i] &&
|
|
|
- mySquare.x + mySquare.l - 1 < squares.x[i] + squares.w[i] &&
|
|
|
- mySquare.x + mySquare.l - 30 > squares.x[i] &&
|
|
|
- mySquare.x + mySquare.l - 30 <
|
|
|
- squares.x[i] + squares.w[i]) ||
|
|
|
- (mySquare.x > squares.x[i] &&
|
|
|
- mySquare.x + 10 < squares.x[i] + squares.w[i] &&
|
|
|
- mySquare.x + 10 > squares.x[i] &&
|
|
|
- mySquare.x + 10 < squares.x[i] + squares.w[i])) &&
|
|
|
- mySquare.y + mySquare.l > squares.y[i] &&
|
|
|
- mySquare.y + mySquare.l < squares.y[i] + squares.h[i]
|
|
|
- ) {
|
|
|
- mySquare.y = squares.y[i] - mySquare.l;
|
|
|
- mySquare.toVSpeed = -totalSpeed * 0.2;
|
|
|
- mySquare.toDownSpeed = 0;
|
|
|
- jump_count = 0;
|
|
|
- }
|
|
|
- if (
|
|
|
- mySquare.x + mySquare.l > squares.x[i] &&
|
|
|
- mySquare.x + mySquare.l < squares.x[i] + squares.w[i] &&
|
|
|
- mySquare.y + mySquare.l > squares.y[i] &&
|
|
|
- mySquare.y + mySquare.l < squares.y[i] + squares.h[i]
|
|
|
- ) {
|
|
|
- mySquare.x = squares.x[i] - mySquare.l;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class backgroundObj {
|
|
|
- constructor() {
|
|
|
- this.x = [];
|
|
|
- this.y = [];
|
|
|
- this.w = [];
|
|
|
- this.h = [];
|
|
|
- this.isLive = [];
|
|
|
- this.num = 3;
|
|
|
- }
|
|
|
-
|
|
|
- init() {
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- this.x[i] =
|
|
|
- i === 0
|
|
|
- ? canWidth * 0.1 * Math.random()
|
|
|
- : this.x[i - 1] +
|
|
|
- this.w[i - 1] +
|
|
|
- canWidth * 0.2 * i * Math.random();
|
|
|
-
|
|
|
- this.w[i] = canWidth * 0.08 + canHeight * Math.random() * 0.3;
|
|
|
- this.h[i] = canHeight * 0.08 + canWidth * Math.random() * 0.3;
|
|
|
- this.y[i] = canHeight * 0.2 * Math.random();
|
|
|
- this.isLive[i] = true;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- cloudBorn() {
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- if (!this.isLive[i]) {
|
|
|
- this.w[i] = canWidth * 0.08 + canWidth * Math.random() * 0.3;
|
|
|
- this.h[i] = canHeight * 0.08 + canHeight * Math.random() * 0.3;
|
|
|
- this.y[i] = canHeight * 0.2 * Math.random();
|
|
|
-
|
|
|
- this.x[i] = i === 0 ? canWidth : canWidth + i * this.w[i - 1];
|
|
|
-
|
|
|
- this.isLive[i] = true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- draw() {
|
|
|
- ctx1.clearRect(0, 0, canWidth, canHeight);
|
|
|
- ctx1.save();
|
|
|
-
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- if (!this.isLive[i]) continue;
|
|
|
-
|
|
|
- this.x[i] -= 0.1 * totalSpeed;
|
|
|
- const maxSize = Math.max(this.h[i], this.w[i]) * 0.15;
|
|
|
- const smallSize = Math.max(this.h[i], this.w[i]) * 0.1;
|
|
|
-
|
|
|
- // 绘制云朵的各个部分
|
|
|
- const cloudParts = [
|
|
|
- { x: 0.4, y: 0.1, size: maxSize },
|
|
|
- { x: 0.1, y: 0.2, size: maxSize },
|
|
|
- { x: 0.6, y: 0.25, size: maxSize },
|
|
|
- { x: 0.5, y: 0.3, size: maxSize },
|
|
|
- { x: 0.65, y: 0.22, size: maxSize },
|
|
|
- { x: 0.2, y: 0.35, size: maxSize },
|
|
|
- { x: 0.35, y: 0.35, size: smallSize },
|
|
|
- { x: 0.3, y: 0.1, size: maxSize },
|
|
|
- ];
|
|
|
-
|
|
|
- ctx1.fillStyle = "#ffffff";
|
|
|
- cloudParts.forEach((part) => {
|
|
|
- ctx1.beginPath();
|
|
|
- ctx1.arc(
|
|
|
- this.x[i] + this.w[i] * part.x,
|
|
|
- this.y[i] + this.h[i] * part.y,
|
|
|
- part.size,
|
|
|
- 0,
|
|
|
- Math.PI * 2
|
|
|
- );
|
|
|
- ctx1.fill();
|
|
|
- ctx1.closePath();
|
|
|
- });
|
|
|
-
|
|
|
- if (this.x[i] + this.w[i] < 0) {
|
|
|
- this.isLive[i] = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ctx1.restore();
|
|
|
- this.cloudBorn();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class squareObj {
|
|
|
- constructor() {
|
|
|
- this.num = 12;
|
|
|
- this.x = [];
|
|
|
- this.y = [];
|
|
|
- this.w = [];
|
|
|
- this.h = [];
|
|
|
- this.color = [];
|
|
|
- this.isLive = [];
|
|
|
- }
|
|
|
-
|
|
|
- init() {
|
|
|
- let repeatColorCount = 0;
|
|
|
-
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- // Random color selection with constraints
|
|
|
- this.color[i] = this.getRandomColor(i, repeatColorCount);
|
|
|
-
|
|
|
- // Position and size initialization
|
|
|
- if (i === 0) {
|
|
|
- this.x[i] = 0;
|
|
|
- } else {
|
|
|
- this.x[i] = this.x[i - 1] + this.w[i - 1] + 1;
|
|
|
- }
|
|
|
-
|
|
|
- this.h[i] = canHeight * 0.3 + canHeight * 0.25 * Math.random();
|
|
|
- this.w[i] = canWidth * 0.15 + canWidth * 0.06 * Math.random();
|
|
|
- this.y[i] = canHeight - this.h[i];
|
|
|
- this.isLive[i] = true;
|
|
|
-
|
|
|
- // Update repeat color count
|
|
|
- repeatColorCount =
|
|
|
- this.color[i] === this.color[i - 1] ? repeatColorCount + 1 : 0;
|
|
|
-
|
|
|
- // Handle consecutive colors
|
|
|
- if (repeatColorCount > 1) {
|
|
|
- this.adjustColor(i);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- getRandomColor(i, repeatColorCount) {
|
|
|
- const randomIndex = Math.floor(Math.random() * squareColor.length);
|
|
|
- let color = squareColor[randomIndex];
|
|
|
-
|
|
|
- // For the first element, check against last element
|
|
|
- if (i === 0 && color === this.color[this.num - 1]) {
|
|
|
- const lastColorIndex = squareColor.indexOf(
|
|
|
- this.color[this.num - 1]
|
|
|
- );
|
|
|
- color =
|
|
|
- squareColor[
|
|
|
- (lastColorIndex - 1 + squareColor.length) % squareColor.length
|
|
|
- ];
|
|
|
- }
|
|
|
- // For other elements, check against previous element
|
|
|
- else if (
|
|
|
- i > 0 &&
|
|
|
- color === this.color[i - 1] &&
|
|
|
- repeatColorCount > 1
|
|
|
- ) {
|
|
|
- const currentColorIndex = squareColor.indexOf(color);
|
|
|
- color = squareColor[(currentColorIndex + 1) % squareColor.length];
|
|
|
- }
|
|
|
-
|
|
|
- return color;
|
|
|
- }
|
|
|
-
|
|
|
- adjustColor(i) {
|
|
|
- if (i === 0) {
|
|
|
- const lastColorIndex = squareColor.indexOf(
|
|
|
- this.color[this.num - 1]
|
|
|
- );
|
|
|
- this.color[i] =
|
|
|
- squareColor[
|
|
|
- (lastColorIndex - 1 + squareColor.length) % squareColor.length
|
|
|
- ];
|
|
|
- } else {
|
|
|
- const currentColorIndex = squareColor.indexOf(this.color[i]);
|
|
|
- this.color[i] =
|
|
|
- squareColor[(currentColorIndex + 1) % squareColor.length];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- squareBorn() {
|
|
|
- const maxX = Math.max(
|
|
|
- ...this.x.map((val, idx) => val + (this.w[idx] || 0))
|
|
|
- );
|
|
|
- const maxI = this.x.indexOf(
|
|
|
- maxX - (this.w[this.x.indexOf(maxX)] || 0)
|
|
|
- );
|
|
|
-
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- if (!this.isLive[i]) {
|
|
|
- this.x[i] = maxX + 1;
|
|
|
- this.h[i] = canHeight * 0.25 + canHeight * 0.35 * Math.random();
|
|
|
- this.w[i] = canWidth * 0.14 + canWidth * 0.1 * Math.random();
|
|
|
- this.y[i] = canHeight - this.h[i];
|
|
|
-
|
|
|
- let repeatColorCount = 0;
|
|
|
- if (i === 0 && this.isLive[this.num - 1]) {
|
|
|
- this.color[i] = this.getRandomColorForBorn(
|
|
|
- this.num - 1,
|
|
|
- repeatColorCount
|
|
|
- );
|
|
|
- } else if (i > 0 && this.isLive[i - 1]) {
|
|
|
- this.color[i] = this.getRandomColorForBorn(
|
|
|
- i - 1,
|
|
|
- repeatColorCount
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- this.isLive[i] = true;
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- getRandomColorForBorn(prevIndex, repeatColorCount) {
|
|
|
- const randomIndex = Math.floor(Math.random() * 3);
|
|
|
- let color = squareColor[randomIndex];
|
|
|
-
|
|
|
- if (color === this.color[prevIndex] && repeatColorCount > 1) {
|
|
|
- const currentColorIndex = squareColor.indexOf(color);
|
|
|
- color = squareColor[(currentColorIndex + 1) % squareColor.length];
|
|
|
- }
|
|
|
-
|
|
|
- return color;
|
|
|
- }
|
|
|
-
|
|
|
- draw() {
|
|
|
- for (let i = 0; i < this.num; i++) {
|
|
|
- if (this.isLive[i]) {
|
|
|
- ctx2.fillStyle = this.color[i];
|
|
|
- ctx2.beginPath();
|
|
|
- ctx2.fillRect(this.x[i], this.y[i], this.w[i], this.h[i]);
|
|
|
- ctx2.fill();
|
|
|
- ctx2.closePath();
|
|
|
- this.x[i] -= totalSpeed;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.x[i] + this.w[i] < 0) {
|
|
|
- this.isLive[i] = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.squareBorn();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class mySquareObj {
|
|
|
- constructor() {
|
|
|
- this.x;
|
|
|
- this.y;
|
|
|
- this.isLive; // 生命状态
|
|
|
- this.l = 40; // 正方形边长
|
|
|
- this.color;
|
|
|
- this.toDownSpeed = 0; // 垂直方向速度
|
|
|
- this.toVSpeed = 0; // 水平方向速度
|
|
|
- }
|
|
|
-
|
|
|
- init() {
|
|
|
- this.isLive = true;
|
|
|
- this.x = 0;
|
|
|
- this.y = 0;
|
|
|
- this.l = 40;
|
|
|
- this.toDownSpeed = 0;
|
|
|
- this.toVSpeed = 0;
|
|
|
- this.color = squareColor[0];
|
|
|
- }
|
|
|
-
|
|
|
- jump() {
|
|
|
- if (this.isLive) {
|
|
|
- this.toDownSpeed = -15;
|
|
|
- this.toVSpeed = 2;
|
|
|
- jump_count++;
|
|
|
- if (this.x + this.l > canWidth) {
|
|
|
- this.x = canWidth - this.l;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- toDown() {
|
|
|
- if (this.isLive) {
|
|
|
- this.toDownSpeed += 9.8 * 1 * 0.06;
|
|
|
- this.y += this.toDownSpeed;
|
|
|
- this.x += this.toVSpeed;
|
|
|
- if (this.y + this.l > canHeight) {
|
|
|
- this.isLive = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- draw() {
|
|
|
- if (this.isLive) {
|
|
|
- const now = Date.now();
|
|
|
- if (now - changeColorTime > 1000) {
|
|
|
- changeColorindex = ++changeColorindex % changeTimeArrays.length;
|
|
|
- const strColor =
|
|
|
- "" +
|
|
|
- squareColor[Math.floor(Math.random() * squareColor.length)];
|
|
|
-
|
|
|
- // 获取元素
|
|
|
- const colorChangeTimeDiv = document.getElementById(
|
|
|
- "colorChangeTime_div"
|
|
|
- );
|
|
|
-
|
|
|
- // 设置颜色和内容
|
|
|
- colorChangeTimeDiv.style.color = strColor;
|
|
|
- colorChangeTimeDiv.textContent =
|
|
|
- "" + changeTimeArrays[changeColorindex];
|
|
|
-
|
|
|
- if (changeColorindex === 10) {
|
|
|
- colorChangeTimeDiv.style.fontSize =
|
|
|
- colorChangeTimeW * 0.15 + "px";
|
|
|
- this.color = strColor;
|
|
|
- } else {
|
|
|
- colorChangeTimeDiv.style.fontSize =
|
|
|
- colorChangeTimeW * 0.3 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- changeColorTime = now;
|
|
|
- }
|
|
|
- ctx2.fillStyle = this.color + "";
|
|
|
- ctx2.rect(this.x, this.y, this.l, this.l);
|
|
|
- ctx2.fill();
|
|
|
- ctx2.lineWidth = 3;
|
|
|
- ctx2.radiusX = 3;
|
|
|
-
|
|
|
- ctx2.strokeStyle = "#ffffff";
|
|
|
- ctx2.stroke();
|
|
|
- if (this.x < -100) {
|
|
|
- this.isLive = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- restartInit();
|
|
|
- }
|
|
|
- this.toDown();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- class beginAnimObj {
|
|
|
- constructor() {
|
|
|
- this.x;
|
|
|
- this.y;
|
|
|
- this.isLive;
|
|
|
- this.l = 40; // 正方形边长
|
|
|
- this.color;
|
|
|
- this.toDownSpeed = 0; // 垂直方向速度
|
|
|
- this.toVSpeed = canWidth * 0.021; // 水平方向速度
|
|
|
- }
|
|
|
-
|
|
|
- init() {
|
|
|
- this.isLive = true;
|
|
|
- this.x = 0;
|
|
|
- this.y = 0;
|
|
|
- this.toDownSpeed = 0;
|
|
|
- this.toVSpeed = canWidth * 0.021;
|
|
|
- this.color = squareColor[0];
|
|
|
- }
|
|
|
-
|
|
|
- jump() {
|
|
|
- if (this.isLive) {
|
|
|
- this.toDownSpeed = -this.toDownSpeed;
|
|
|
- this.toVSpeed = canWidth * 0.021 * 0.5;
|
|
|
- jump_count++;
|
|
|
- if (this.x + this.l > canWidth) {
|
|
|
- this.x = canWidth - this.l;
|
|
|
- }
|
|
|
- this.x += this.toVSpeed;
|
|
|
- if (this.toVSpeed + 2 < 3) {
|
|
|
- this.toVSpeed += 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- toDown() {
|
|
|
- if (this.isLive) {
|
|
|
- this.toDownSpeed += 9.8 * 1 * 0.06;
|
|
|
- this.y += this.toDownSpeed;
|
|
|
- this.x += this.toVSpeed;
|
|
|
- if (this.y > canHeight) {
|
|
|
- this.isLive = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- draw() {
|
|
|
- if (this.isLive) {
|
|
|
- const squareMain = document.getElementById("square_main");
|
|
|
- const gameTitle = document.getElementById("game_title");
|
|
|
-
|
|
|
- squareMain.style.display = "block";
|
|
|
- squareMain.style.left = this.x + "px";
|
|
|
- squareMain.style.top = this.y + "px";
|
|
|
-
|
|
|
- if (
|
|
|
- this.y + this.l > canHeight * 0.35 &&
|
|
|
- this.x + this.l * 0.5 < canWidth * 0.5 + 120 &&
|
|
|
- this.x + this.l * 0.5 > canWidth * 0.5 - 120
|
|
|
- ) {
|
|
|
- this.jump();
|
|
|
- gameTitle.innerHTML =
|
|
|
- "方 块 <i style='font-size: 46px;color:#FF6688;'>跳 </i>跃";
|
|
|
- }
|
|
|
-
|
|
|
- ctx2.restore();
|
|
|
- this.toDown();
|
|
|
- } else {
|
|
|
- document.getElementById("square_main").style.display = "none";
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
林旭祥
