Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChenPanXYZ
ChenPanXYZ committed Nov 10, 2019
1 parent 03fd490 commit 061b142
Show file tree
Hide file tree
Showing 7 changed files with 1,081 additions and 0 deletions.
Binary file added 1.zip
View file
Binary file not shown.
256 changes: 256 additions & 0 deletions back
View file
@@ -0,0 +1,256 @@
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="/game/style.css">
<div class="container">
<header class="title">
<h2>JavaScript Snake Game</h2>
<h3 id="score">Score: </h3>
</header>
</div>

<div class="container">
<section class="overlay">
<div class="gameOverGrid">
<h3 id="gameOver">You lose!</h3>
</div>
<button class="gameOverGrid btn">Play</button>
</section>
<section id="gameBoard"></section>
</div>

<script>

var gameBoardSize = 40;
var gamePoints = 0;
var gameSpeed = 100;

$(document).ready(function () {
console.log("Ready Player One!");
createBoard();
$(".btn").click(function() {
startGame();
});
});

var Snake = {
position: [[20, 20], [20, 19], [20, 18]], // snake start position
size: 3,
direction: "r",
alive: true
}

var Food = {
position: [],
present: false
}

function createBoard() {
$("#gameBoard").empty();
var size = gameBoardSize;

for (i = 0; i < size; i++) {
$("#gameBoard").append('<div class="row"></div>');
for (j = 0; j < size; j++) {
$(".row:last-child").append('<div class="pixel"></div>');
}
}
}

function moveSnake() {
// var x = direction['x'] - 320;
// var y = direction['y'] - 320;
// var length = sqrt((abs(x)^2) + (abs(y)^2));
// x = x / length;
// y = y /length;
// var head = Snake.position[0].slice();
head[1] += x;
//head[0] += y;

// switch (Snake.direction) {
// case 'r':
// head[1] += 1;
// break;
// case 'l':
// head[1] -= 1;
// break;
// case 'u':
// head[0] -= 1;
// break;
// case 'd':
// head[0] += 1;
// break;
// }

// check after head is moved
if (alive(head)) {
// draw head
$(".row:nth-child(" + head[0] + ") > .pixel:nth-child(" + head[1] + ")").addClass("snakePixel");

// draw rest of body loop
for (var i = 0; i < Snake.size; i++) {
$(".row:nth-child(" + Snake.position[i][0] + ") > .pixel:nth-child(" + Snake.position[i][1] + ")").addClass("snakePixel");
}

// if head touches food
if (head.every(function(e,i) {
return e === Food.position[i];
})) {
Snake.size++;
Food.present = false;
gamePoints += 5;
$(".row:nth-child(" + Food.position[0] + ") > .pixel:nth-child(" + Food.position[1] + ")").removeClass("foodPixel");
$("#score").html("Score: "+gamePoints)
if (gamePoints % 16 == 0 && gameSpeed > 10) { gameSpeed -= 5; };
} else {
$(".row:nth-child(" + Snake.position[Snake.size-1][0] + ") > .pixel:nth-child(" + Snake.position[Snake.size-1][1] + ")").removeClass("snakePixel");
Snake.position.pop();
}
Snake.position.unshift(head);
} else {
gameOver();
}
}


function generateFood() {
if (Food.present === false) {
Food.position = [Math.floor((Math.random()*40) + 1), Math.floor((Math.random()*40) + 1)]
Food.present = true;
console.log("Food at: "+Food.position);
$(".row:nth-child(" + Food.position[0] + ") > .pixel:nth-child(" + Food.position[1] + ")").addClass("foodPixel");
}
}

function gameLoop() {
setTimeout(function() {
generateFood();
moveSnake();
if (Snake.alive) {gameLoop(); }
}, gameSpeed);
}

function alive(head) {
// head check
if (head[0] < 1 || head[0] > 40 || head[1] < 1 || head[1] > 40) {
return false;
}
// wall collision
if (Snake.position[0][0] < 1 || Snake.position[0][0] > 40 || Snake.position[0][1] < 1 || Snake.position[0][1] > 40) {
return false;
}
// self collision
for (var i = 1; i < Snake.size; i++) {
if ((Snake.position[0]).every(function(element,index) {
return element === Snake.position[i][index];
})) {
return false;
}
}
return true;
}

function gameOver() {
Snake.alive = false;
console.log("Game Over!");
$(".overlay").show();
$("#gameOver").show();
var blink = function() {
$(".row:nth-child(" + Snake.position[0][0] + ") > .pixel:nth-child(" + Snake.position[0][1] + ")").toggleClass("snakePixel");
}

var i = 0;
function blinkLoop() {
blink();
setTimeout(function() {
i++;
if (i < 10) { blinkLoop();}
}, 400);
}
blinkLoop();
}

