mirror of
https://github.com/ParadiseSS13/Paradise.git
synced 2025-12-19 23:01:35 +00:00
282 lines
7.2 KiB
HTML
282 lines
7.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Claw Game</title>
|
|
<link rel="stylesheet" type="text/css" href="page.css" />
|
|
<script src="libraries.min.js"></script>
|
|
<!-- Prize.js --><script>
|
|
function Prize(id,css, crane) {
|
|
var top = css['top'];
|
|
var left = css['left'];
|
|
var original_left = css['left'];
|
|
hspd = 15;
|
|
vspd = 5;
|
|
var state = 'falling';
|
|
var error;
|
|
|
|
var rand = Math.floor(Math.random()*10);
|
|
css['background'] = 'url(prize_inside.png) no-repeat center';
|
|
var pic = $('<div></div>').attr({'id':'prize'+id,class:'prize-ball'}).css(css);
|
|
var ball = $('<div></div>').css({height: 60,'background':'url(prizeorbs.png) no-repeat -4px -'+62*rand+'px'});
|
|
$(pic).append(ball);
|
|
$('#game').append(pic);
|
|
|
|
this.GetState = function() {return state};
|
|
|
|
var CheckBoundaries = function () {
|
|
|
|
if(left < 52)
|
|
left = 52;
|
|
else if(left > 812)
|
|
left = 812;
|
|
|
|
if(top < 30)
|
|
top = 30;
|
|
else if(top > 347 && state !='won' && state !='hidden') {
|
|
top = 347;
|
|
state = 'resting';
|
|
} else if(top > 500 && state =='won') {
|
|
top = 500;
|
|
}
|
|
};
|
|
|
|
var CheckGrabbed = function() {
|
|
var tmp = Math.floor(Math.random()*100);
|
|
if(tmp>error) {
|
|
setTimeout(function(){
|
|
state='falling';
|
|
$('#debug-streak').html(0); //reset streak
|
|
setTimeout(gameShutDown,500); //end game because you dropped it
|
|
},4*error+300);
|
|
}else{
|
|
prizeWon = true; // Incase you are interupted, you still get a prize.
|
|
}
|
|
state = 'is grabbed';
|
|
};
|
|
|
|
var IsGrabbed = function() {
|
|
top = crane.GetTop()+65;
|
|
|
|
if(top > 347)
|
|
top = 347;
|
|
|
|
left = crane.GetLeft()+23;
|
|
if(left <= 60) { // Claw has reached the drop-off with payload.
|
|
left = 60;
|
|
state = 'won';
|
|
}
|
|
};
|
|
|
|
this.GetError = function(offset) {
|
|
return Math.floor(160/(.1*offset+1)-60);
|
|
};
|
|
|
|
this.Update = function () {
|
|
|
|
if(crane.GetState() == 'down' && state=='resting') {
|
|
var offset = Math.abs(left - crane.GetLeft()-23);
|
|
error = this.GetError(offset);
|
|
if(error > 0) {
|
|
state = 'being grabbed';
|
|
$('#debug-errorpx').html(Math.abs(offset)+'px');
|
|
$('#debug-errordrop').html(error+'%');//debugging
|
|
}
|
|
}
|
|
|
|
if(crane.GetState() == 'up' && state=='being grabbed')
|
|
CheckGrabbed();
|
|
|
|
if((crane.GetState() == 'drop' || crane.GetState() == 'up') && state=='is grabbed')
|
|
IsGrabbed();
|
|
|
|
if(state=='falling'||state=='won')
|
|
top += vspd;
|
|
|
|
if(state=='won' && top > 460) {
|
|
$('#prize'+id).remove();
|
|
state='hidden';
|
|
gameShutDown();
|
|
}
|
|
|
|
CheckBoundaries();
|
|
};
|
|
|
|
this.Repaint = function () {
|
|
$('#prize'+id).css({'top':top, 'left':left});
|
|
};
|
|
|
|
}</script>
|
|
<!-- Crane.js --><script>
|
|
function Crane(id) {
|
|
var top = 131; //private
|
|
var left = 100;
|
|
var hspd = 5;
|
|
var vspd = 4;
|
|
var state = false;
|
|
var handleHeight = 83;
|
|
var frames = {
|
|
normal: {'background-position': '-36px -34px',left:11},
|
|
half: {'background-position': '-36px -148px',left:6},
|
|
open: {'background-position': '-28px -270px',left:-2}
|
|
};
|
|
|
|
this.GetState = function() {return state};
|
|
this.GetLeft = function() {return left};
|
|
this.GetTop = function() {return top};
|
|
|
|
var Grab = function () {
|
|
switch (state) {
|
|
case 'up':
|
|
top -= vspd;
|
|
handleHeight -= vspd;
|
|
if(top < 131) { // when going up
|
|
top = 131;
|
|
handleHeight = 83;
|
|
state = 'drop';
|
|
}
|
|
break;
|
|
case 'down': // when going down
|
|
top += vspd;
|
|
handleHeight += vspd;
|
|
if(top > 300) {
|
|
top = 300;
|
|
state = 'up';
|
|
$('#'+id+' #crane-claw').css(frames['half']);
|
|
}
|
|
break;
|
|
case 'drop': // when up and dropping
|
|
left -= hspd;
|
|
top = 131;
|
|
handleHeight = 83;
|
|
if(left < 30) {
|
|
left = 30;
|
|
$('#'+id+' #crane-claw').css(frames['open']);
|
|
setTimeout(function(){$('#'+id+' #crane-claw').css(frames['normal']);state = false;},500);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
var CheckBoundaries = function () {
|
|
if(left < 30)
|
|
left = 30;
|
|
else if(left > 788)
|
|
left = 788;
|
|
};
|
|
|
|
this.Update = function () {
|
|
if(!state){
|
|
if(keys["left"]) //Move claw left
|
|
left -= hspd;
|
|
|
|
if(keys["right"]) // Move claw right
|
|
left += hspd;
|
|
|
|
if(keys["down"]){ // Drop claw.
|
|
state = 'down';
|
|
$('#'+id+' #crane-claw').css(frames['open']);
|
|
}
|
|
}else{
|
|
Grab();
|
|
}
|
|
|
|
CheckBoundaries();
|
|
};
|
|
|
|
this.Repaint = function () {
|
|
$('#'+id).css({'top':top, 'left':left});
|
|
$('#'+id+' #crane-handle-top').css({height: handleHeight});
|
|
};
|
|
}</script>
|
|
<!-- main.js --><script>
|
|
var crane = new Crane('crane');
|
|
var keys = [];
|
|
var prizes = [];
|
|
var prizeWon = false;
|
|
|
|
window.requestAnimFrame = (function(callback){
|
|
return window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
window.oRequestAnimationFrame ||
|
|
window.msRequestAnimationFrame ||
|
|
function(callback){
|
|
window.setTimeout(callback, 33.333); //1000 / 30
|
|
};
|
|
})();
|
|
|
|
function animate(){
|
|
crane.Update();
|
|
for(var i=0; i<prizes.length; i++){
|
|
prizes[i].Update();
|
|
prizes[i].Repaint();
|
|
}
|
|
|
|
crane.Repaint();
|
|
requestAnimFrame(function(){
|
|
animate();
|
|
});
|
|
}
|
|
|
|
function joystickControlOn(direction){
|
|
keys[direction] = true;
|
|
}
|
|
function joystickControlOff(direction){
|
|
keys[direction] = false;
|
|
}
|
|
function gameStartUp(){ //main function
|
|
document.getElementById("play_btn").disabled = true; //to prevent button-mashing the start button.
|
|
for(var i=0; i<5; i++){ // Creates prize balls.
|
|
prizes[i] = new Prize(i,{top: Math.ceil(Math.random()*100),left: 400+i*100-Math.ceil(Math.random()*50)},crane);
|
|
}
|
|
animate();
|
|
}
|
|
function checkPrize(){
|
|
// Tells the machine if it should drop a prize.
|
|
prizeWon?document.getElementById("close_nao").href = "byond://?src=/* ref src */;prizeWon=1":document.getElementById("close_nao").href = "byond://?src=/* ref src */;prizeWon=0";
|
|
}
|
|
function gameShutDown(){
|
|
checkPrize();
|
|
if(prizeWon){ emergencyShutDown(); }else{
|
|
document.getElementById('game').innerHTML = '<br><br><br><div class="end-text"><center><h1> GAME OVER!</h1><br><h2>BETTER LUCK NEXT TIME!</h2></center></div>';
|
|
}
|
|
}
|
|
// Runs if close window or press close button.
|
|
function emergencyShutDown(){
|
|
checkPrize();
|
|
document.getElementById("close_nao").click();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id='game' style='position: relative;height: 520px;width: 900px;'>
|
|
<div id="background"></div>
|
|
|
|
<div id="crane">
|
|
<div id="crane-handle-top"></div>
|
|
<div id="crane-handle-bottom"></div>
|
|
|
|
<div id="crane-claw"></div>
|
|
<div id="crane-center"></div>
|
|
</div>
|
|
|
|
<div id="grayorbs-chute"></div>
|
|
|
|
<div id="foreground"></div>
|
|
|
|
</div>
|
|
|
|
<div id='controls' style='position: absolute; left: 385px;'>
|
|
<br>
|
|
<button class="button" id="play_btn" onclick="gameStartUp()">Play Now!</button>
|
|
<button class="button" id="close_btn" onclick="emergencyShutDown()">Close.</button>
|
|
<a id="close_nao" hidden="true" href="byond://?src=/* ref src */;prizeWon=0"></a>
|
|
<br>
|
|
<button onmouseover="joystickControlOn('left')" onmouseout="joystickControlOff('left')">/==<br>\==</button>
|
|
<button class="button" onmousedown="joystickControlOn('down')" onmouseup="joystickControlOff('down')">DROP<br>CLAW</button>
|
|
<button onmouseover="joystickControlOn('right')" onmouseout="joystickControlOff('right')">==\<br>==/</button>
|
|
</div>
|
|
</body>
|
|
</html>
|