<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>马里奥：太空飞船创业融资</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{background:#050518;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:10px 0;font-family:"Microsoft YaHei",sans-serif;}
#gameCanvas{border:2px solid #fff;background:#080820;max-width:100vw;height:auto;}
.control-panel{
width:100%;
max-width:800px;
display:flex;
justify-content:space-between;
padding:10px 24px;
margin-top:12px;
}
.btn-group{display:flex;gap:12px;}
.ctrl-btn{
width:72px;height:72px;
font-size:28px;font-weight:bold;
background:rgba(255,255,255,0.75);
border:2px solid #fff;
border-radius:14px;
}
.ctrl-btn:active{background:#bbbbbb;}
.tips-text{font-size:14px;margin-top:8px;color:#fff;text-align:center;}
.pop{
position:absolute;
top:32%;
left:50%;
transform:translateX(-50%);
background:#ffffff;
border:3px solid #d81010;
padding:22px;
border-radius:12px;
text-align:center;
display:none;
z-index:999;
min-width:320px;
}
.pop h3{color:#d81010;margin-bottom:10px;}
.pop p{margin:6px 0;line-height:1.7;}
.pop button{margin-top:12px;padding:7px 18px;font-size:16px;cursor:pointer;}
#startPop{display:block;border-color:#0066cc;}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div>
<div>
<button id="btnLeft">←</button>
<button id="btnRight">→</button>
</div>
<button id="btnJump">跳</button>
</div>
<div>触屏操作 | 电脑A/D移动 W/空格跳跃 | 收集金币为飞船上的叔叔创业融资</div>
<div id="startPop">
<h3>剧情开场：太空飞船上的叔叔</h3>
<p>马里奥的叔叔搭乘深空飞船前往地球，舷窗外是蓝色地球，他一边喝热咖啡，一边发愁开店资金缺口。</p>
<p>他在飞船里写完周边门店创业计划书，启动、备货、连锁扩张的资金全部不足。</p>
<p>远程联系马里奥，委托他闯关收集金币，凑齐全部创业融资！</p>
<button onclick="startGame()">出发闯关，帮叔叔融资</button>
</div>
<div id="levelPop">
<h3 id="popTitle">关卡通关提示</h3>
<p id="popStory"></p>
<p>累计创业融资金币：<span id="goldTotalNum">0</span></p>
<button onclick="switchNextLevel()">前往下一关</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;
const startPop = document.getElementById('startPop');
const levelPop = document.getElementById('levelPop');
const popTitleText = document.getElementById('popTitle');
const popStoryText = document.getElementById('popStory');
const goldShow = document.getElementById('goldTotalNum');
// ========== 内置像素绘制函数（全部素材代码生成，无需外部图片） ==========
// 绘制马里奥贴纸
function drawMario(x,y,w,h,scale=1){
ctx.save();
ctx.translate(x+w/2, y+h);
ctx.scale(scale,scale);
const s = w/32;
// 红帽子
ctx.fillStyle="#e62020";
ctx.fillRect(-14*s,-30*s,28*s,16*s);
// M标志
ctx.fillStyle="#fff";
ctx.beginPath();
ctx.arc(0,-22*s,7*s,0,Math.PI*2);
ctx.fill();
ctx.fillStyle="#e62020";
ctx.fillRect(-4*s,-26*s,3*s,8*s);
ctx.fillRect(1*s,-26*s,3*s,8*s);
// 肤色脸部
ctx.fillStyle="#ffd2b3";
ctx.fillRect(-12*s,-14*s,24*s,16*s);
// 眼睛
ctx.fillStyle="#0088ff";
ctx.fillRect(-8*s,-10*s,5*s,6*s);
ctx.fillRect(3*s,-10*s,5*s,6*s);
ctx.fillStyle="#000";
ctx.fillRect(-6*s,-8*s,2*s,2*s);
ctx.fillRect(5*s,-8*s,2*s,2*s);
// 胡子
ctx.fillStyle="#222";
ctx.fillRect(-10*s,-4*s,20*s,4*s);
// 大鼻子
ctx.fillStyle="#ffd2b3";
ctx.beginPath();
ctx.arc(0,0,7*s,0,Math.PI*2);
ctx.fill();
// 嘴巴
ctx.fillStyle="#c82020";
ctx.fillRect(-6*s,4*s,12*s,5*s);
// 红上衣
ctx.fillStyle="#e62020";
ctx.fillRect(-14*s,6*s,28*s,14*s);
// 蓝色背带裤
ctx.fillStyle="#2078e6";
ctx.fillRect(-12*s,14*s,24*s,18*s);
// 黄色纽扣
ctx.fillStyle="#ffdd00";
ctx.beginPath();
ctx.arc(-6*s,16*s,3*s,0,Math.PI*2);
ctx.arc(6*s,16*s,3*s,0,Math.PI*2);
ctx.fill();
// 白手套
ctx.fillStyle="#fff";
ctx.fillRect(-16*s,-26*s,8*s,10*s);
ctx.fillRect(8*s,18*s,8*s,8*s);
// 棕色鞋子
ctx.fillStyle="#965428";
ctx.fillRect(-14*s,30*s,10*s,6*s);
ctx.fillRect(4*s,30*s,10*s,6*s);
ctx.restore();
}
// 绘制太空飞船背景
function drawShipBg(){
ctx.save();
ctx.globalAlpha=0.3;
const x=100,y=80,w=600,h=320;
//
我要赚赏金
STM32
MCU
通讯及无线技术
物联网技术
电子DIY
板卡试用
基础知识
软件与操作系统
我爱生活
小e食堂
