微件:JumpGame:修订间差异
来自植物大战僵尸杂交版Wiki
更多操作
创建页面,内容为“<includeonly> <style> .jump-game-wrap { position: relative; width: 100%; max-width: 600px; height: 300px; background: #87CEEB; border-radius: 12px; overflow: hidden; margin: 15px auto; cursor: pointer; user-select: none; } .jump-plant { position: absolute; bottom: 20px; left: 50px; width: 40px; height: 40px; transition: none; } .jump-plant img { width: 100%; height: 100%; } .jump-platform {…” |
无编辑摘要 |
||
| 第12行: | 第12行: | ||
cursor: pointer; | cursor: pointer; | ||
user-select: none; | user-select: none; | ||
} | |||
.jump-start-text { | |||
position: absolute; | |||
top: 40%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
font-size: 22px; | |||
font-weight: bold; | |||
color: #fff; | |||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |||
z-index: 10; | |||
text-align: center; | |||
} | } | ||
.jump-plant { | .jump-plant { | ||
| 第65行: | 第77行: | ||
border-radius: 3px; | border-radius: 3px; | ||
z-index: 5; | z-index: 5; | ||
transition: width 0.05s; | |||
} | } | ||
</style> | </style> | ||
<div class="jump-game-wrap" id="jump-game"> | <div class="jump-game-wrap" id="jump-game"> | ||
<div class="jump-score" id="jump-score">0</div> | <div class="jump-start-text" id="jump-start-text">👆 点击开始游戏</div> | ||
<div class="jump-score" id="jump-score" style="display:none;">0</div> | |||
<div class="jump-game-over" id="jump-game-over">💥 掉落!点击重试</div> | <div class="jump-game-over" id="jump-game-over">💥 掉落!点击重试</div> | ||
<div class="jump-press-bar" id="jump-press-bar"></div> | <div class="jump-press-bar" id="jump-press-bar"></div> | ||
| 第80行: | 第94行: | ||
var $gameOver = $('#jump-game-over'); | var $gameOver = $('#jump-game-over'); | ||
var $pressBar = $('#jump-press-bar'); | var $pressBar = $('#jump-press-bar'); | ||
var $startText = $('#jump-start-text'); | |||
var plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 }; | var plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 }; | ||
var platforms = []; | var platforms = []; | ||
var score = 0; | var score = 0; | ||
var gameRunning = | var gameRunning = false; | ||
var gameStarted = false; | |||
var pressing = false; | var pressing = false; | ||
var pressStart = 0; | var pressStart = 0; | ||
var gravity = 0.6; | var gravity = 0.6; | ||
var gameLoop = null; | |||
function initPlatforms() { | function initPlatforms() { | ||
| 第95行: | 第112行: | ||
var gap = 60 + Math.floor(Math.random() * 80); | var gap = 60 + Math.floor(Math.random() * 80); | ||
px += gap; | px += gap; | ||
platforms.push({ x: px, y: 240, w: 60, h: 15 }); | platforms.push({ x: px, y: 240, w: 60, h: 15, scored: false }); | ||
} | } | ||
} | } | ||
| 第116行: | 第133行: | ||
plant.y += plant.vy; | plant.y += plant.vy; | ||
if (plant.vy > 0) { | if (plant.vy > 0) { | ||
for (var i = 0; i < platforms.length; i++) { | for (var i = 0; i < platforms.length; i++) { | ||
| 第129行: | 第145行: | ||
} | } | ||
if (plant.y > 320) { | if (plant.y > 320) { | ||
gameRunning = false; | gameRunning = false; | ||
gameStarted = false; | |||
$gameOver.show(); | $gameOver.show(); | ||
$pressBar.css('width', '0%'); | $pressBar.css('width', '0%'); | ||
$score.hide(); | |||
$startText.show(); | |||
return; | return; | ||
} | } | ||
for (var i = 0; i < platforms.length; i++) { | for (var i = 0; i < platforms.length; i++) { | ||
var p = platforms[i]; | var p = platforms[i]; | ||
| 第146行: | 第163行: | ||
} | } | ||
platforms.forEach(function(p) { p.x -= 2; }); | platforms.forEach(function(p) { p.x -= 2; }); | ||
plant.x -= 2; | plant.x -= 2; | ||
if (platforms[0] && platforms[0].x + platforms[0].w < 0) { | if (platforms[0] && platforms[0].x + platforms[0].w < 0) { | ||
platforms.shift(); | platforms.shift(); | ||
| 第158行: | 第173行: | ||
} | } | ||
draw(); | |||
} | |||
function startGame() { | |||
score = 0; | |||
plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 }; | |||
initPlatforms(); | |||
gameRunning = true; | |||
gameStarted = true; | |||
$gameOver.hide(); | |||
$score.show(); | |||
$startText.hide(); | |||
draw(); | draw(); | ||
} | } | ||
| 第168行: | 第195行: | ||
$game.on('mousedown touchstart', function(e) { | $game.on('mousedown touchstart', function(e) { | ||
if (!gameStarted) { | |||
startGame(); | |||
return; | |||
} | |||
if (!gameRunning) { | if (!gameRunning) { | ||
startGame(); | |||
return; | return; | ||
} | } | ||
| 第201行: | 第226行: | ||
initPlatforms(); | initPlatforms(); | ||
draw(); | draw(); | ||
setInterval(update, 16); | gameLoop = setInterval(update, 16); | ||
})(); | })(); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||