Skip to content

1024云IDE应用挑战赛
1024云IDE应用挑战赛

下唐人 / 1024云IDE应用挑战赛
与 Fork 源项目一致

Fork自 Cloud IDE / 1024云IDE应用挑战赛

通知 1
Star 0
Fork 0
1024云IDE应用挑战赛
1024云IDE应用挑战赛

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 93ba99c8 编写于 作者: 下唐人's avatar 下唐人
浏览文件
操作

Initial commit

上级 e63fb81c
隐藏空白更改
内联 并排
Showing with 214 addition and 13 deletion
bg.png 0 → 100644
浏览文件 @ 93ba99c8
bg.png

496.1 KB

bg_music.mp3 0 → 100755
浏览文件 @ 93ba99c8
文件已添加
click.ogg 0 → 100755
浏览文件 @ 93ba99c8
文件已添加
hit.wav 0 → 100755
浏览文件 @ 93ba99c8
文件已添加
index.html
浏览文件 @ 93ba99c8
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="src/style.css">
<title></title>
</head>
<body>
<div class="app">
<img src="src/logo.svg" width="100px">
<h1>欢迎使用 Cloud IDE</h1>
官网：<a href="https://ide.csdn.net" target="_blank">https://ide.csdn.net</a>
</div>
<audio id="bg_music" src="bg_music.mp3" controls="controls" autoplay="autoplay" style="left:100px; position:absolute; top:0px;" hidden="true"></audio>
<audio id="hit" src="hit.wav" controls="controls" autoplay="autoplay" style="left:300px; position:absolute; top:0px;" hidden="true"></audio>
<audio id="click" src="click.ogg" controls="controls" autoplay="autoplay" style="left:500px; position:absolute; top:0px;" hidden="true"></audio>
<div id="viewport" style="left:100px; width:762px; height:486px; position: absolute; top: 80px; border: #000000 3px solid; background-image:url(bg.png); background-size:762px; cursor:hand;">
<li id="time_info" style="left:10px; color:#ffffff; position: absolute; top:10px;">游戏时间：</li>
<li id="p_score_info" style="left:10px; color:#ffffff; position: absolute; top:30px;">玩家总分：</li>
<li id="s_score_info" style="left:10px; color:#ffffff; position: absolute; top:50px;">系统总分：</li>
<li id="rate" style="left:10px; color:#ffffff; position: absolute; top:70px;">分数比率：</li>
<h1 style="left:200px; color:#ffffff; position: absolute; top:-20px;">捡馅饼游戏</h1>
<p style="left:400px; color:#000000; position: absolute; top:0px;">玩法：把鼠标移动到从空中飘落的小卡片上。</p>
<input type="button" id="play_bg_music" value="播放背景音乐" onclick="play_bg_music()" style="left:10px; position: absolute; top:450px;">
<input type="button" id="stop_bg_music" value="停止播放背景音乐" onclick="stop_bg_music()" style="left:110px; position: absolute; top:450px;">
<input type="button" id="start" value="开始游戏" onclick="start_game()" style="left:310px; position: absolute; top:450px;">
<input type="button" id="end" value="结束游戏" onclick="end_game()" style="left:385px; position: absolute; top:450px;">
<div id="Div0" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;" onclick="div_on_click('Div0', 'Img0')"><img id="Img0"></div>
<div id="Div1" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img1"></div>
<div id="Div2" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img2"></div>
<div id="Div3" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img3"></div>
<div id="Div4" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img4"></div>
<div id="Div5" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img5"></div>
<div id="Div6" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img6"></div>
<div id="Div7" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img7"></div>
<div id="Div8" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img8"></div>
<div id="Div9" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img9"></div>
<div id="Div10" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img10"></div>
<div id="Div11" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img11"></div>
<div id="Div12" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img12"></div>
<div id="Div13" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img13"></div>
<div id="Div14" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img14"></div>
<div id="Div15" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img15"></div>
<div id="Div16" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img16"></div>
<div id="Div17" style="left:100px; position: absolute; top: 80px; border: #ffffff 3px solid;"><img id="Img17"></div>
</div>
<div id="help" style="left:862px; width:200px; height:486px; position: absolute; top: 80px; border: #000000 3px solid;">
<h2>&nbsp;说明：</h2>
&nbsp;<img src="cloud.png"><b>得分+100</b><br>
&nbsp;<img src="tree.png"><b>得分+50</b><br>
&nbsp;<img src="room.png"><b>得分+30</b><br>
&nbsp;<img src="flower.png"><b>得分+10</b><br>
&nbsp;<img src="aoteman.png"><b><font color="red">得分-20</font></b><br>
</div>
<script language="JavaScript">
var imgSrc = [ "cloud.png", "tree.png", "room.png", "flower.png", "aoteman.png" ];
var coreScore = [ 100, 50, 30, 10, -20 ];
var pieArray = null;
var gameLoopListener = null;
var s_score = 0;
var p_score = 0;
var escapeTimeMin = 0;
var escapeTimeScnd = 0;
var gameLoopTimer;
var gamingTimer;
var isStarted = false;
function play_bg_music() {
document.getElementById( "bg_music" ).play();
}
function stop_bg_music() {
document.getElementById( "bg_music" ).pause();
}
function PieCore( _imgID ) {
this.imgID = _imgID;
this.score = 0;
this.src = "";
this.initImg = function() {
var rnd = Math.floor( Math.random() * 10 ) % 5;
document.getElementById( this.imgID ).src = imgSrc[ rnd ];
this.src = imgSrc[ rnd ];
this.score = coreScore[ rnd ];
}
}
function Pie( _divID, _imgID ) {
this.divID = _divID;
this.imgID = _imgID;
this.pieCore = null;
this.x = 0;
this.y = 0;
this.moveTo = function( _x, _y ) {
if ( _x > 612 ) { _x -= 612; }
document.getElementById( this.divID ).style.marginLeft = _x;
document.getElementById( this.divID ).style.marginTop = _y;
this.x = _x;
this.y = _y;
}
this.addGameLoopEventListener = function() {
gameLoopListener.push( this );
}
this.gameLoopEventListener = function() {
if ( Math.random() < 0.7 ) {
if ( this.pieCore.score < 0 ) {
this.moveTo( this.x + 3, this.y + 2 );
} else {
this.moveTo( this.x + 1, this.y + 1 );
}
} else {
if ( this.pieCore.score < 0 ) {
this.moveTo( this.x - 3, this.y + 2 );
} else {
this.moveTo( this.x - 1, this.y + 1 );
}
}
if ( this.y > 320 ) {
this.reset();
}
}
this.reset = function() {
this.pieCore = null;
this.pieCore = new PieCore( this.imgID );
this.pieCore.initImg();
var randX = Math.floor( Math.random() * 762 );
document.getElementById( this.divID ).style.marginLeft = randX;
document.getElementById( this.divID ).style.marginTop = 0;
this.x = randX;
this.y = Math.floor( Math.random() * 100 );
if ( this.pieCore.score > 0 ) {
s_score += this.pieCore.score;
}
}
this.addMouseEventListener = function() {
with( this ) {
document.getElementById( divID ).onclick = function() {
if ( pieCore.score < 0 ) {
return;
} else {
p_score += pieCore.score;
document.getElementById( "click" ).play();
reset();
}
};
document.getElementById( divID ).onmouseover = function() {
if ( pieCore.score < 0 ) {
p_score += pieCore.score;
document.getElementById( "hit" ).play();
reset();
} else {
p_score += pieCore.score;
document.getElementById( "click" ).play();
reset();
}
};
}
}
}
function start_game() {
if ( isStarted ) { return; }
isStarted = true;
s_score = 0;
p_score = 0;
escapeTimeMin = 0;
escapeTimeScnd = 0;
isEndGame = false;
pieArray = new Array();
gameLoopListener = new Array();
for ( i = 1; i < 18; i++ ) {
divID = "Div" + i;
imgID = "Img" + i;
pie = new Pie( divID, imgID );
pie.reset();
pie.addGameLoopEventListener();
pie.addMouseEventListener();
pieArray.push( pie );
}
for ( n in pieArray ) {
var divObj = document.getElementById( pieArray[ n ].divID );
if( divObj != null ) {
divObj.style.visibility = "visible";
}
}
document.getElementById( "bg_music" ).play();
gameLoopTimer = setInterval( GameLoop, 5 );
gamingTimer = setInterval( Timer, 1000 );
}
function Timer() {
if( ++escapeTimeScnd == 60 ) {
escapeTimeMin++;
escapeTimeScnd = 0;
}
if ( escapeTimeMin == 1 && escapeTimeScnd == 0 ) {
end_game();
}
}
function GameLoop() {
for ( n in gameLoopListener ) {
(gameLoopListener[ n ]).gameLoopEventListener();
s_score_info.firstChild.nodeValue = "系统总分：" + s_score;
p_score_info.firstChild.nodeValue = "玩家总分：" + p_score;
rate.firstChild.nodeValue = "分数比率：" + Math.floor( ( p_score / s_score * ( escapeTimeMin + ( escapeTimeScnd / 60 ) ) ) * 100 ) + "%";
time_info.firstChild.nodeValue = "游戏时间：" + escapeTimeMin + "分" + escapeTimeScnd + "秒";
}
}
function end_game() {
clearInterval( gameLoopTimer );
clearInterval( gamingTimer );
for( n in pieArray ) {
var divObj = document.getElementById( pieArray[ n ].divID );
if( divObj != null ) {
divObj.style.visibility = "hidden";
divObj = null;
}
}
pieArray = null;
document.getElementById( "bg_music" ).pause();
isStarted = false;
x = Math.floor( ( p_score / s_score * ( escapeTimeMin + ( escapeTimeScnd / 60 ) ) ) * 100 );
x2 = x;
if ( x < 60 ) { x = "不及格！！"; }
else if ( x>=60 && x<70 ) { x = "及格！"; }
else if ( x>=70 && x<80 ) { x = "良！！"; }
else { x = "牛！！！"; }
alert( "你的积分为：" + p_score + "\n系统总分为：" + s_score + "\n分数比率：" + x2 + "%\n成绩评估：" + x );
}
</script>
</body>
</html>
\ No newline at end of file
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或