<html><head><!-- 由艾孜尔江·艾尔斯兰复现，转载或使用请注意标明出处。全程均使用鼠标交互，原游戏创作者不详，复现时有改动。使用时请在本地路径下放置一张玩家的精灵图，或者直接用我提供的也行。 --><title>JavaScript实现令人放松的游戏_/艾孜尔江撰/</title><style>body {margin: 0px;padding: 0px;text-align: center;}canvas {outline: 0;border: 1px solid #000;margin-left: auto;margin-right: auto;}</style></head><body><canvas id='maincanvas'></canvas><script>var width = 320,height = 500,gLoop,points = 0,state = true,maincanvas = document.getElementById('maincanvas'),ctx = maincanvas.getContext('2d');maincanvas.width = width;maincanvas.height = height;var clear = function () {ctx.fillStyle = '#d0e7f9';ctx.clearRect(0, 0, width, height);ctx.beginPath();ctx.rect(0, 0, width, height);ctx.closePath();ctx.fill();}var howManyCircles = 10, circles = [];for (var i = 0; i < howManyCircles; i++)circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);var DrawCircles = function () {for (var i = 0; i < howManyCircles; i++) {ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';ctx.beginPath();ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);ctx.closePath();ctx.fill();}};var MoveCircles = function (e) {for (var i = 0; i < howManyCircles; i++) {if (circles[i][1] - circles[i][2] > height) {circles[i][0] = Math.random() * width;circles[i][2] = Math.random() * 100;circles[i][1] = 0 - circles[i][2];circles[i][3] = Math.random() / 2;}else {circles[i][1] += e;}}};var player = new (function () {var that = this;that.image = new Image();that.image.src = "//03/24/Wj7RhNqnsUwtmpO.png"//可以换成自己在本地的一张精灵图片that.width = 65;that.height = 95;that.frames = 1;that.actualFrame = 0;that.X = 0;that.Y = 0;that.isJumping = false;that.isFalling = false;that.jumpSpeed = 0;that.fallSpeed = 0;that.jump = function () {if (!that.isJumping && !that.isFalling) {that.fallSpeed = 0;that.isJumping = true;that.jumpSpeed = 17;}}that.checkJump = function () {if (that.Y > height * 0.4) {that.setPosition(that.X, that.Y - that.jumpSpeed);}else {if (that.jumpSpeed > 10)points++;// if player is in mid of the gamescreen// dont move player up, move obstacles down insteadMoveCircles(that.jumpSpeed * 0.5);platforms.forEach(function (platform, ind) {platform.y += that.jumpSpeed;if (platform.y > height) {var type = ~~(Math.random() * 5);if (type == 0)type = 1;elsetype = 0;platforms[ind] = new Platform(Math.random() * (width - platformWidth), platform.y - height, type);}});}that.jumpSpeed--;if (that.jumpSpeed == 0) {that.isJumping = false;that.isFalling = true;that.fallSpeed = 1;}}that.fallStop = function () {that.isFalling = false;that.fallSpeed = 0;that.jump();}that.checkFall = function () {if (that.Y < height - that.height) {that.setPosition(that.X, that.Y + that.fallSpeed);that.fallSpeed++;} else {if (points == 0)that.fallStop();elseGameOver();}}that.moveLeft = function () {if (that.X > 0) {that.setPosition(that.X - 5, that.Y);}}that.moveRight = function () {if (that.X + that.width < width) {that.setPosition(that.X + 5, that.Y);}}that.setPosition = function (x, y) {that.X = x;that.Y = y;}that.interval = 0;that.draw = function () {try {ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height);}catch (e) {};if (that.interval == 4) {if (that.actualFrame == that.frames) {that.actualFrame = 0;}else {that.actualFrame++;}that.interval = 0;}that.interval++;}})();player.setPosition(~~((width - player.width) / 2), height - player.height);player.jump();document.onmousemove = function (e) {if (player.X + maincanvas.offsetLeft > e.pageX) {player.moveLeft();} else if (player.X + maincanvas.offsetLeft < e.pageX) {player.moveRight();}}var nrOfPlatforms = 7,platforms = [],platformWidth = 70,platformHeight = 20;var Platform = function (x, y, type) {var that = this;that.firstColor = '#FF8C00';that.secondColor = '#EEEE00';that.onCollide = function () {player.fallStop();};if (type === 1) {that.firstColor = '#AADD00';that.secondColor = '#698B22';that.onCollide = function () {player.fallStop();player.jumpSpeed = 50;};}that.x = ~~x;that.y = y;that.type = type;//NEW IN PART 5that.isMoving = ~~(Math.random() * 2);that.direction = ~~(Math.random() * 2) ? -1 : 1;that.draw = function () {ctx.fillStyle = 'rgba(255, 255, 255, 1)';var gradient = ctx.createRadialGradient(that.x + (platformWidth / 2), that.y + (platformHeight / 2), 5, that.x + (platformWidth / 2), that.y + (platformHeight / 2), 45);gradient.addColorStop(0, that.firstColor);gradient.addColorStop(1, that.secondColor);ctx.fillStyle = gradient;ctx.fillRect(that.x, that.y, platformWidth, platformHeight);};return that;};var generatePlatforms = function () {var position = 0, type;for (var i = 0; i < nrOfPlatforms; i++) {type = ~~(Math.random() * 5);if (type == 0)type = 1;elsetype = 0;platforms[i] = new Platform(Math.random() * (width - platformWidth), position, type);if (position < height - platformHeight)position += ~~(height / nrOfPlatforms);}}();var checkCollision = function () {platforms.forEach(function (e, ind) {if ((player.isFalling) &&(player.X < e.x + platformWidth) &&(player.X + player.width > e.x) &&(player.Y + player.height > e.y) &&(player.Y + player.height < e.y + platformHeight)) {e.onCollide();}})}var GameLoop = function () {clear();//MoveCircles(5);DrawCircles();if (player.isJumping) player.checkJump();if (player.isFalling) player.checkFall();player.draw();platforms.forEach(function (platform, index) {if (platform.isMoving) {if (platform.x < 0) {platform.direction = 1;} else if (platform.x > width - platformWidth) {platform.direction = -1;}platform.x += platform.direction * (index / 2) * ~~(points / 100);}platform.draw();});checkCollision();ctx.fillStyle = "Black";ctx.fillText("POINTS:" + points, 10, height - 10);if (state)gLoop = setTimeout(GameLoop, 1000 / 50);}var GameOver = function () {state = false;clearTimeout(gLoop);setTimeout(function () {clear();ctx.fillStyle = "Black";ctx.font = "10pt Arial";ctx.fillText("GAME OVER", width / 2 - 60, height / 2 - 50);ctx.fillText("YOUR RESULT:" + points, width / 2 - 60, height / 2 - 30);}, 100);};GameLoop();</script></body></html>
如果觉得《JavaScript实现令人放松的小游戏_艾孜尔江撰》对你有帮助，请点赞、收藏，并留下你的观点哦！
