mirror of
https://github.com/ParadiseSS13/Paradise.git
synced 2025-12-20 07:12:55 +00:00
7ac2826037
Fixes #2795 - Game will now close if you wander away from the machine - Cannot use the game while laying down/dead - Game can now be closed like a normal window, and will behave properly when doing so - Dropped prizes will actually visibly fall before the game over screen appears - Claw game will now properly use machine processing for power and such Also some code adjustments to help make it more organized or something. - Seriously though, it does clean some stuff up and removes a redundant variable
290 lines
7.4 KiB
HTML
290 lines
7.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Crane 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);
|
|
|
|
//console.log(crane);
|
|
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);
|
|
}
|
|
|
|
state = 'is grabbed';
|
|
};
|
|
|
|
var IsGrabbed = function() {
|
|
top = crane.GetTop()+65;
|
|
|
|
if(top > 347)
|
|
top = 347;
|
|
|
|
left = crane.GetLeft()+23;
|
|
if(left <= 60) {
|
|
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();//css({visibility:'hidden'});
|
|
state='hidden';
|
|
|
|
prizeWon = true;
|
|
gameShutDown();
|
|
}
|
|
|
|
CheckBoundaries();
|
|
};
|
|
|
|
this.Repaint = function () {
|
|
$('#prize'+id).css({'top':top, 'left':left});
|
|
//$('#'+id+' #crane-handle-top').css({height: handleHeight});
|
|
};
|
|
|
|
}</script>
|
|
<!-- Crane.js --><script>
|
|
function Crane(id) {
|
|
//console.log("crane created");
|
|
var top = 131; //private
|
|
var left = 100;
|
|
var hspd = 6;
|
|
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 () {
|
|
top += (state == 'down')?vspd:-vspd;
|
|
handleHeight += (state == 'down')?vspd:-vspd;
|
|
|
|
if(top > 300 && state == 'down') { //when going down
|
|
top = 300;
|
|
//handleHeight = ;
|
|
state = 'up';
|
|
$('#'+id+' #crane-claw').css(frames['half']);
|
|
} else if(top < 131 && state == 'up') { //when going up
|
|
top = 131;
|
|
handleHeight = 83;
|
|
state = 'drop';
|
|
|
|
} else if(state == '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);
|
|
|
|
}
|
|
}
|
|
};
|
|
|
|
var CheckBoundaries = function () {
|
|
|
|
if(left < 30)
|
|
left = 30;
|
|
else if(left > 788)
|
|
left = 788;
|
|
};
|
|
|
|
this.Update = function () {
|
|
//console.log(left);
|
|
if(keys["left"] && !state) //left
|
|
left -= hspd;
|
|
|
|
if(keys["right"] && !state) //right
|
|
left += hspd;
|
|
|
|
if(keys["down"] && !state) { //drop
|
|
state = 'down';
|
|
|
|
$('#'+id+' #crane-claw').css(frames['open']);
|
|
}
|
|
|
|
if(state) {
|
|
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, 1000 / 30);
|
|
};
|
|
})();
|
|
|
|
function animate(){
|
|
//console.log("animate called");
|
|
crane.Update();
|
|
|
|
for(var i = 0; i< prizes.length; i++)
|
|
prizes[i].Update();
|
|
|
|
for(var i = 0; i< prizes.length; i++)
|
|
prizes[i].Repaint();
|
|
|
|
crane.Repaint();
|
|
|
|
requestAnimFrame(function(){
|
|
animate();
|
|
});
|
|
}
|
|
|
|
function joystickControlOn(direction){
|
|
//console.log(direction);
|
|
keys[direction] = true;
|
|
}
|
|
|
|
function joystickControlOff(direction){
|
|
//console.log(direction);
|
|
keys[direction] = false;
|
|
}
|
|
|
|
function gameStartUp(){ //main function
|
|
//console.log("game start!");
|
|
document.getElementById("play_btn").disabled = true; //to prevent button-mashing the start button.
|
|
for(var i = 0; i< 5; i++)
|
|
prizes[i] = new Prize(i,{top: Math.ceil(Math.random()*100),left: 400+i*100-Math.ceil(Math.random()*50)},crane);
|
|
//console.log("prize made");
|
|
|
|
//crane.Repaint();
|
|
animate();
|
|
}
|
|
|
|
function gameShutDown(){
|
|
document.getElementById("play_btn").disabled = true;
|
|
var close_game_link = '<h2>TRY AGAIN!</h2><br><a href="byond://?src=/* ref src */;prizeWon=0">\[Close Game\]</a>'
|
|
if(prizeWon)
|
|
close_game_link = '<h2>YOU WON!</h2><br><a href="byond://?src=/* ref src */;prizeWon=1">\[Close Game\]</a>'
|
|
document.getElementById('game').innerHTML = '<center><h1> GAME OVER!</h1><br>'+close_game_link+'</center>'
|
|
}
|
|
|
|
function emergencyShutDown(){
|
|
document.getElementById("close_nao").click();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onunload="emergencyShutDown()">
|
|
|
|
<div id='game' style='position: relative;'>
|
|
<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; top: 550px'>
|
|
<br><button id="play_btn" onclick="gameStartUp()">Play Now!</button> <button id="close_btn" onclick="gameShutDown()">Close Game.</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 onmousedown="joystickControlOn('down')" onmouseup="joystickControlOff('down')">DROP<br>CLAW</button>
|
|
<button onmouseover="joystickControlOn('right')" onmouseout="joystickControlOff('right')">==\<br>==/</button>
|
|
</div>
|
|
</body>
|
|
</html>
|