mirror of
https://github.com/taigrr/JSPong
synced 2025-01-18 04:33:12 -08:00
Initial Commit
This commit is contained in:
Tai Groot
commit
e1276ec55e
40
custom.js
Executable file
40
custom.js
Executable file
@ -0,0 +1,40 @@
|
||||
addShortcut(function(){
|
||||
toggleFullScreen();
|
||||
},[key.F]);
|
||||
|
||||
addShortcut(function(){
|
||||
userDir=-1;
|
||||
},[key.UP]);
|
||||
addRemovalShortcut(function(){
|
||||
userDir=0;
|
||||
},[key.UP]);
|
||||
addRemovalShortcut(function(){
|
||||
userDir=0;
|
||||
},[key.DOWN]);
|
||||
addShortcut(function(){
|
||||
userDir=1;
|
||||
},[key.DOWN]);
|
||||
addRemovalShortcut(function(){
|
||||
console.log(1);
|
||||
},[key.DOWN]);
|
||||
addShortcut(function(){
|
||||
console.log(2);
|
||||
},[key.DOWN]);
|
||||
|
||||
|
||||
//keep in mind that alert() blocks the keyup event, so if you have problems, include the following in your code:
|
||||
//to release all keys:
|
||||
|
||||
// addShortcut(function(){
|
||||
// alert("You pressed the keys Control, Y, and Enter.");
|
||||
// releaseAllKeys();
|
||||
// },[key.CTRL,key.Y,key.ENTER]);
|
||||
// //This may not be desireable, as the user might still have keys pressed on the keyboard, and this would require the user to let up all keys.
|
||||
// //It might be better to only release one key, but check out how only releasing select keys might be problematic:
|
||||
// addShortcut(function(){
|
||||
// alert("You pressed the keys 1, 2, and 3.");
|
||||
|
||||
// releaseKeys([key.ONE,key.TWO]);
|
||||
// // keyStrokes[key.THREE] = false;
|
||||
// },[key.ONE,key.TWO,key.THREE]);
|
||||
// //alternatively, usee releaseKey() to release only one key
|
||||
159
gameScripts.js
Executable file
159
gameScripts.js
Executable file
@ -0,0 +1,159 @@
|
||||
var score=0;
|
||||
var isMute = false;
|
||||
//var kingAudio = new Audio('King.mp3'), knockAudio = new Audio('Knock.mp3'), matchAudio = new Audio('match.mp3');
|
||||
|
||||
var canvas;
|
||||
var ctx;
|
||||
var width;
|
||||
var height;
|
||||
|
||||
var ballDir=1;
|
||||
var userDir=0;
|
||||
var compDir=0;
|
||||
var gameSpeed=2;
|
||||
|
||||
var userLoc, compLoc, ballXLoc, ballYLoc;
|
||||
|
||||
var gameLoop
|
||||
|
||||
function newGame()
|
||||
{
|
||||
canvas = document.getElementById("myCanvas");
|
||||
canvas.width=screen.availWidth*.98;
|
||||
canvas.height=screen.availHeight*.899;
|
||||
ctx = canvas.getContext("2d");
|
||||
width = canvas.width;
|
||||
height = canvas.height;
|
||||
userLoc = height*.45-10;
|
||||
compLoc = height*.5-10;
|
||||
ballXLoc = width*.06-10;
|
||||
ballYLoc = height*.5-10;
|
||||
gameOver = false;
|
||||
drawBoard();
|
||||
// fillBoard();
|
||||
// makePiecesDraggable();
|
||||
// makeMouseUpDetectable();
|
||||
// lastPlayer="null";
|
||||
// locationCount=1;
|
||||
// isMute = false;
|
||||
// multPossible = false;
|
||||
// gameLoop= setInterval(move,5);
|
||||
|
||||
}
|
||||
function toggleFullScreen()
|
||||
{
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement)
|
||||
{
|
||||
if (canvas.requestFullscreen)
|
||||
{
|
||||
canvas.requestFullscreen();
|
||||
}
|
||||
else if (canvas.mozRequestFullScreen)
|
||||
{
|
||||
canvas.mozRequestFullScreen();
|
||||
}
|
||||
else if (canvas.webkitRequestFullscreen)
|
||||
{
|
||||
canvas.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
function drawBoard()
|
||||
{
|
||||
ctx.fillStyle = "#D3D3D3";
|
||||
ctx.fillRect(0,0,width,height);
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.fillRect(0,height*.95,width,15);
|
||||
ctx.fillRect(0,height*.05,width,15);
|
||||
// ctx.strokeStyle = "#98999A";
|
||||
// for(var i=100;i<=800;i+=100)
|
||||
// {
|
||||
// ctx.moveTo(0,i);
|
||||
// ctx.lineTo(800,i);
|
||||
// // ctx.stroke();
|
||||
// }
|
||||
// ctx.stroke();
|
||||
drawUser();
|
||||
drawBall();
|
||||
drawComp();
|
||||
}
|
||||
|
||||
function drawUser()
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
userLoc=userLoc+gameSpeed*userDir;
|
||||
if(userLoc>height*.95-175)
|
||||
{
|
||||
userLoc=height*.95-175;
|
||||
}
|
||||
else if(userLoc<height*.05)
|
||||
{
|
||||
userLoc=height*.05;
|
||||
}
|
||||
ctx.fillRect((width*.96)-10,userLoc,50,175);
|
||||
}
|
||||
|
||||
function drawComp()
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.fillRect((width*.02),compLoc,50,175);
|
||||
}
|
||||
|
||||
function drawBall()
|
||||
{
|
||||
ctx.fillStyle = "#000000";
|
||||
if((ballYLoc-userLoc<=175&&userLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.96-10))<3)||(ballYLoc-compLoc<=175&&compLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.02+50))<3))
|
||||
{
|
||||
ballDir*=-1;
|
||||
}
|
||||
ballXLoc=ballXLoc + gameSpeed*ballDir;
|
||||
ctx.fillRect(ballXLoc,ballYLoc,25,25);
|
||||
if(ballXLoc>width||ballXLoc<-10)
|
||||
{
|
||||
newGame();
|
||||
}
|
||||
}
|
||||
function move()
|
||||
{
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawBoard();
|
||||
// userDir=0;
|
||||
// compDir=0;
|
||||
// gameSpeed=5;
|
||||
//requestAnimationFrame(move);
|
||||
|
||||
}
|
||||
function mute()
|
||||
{
|
||||
var holder = document.getElementById("soundHolder");
|
||||
if(isMute)
|
||||
{
|
||||
holder.style.backgroundPosition = "0px 0px";
|
||||
}
|
||||
else
|
||||
{
|
||||
holder.style.backgroundPosition = "60px 0px";
|
||||
}
|
||||
isMute = !isMute;
|
||||
playSound("match");
|
||||
}
|
||||
|
||||
function playSound(soundType)
|
||||
{
|
||||
if(!isMute)
|
||||
{
|
||||
if(soundType == "match")
|
||||
{
|
||||
matchAudio.play();
|
||||
}
|
||||
else if(soundType == 'Knock')
|
||||
{
|
||||
knockAudio.play();
|
||||
}
|
||||
else if(soundType == "King")
|
||||
{
|
||||
kingAudio.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
21
index.html
Executable file
21
index.html
Executable file
@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="lib.js"></script>
|
||||
<script src="gameScripts.js"></script>
|
||||
<script src="custom.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
</head>
|
||||
<link rel="stylesheet" type="text/css" href="gameStyles.css"/>
|
||||
<center>
|
||||
<canvas id="myCanvas" style="border:3px solid #98999A;">
|
||||
Your browser does not support the HTML5 canvas tag. <br>
|
||||
Try using a more modern browser, like <a href="https://www.google.com/chrome/browser/">Google Chrome</a>,to play the game.
|
||||
</canvas>
|
||||
</center>
|
||||
<script>
|
||||
newGame();
|
||||
setInterval(move,5);
|
||||
|
||||
//var checkStats = setInterval(function(){if(keyIsDown(key.A)){console.log("DOWN");}}, 10);
|
||||
</script>
|
||||
</html>
|
||||
84
lib.js
Executable file
84
lib.js
Executable file
@ -0,0 +1,84 @@
|
||||
/*
|
||||
JSKeyCapture Version 1.0
|
||||
Written by: Tai Groot, FreLancelot
|
||||
Last revision date: 18 April, 2016
|
||||
Contact: groot.tai@gmail.com
|
||||
*/
|
||||
|
||||
var keyStrokes = [];
|
||||
window.callDefinedFunction = function(callback,keyCodeValues){
|
||||
if(typeof callback !== "function")
|
||||
throw new TypeError("Expected callback as first argument");
|
||||
if(typeof keyCodeValues !== "object" && (!Array.isArray || Array.isArray(keyCodeValues)))
|
||||
throw new TypeError("Expected array as second argument");
|
||||
var pressedKeysValid = true;
|
||||
for(var i = 0; i < keyCodeValues.length; ++i)
|
||||
pressedKeysValid = pressedKeysValid && keyStrokes[keyCodeValues[i]];
|
||||
if(pressedKeysValid)
|
||||
callback();
|
||||
};
|
||||
window.addShortcut = function(callback,keyCodeValues){
|
||||
if(typeof keyCodeValues === "number")
|
||||
keyCodeValues = [keyCodeValues];
|
||||
var funct = function(cb,val){
|
||||
return function(e){
|
||||
keyStrokes[e.keyCode] = true;
|
||||
callDefinedFunction(cb,val);
|
||||
};
|
||||
}(callback,keyCodeValues);
|
||||
window.addEventListener('keydown',funct);
|
||||
return funct;
|
||||
};
|
||||
window.addRemovalShortcut = function(callback,keyCodeValues){
|
||||
if(typeof keyCodeValues === "number")
|
||||
keyCodeValues = [keyCodeValues];
|
||||
var funct = function(cb,val){
|
||||
return function(e){
|
||||
keyStrokes[e.keyCode] = false;
|
||||
callDefinedRemovalFunction(cb,val);
|
||||
};
|
||||
}(callback,keyCodeValues);
|
||||
window.addEventListener('keyup',funct);
|
||||
return funct;
|
||||
};
|
||||
window.callDefinedRemovalFunction = function(callback,keyCodeValues){
|
||||
if(typeof callback !== "function")
|
||||
throw new TypeError("Expected callback as first argument");
|
||||
if(typeof keyCodeValues !== "object" && (!Array.isArray || Array.isArray(keyCodeValues)))
|
||||
throw new TypeError("Expected array as second argument");
|
||||
var pressedKeysValid = true;
|
||||
for(var i = 0; i < keyCodeValues.length; ++i)
|
||||
pressedKeysValid = pressedKeysValid && !keyStrokes[keyCodeValues[i]];
|
||||
if(pressedKeysValid)
|
||||
callback();
|
||||
};
|
||||
window.addEventListener('keyup',function(e){
|
||||
keyStrokes[e.keyCode] = false;
|
||||
});
|
||||
function releaseAllKeys()
|
||||
{
|
||||
for(var i=0;i< keyStrokes.length;i++)
|
||||
{
|
||||
keyStrokes[i] = false;
|
||||
}
|
||||
}
|
||||
function releaseKeys(toRelease)
|
||||
{
|
||||
if(typeof toRelease !== "object" && (!Array.isArray || Array.isArray(toRelease)))
|
||||
throw new TypeError("Expected array");
|
||||
for(var i=0;i< toRelease.length;i++)
|
||||
{
|
||||
keyStrokes[toRelease[i]] = false;
|
||||
}
|
||||
}
|
||||
function releaseKey(toRelease)
|
||||
{
|
||||
keyStrokes[toRelease] = false;
|
||||
}
|
||||
var key = {
|
||||
A:65,B:66,C:67,D:68,E:69,F:70,G:71,H:72,I:73,J:74,K:75,L:76,M:77,N:78,O:79,P:80,Q:81,R:82,S:83,T:84,U:85,V:86,W:87,X:88,Y:89,Z:90,
|
||||
ZERO:48,ONE:49,TWO:50,THREE:51,FOUR:52,FIVE:53,SIX:54,SEVEN:55,EIGHT:56,NINE:57,
|
||||
SHIFT:16,CTRL:17,ALT:18,
|
||||
ENTER:13,
|
||||
LEFT:37,UP:38,RIGHT:39,DOWN:40
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user