function startGame() {
// reset game settings
Snake.size = 3;
Snake.position = [[20,20],[20,19],[20,18]];
Snake.direction = "r";
Snake.alive = true;
gameSpeed = 100;
gamePoints = 0;
Food.present = false;

// start game
createBoard();
$(".overlay").hide();
gameLoop();
}


function keyPress() {

// var o_x = 320;
// var o_y = 320;
// var sin;
// if(x < 320 && y < 320) {
// //fourth dim
// if(Math.abs(x - o_x) > Math.abs(y - o_y) && Snake.direction != "l") {
// Snake.direction = "r";
// }
// else if(Math.abs(x - o_x) < Math.abs(y - o_y) && Snake.direction != "u"){
// Snake.direction = "d";
// }
// }
// else if(x > 320 && y > 320) {
// //third dim
// if(Math.abs(x - o_x) > (y - o_y) && Snake.direction != "r") {
// Snake.direction = "l";
// }
// else if(Math.abs(x - o_x) < (y - o_y) && Snake.direction != "u"){
// Snake.direction = "d";
// }
// }

// else if(x > 320 && y < 320) {
// //second dim
// if(Math.abs(x - o_x) > Math.abs(y - o_y) && Snake.direction != "r") {
// Snake.direction = "l";
// }
// else if(Math.abs(x - o_x) < Math.abs(y - o_y) && Snake.direction != "d"){
// Snake.direction = "u";
// }
// }

// else if(x < 320 && y < 320) {
// //first dim
// if(Math.abs(x - o_x) > Math.abs(y - o_y) && Snake.direction != "l") {
// Snake.direction = "r";
// }
// else if(Math.abs(x - o_x) < Math.abs(y - o_y) && Snake.direction != "d"){
// Snake.direction = "u";
// }
// }

// $(document).one("keydown", function(key) {
// switch(key.which) {
// case 37: // left arrow
// if (Snake.direction != "r") {Snake.direction = "l";}
// break;
// case 38: // up arrow
// if (Snake.direction != "d") {Snake.direction = "u";}
// break;
// case 39: // right arrow
// if (Snake.direction != "l") {Snake.direction = "r";}
// break;
// case 40: // down arrow
// if (Snake.direction != "u") {Snake.direction = "d";}
// break;
// }
// });
}
</script>
<script>
var direction;
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js'></script>
<script src='https://unpkg.com/ml5@0.1.1/dist/ml5.min.js'></script>
<script src="/game/direction.js"></script>
91 changes: 91 additions & 0 deletions camera.html
View file
@@ -0,0 +1,91 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - ml5 posenet</title>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js'></script>
<script src='https://unpkg.com/ml5@0.1.1/dist/ml5.min.js'></script>
<script id="rendered-js">
let video;
let poseNet;
let poses = [];
let skeletons = [];

function setup() {
createCanvas(640, 480);

video = createCapture(VIDEO);
video.size(width, height);

// Create a new poseNet method with a single detection
poseNet = ml5.poseNet(video, modelReady);
// This sets up an event that fills the global variable "poses"
// with an array every time new poses are detected
poseNet.on('pose', function (results) {
poses = results;
console.log(poses);
});
// Hide the video element, and just show the canvas
video.hide();
}

function modelReady() {
select('#status').html('Model Loaded');
}

function draw() {
image(video, 0, 0, width, height);

// We can call both functions to draw all keypoints and the skeletons
drawKeypoints();
drawSkeleton();
}

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
// Loop through all the poses detected
for (let i = 0; i < poses.length; i++) {if (window.CP.shouldStopExecution(0)) break;
// For each pose detected, loop through all the keypoints
for (let j = 0; j < poses[i].pose.keypoints.length; j++) {if (window.CP.shouldStopExecution(1)) break;
// A keypoint is an object describing a body part (like rightArm or leftShoulder)
let keypoint = poses[i].pose.keypoints[j];
// Only draw an ellipse is the pose probability is bigger than 0.2
if (keypoint.score > 0.2) {
fill(255, 0, 0);
noStroke();
ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
}
}window.CP.exitedLoop(1);
}window.CP.exitedLoop(0);
}

// A function to draw the skeletons
function drawSkeleton() {
// Loop through all the skeletons detected
for (let i = 0; i < poses.length; i++) {if (window.CP.shouldStopExecution(2)) break;
// For every skeleton, loop through all body connections
for (let j = 0; j < poses[i].skeleton.length; j++) {if (window.CP.shouldStopExecution(3)) break;
let partA = poses[i].skeleton[j][0];
let partB = poses[i].skeleton[j][1];
stroke(255, 0, 0);
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
}window.CP.exitedLoop(3);
}window.CP.exitedLoop(2);
}
//# sourceURL=pen.js
</script>
</body>
</html>

0 comments on commit 061b142

Please sign in to comment.