mirror of
https://github.com/Cola-Echo/memory-manager-concurrent.git
synced 2026-06-07 00:05:53 +00:00
Update memory-manager-concurrent
This commit is contained in:
Cola-Echo
2
games/retrosnake/.gitattributes
vendored
Normal file
2
games/retrosnake/.gitattributes
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
62
games/retrosnake/README.md
Normal file
62
games/retrosnake/README.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# Retro Snaker
|
||||
|
||||
<p align="center">pure navtive JavaScript combined with canvas，no dependence</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://img.shields.io/github/languages/top/badges/shields.svg?style=plastic">
|
||||
<img src="https://img.shields.io/gemnasium/mathiasbynens/he.svg?style=plastic">
|
||||
</p>
|
||||
|
||||
The results are shown as follows：
|
||||
# Show
|
||||
<p align="center"><img src="images/RetroSnaker.gif" width="650" alt="RetroSnaker" /></p>
|
||||
|
||||
# How to use
|
||||
|
||||
You can do an attempt in my blog laboratory ：[http://www.chenqaq.com/lab/RetroSnake](http://www.chenqaq.com/lab/RetroSnake)
|
||||
|
||||
You can also clone this project and try it locally
|
||||
|
||||
```
|
||||
git clone https://github.com/okaychen/RetroSnake.git
|
||||
```
|
||||
|
||||
or use the `.zip`
|
||||
|
||||
And the structure about this project is very simple，you just need to open the `.html` to have a try
|
||||
|
||||
```
|
||||
RetroSnaker
|
||||
│ README.md
|
||||
│ index.html
|
||||
|
|
||||
└───images
|
||||
└───css
|
||||
│ │ main.css
|
||||
|
|
||||
└───js
|
||||
│ snake.js
|
||||
```
|
||||
|
||||
I think the focus is on the idea of the program， I do not compress，you can see the original JS
|
||||
|
||||
# About settings
|
||||
|
||||
<p align="">
|
||||
<img src="images/main.png" height="420px" width="300px">
|
||||
<img src="images/settings.png" height="420px" width="300px">
|
||||
</p>
|
||||
|
||||
Main Function：
|
||||
|
||||
1. you can choose wall as an obstacle 「on」or「off」
|
||||
|
||||
2. you can choose speed the moving speed of the snake 「slow」「normal」or「fast」
|
||||
|
||||
And the other rules are the same as the snake rules played in childhood
|
||||
|
||||
Such as：
|
||||
|
||||
- You can eat your body or hit the wall to kill yourself （under the wall model）
|
||||
|
||||
- According to how much food you eat to increase the length of the snake
|
||||
1
games/retrosnake/_config.yml
Normal file
1
games/retrosnake/_config.yml
Normal file
@@ -0,0 +1 @@
|
||||
theme: jekyll-theme-time-machine
|
||||
195
games/retrosnake/css/main.css
Normal file
195
games/retrosnake/css/main.css
Normal file
@@ -0,0 +1,195 @@
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #111;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-family: Comic sans MS, Cambria, Cochin, Georgia, Times, Times New Roman, serif
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: none;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #FFFFFF;
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
outline: none
|
||||
}
|
||||
|
||||
header {
|
||||
width: 340px;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
font-size: 32px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.score {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
font-size: 25px;
|
||||
color: #ccc;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#gameOver {
|
||||
/* 游戏结束，暂时隐藏 */
|
||||
display: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#newgame_gameOver,
|
||||
#setting_gameOver {
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#newgame_gameOver:hover,
|
||||
#setting_gameOver:hover,
|
||||
.again:hover {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#newgame_gameOver:hover::before,
|
||||
#setting_gameOver:hover::before,
|
||||
#menu a:hover::before {
|
||||
content: ">";
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.again {
|
||||
font-size: 35px;
|
||||
animation: logo-colorChange 500ms infinite linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* menu */
|
||||
|
||||
#menu {
|
||||
display: block;
|
||||
width: 340px;
|
||||
padding: 95px 0px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
@keyframes logo-colorChange {
|
||||
20% {
|
||||
color: yellow;
|
||||
}
|
||||
40% {
|
||||
color: coral;
|
||||
}
|
||||
60% {
|
||||
color: pink;
|
||||
}
|
||||
80% {
|
||||
color: cyan;
|
||||
}
|
||||
}
|
||||
|
||||
#menu h2 {
|
||||
animation: logo-colorChange 500ms infinite linear;
|
||||
display: block;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
#menu #newgame_menu,
|
||||
#menu #setting_menu {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
|
||||
/* settings */
|
||||
|
||||
#settings {
|
||||
/* 设置首先隐藏 */
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 85px 0px;
|
||||
font-size: 30px;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
@keyframes logo-ani {
|
||||
50% {
|
||||
-webkit-transform: scale(1.3, 1.3)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1.0, 1.0)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes logo-ani {
|
||||
50% {
|
||||
-webkit-transform: scale(1.3, 1.3)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1.5, 1.5)
|
||||
}
|
||||
}
|
||||
|
||||
#settings h2 {
|
||||
-webkit-animation: logo-ani 1000ms linear infinite;
|
||||
animation: logo-ani 1000ms linear infinite;
|
||||
margin-bottom: 100px;
|
||||
display: block;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#newgame_setting {
|
||||
display: block;
|
||||
margin: 50px 0;
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#settings input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings label {
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#settings input:checked+label {
|
||||
background: #000;
|
||||
color: yellow;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
BIN
games/retrosnake/images/RetroSnaker.gif
Normal file
BIN
games/retrosnake/images/RetroSnaker.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 956 KiB |
BIN
games/retrosnake/images/main.png
Normal file
BIN
games/retrosnake/images/main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
games/retrosnake/images/settings.png
Normal file
BIN
games/retrosnake/images/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
66
games/retrosnake/index.html
Normal file
66
games/retrosnake/index.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<title>Retro Snaker</title>
|
||||
<style>
|
||||
body{
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="wrap">
|
||||
<h1>Snake</h1>
|
||||
<p class="score">Score：
|
||||
<span id="score_value">0</span>
|
||||
</p>
|
||||
</header>
|
||||
<canvas class="wrap" id="snake" width="400" height="400" tabindex="1"></canvas>
|
||||
<!-- Game Over Screen -->
|
||||
<div id="gameOver">
|
||||
<h2>Game Over</h2>
|
||||
<p>press
|
||||
<span class="again">space</span>
|
||||
begin a
|
||||
<a id="newgame_gameOver">new Game</a>
|
||||
<a id="setting_gameOver">settings</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Setting Screen -->
|
||||
<div id="settings">
|
||||
<h2>Snake Settings</h2>
|
||||
<a id="newgame_setting">new game</a>
|
||||
<p>Speed：
|
||||
<input id="speed1" type="radio" name="speed" value="150">
|
||||
<label for="speed1">Slow</label>
|
||||
<input id="speed2" type="radio" name="speed" value="100" checked>
|
||||
<label for="speed2">Normal</label>
|
||||
<input id="speed3" type="radio" name="speed" value="50">
|
||||
<label for="speed3">Fast</label>
|
||||
</p>
|
||||
<p>Wall：
|
||||
<input id="wallon" type="radio" name="wall" value="1" checked>
|
||||
<label for="vallon">on</label>
|
||||
<input id="walloff" type="radio" name="wall" value="0">
|
||||
<label for="walloff">off</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Menu Screen -->
|
||||
<div id="menu">
|
||||
<h2>Retro Snaker</h2>
|
||||
<a id="newgame_menu">new game</a>
|
||||
<a id="setting_menu">settings</a>
|
||||
</div>
|
||||
|
||||
<script src="js/snake.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
338
games/retrosnake/js/snake.js
Normal file
338
games/retrosnake/js/snake.js
Normal file
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* snake.js
|
||||
* @author okaychen
|
||||
* @description
|
||||
* @created Fri Dec 01 2017 11:24:41 GMT+0800 (中国标准时间)
|
||||
* @copyright None
|
||||
* None
|
||||
* @last-modified Fri Dec 01 2017 17:08:44 GMT+0800 (中国标准时间)
|
||||
*/
|
||||
(function () {
|
||||
// Canvas & Context
|
||||
var canvas;
|
||||
var ctx;
|
||||
// Snake
|
||||
var snake;
|
||||
var snake_dir;
|
||||
var snake_next_dir;
|
||||
var snake_speed;
|
||||
// Food
|
||||
var food = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
// score
|
||||
var score;
|
||||
// wall
|
||||
var wall;
|
||||
// HTML Elements
|
||||
var screen_snake;
|
||||
var screen_menu;
|
||||
var screen_settings;
|
||||
var screen_gameover;
|
||||
var button_newgame_menu;
|
||||
var button_newgame_settings;
|
||||
var button_newgame_gameover;
|
||||
var button_setting_menu;
|
||||
var button_setting_gameover;
|
||||
var ele_score;
|
||||
var speed_setting;
|
||||
var wall_setting;
|
||||
|
||||
/*-------------*/
|
||||
var activeDot = function (x, y) {
|
||||
ctx.fillStyle = "#eee";
|
||||
ctx.fillRect(x * 10, y * 10, 10, 10);
|
||||
}
|
||||
|
||||
// changer dir
|
||||
var changeDir = function (key) {
|
||||
if (key == 38 && snake_dir != 2) {
|
||||
snake_next_dir = 0;
|
||||
} else {
|
||||
if (key == 39 && snake_dir != 3) {
|
||||
snake_next_dir = 1;
|
||||
} else {
|
||||
if (key == 40 && snake_dir != 0) {
|
||||
snake_next_dir = 2;
|
||||
} else {
|
||||
if (key == 37 && snake_dir != 1) {
|
||||
snake_next_dir = 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add food
|
||||
var addFood = function () {
|
||||
food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
|
||||
food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
|
||||
for (var i = 0; i < snake.length; i++) {
|
||||
// 如果食物被吃就增加食物
|
||||
if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {
|
||||
addFood();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var checkBlock = function (x, y, _x, _y) {
|
||||
return (x == _x && y == _y) ? true : false;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////
|
||||
var altScore = function (score_val) {
|
||||
ele_score.innerHTML = String(score_val);
|
||||
}
|
||||
////////////////////////////////////////////
|
||||
var mainLoop = function () {
|
||||
var _x = snake[0].x;
|
||||
var _y = snake[0].y;
|
||||
snake_dir = snake_next_dir;
|
||||
// 0 — up 1 — right 2 — down 3 — left
|
||||
switch (snake_dir) {
|
||||
case 0:
|
||||
_y--;
|
||||
break;
|
||||
case 1:
|
||||
_x++;
|
||||
break;
|
||||
case 2:
|
||||
_y++;
|
||||
break;
|
||||
case 3:
|
||||
_x--;
|
||||
break;
|
||||
}
|
||||
snake.pop();
|
||||
snake.unshift({
|
||||
x: _x,
|
||||
y: _y
|
||||
})
|
||||
|
||||
// --wall
|
||||
if (wall == 1) {
|
||||
if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
|
||||
showScreen(3);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// off 无墙
|
||||
for (var i = 0, x = snake.length; i < x; i++) {
|
||||
if (snake[i].x < 0) {
|
||||
snake[i].x = snake[i].x + (canvas.width / 10);
|
||||
}
|
||||
if (snake[i].x == canvas.width / 10) {
|
||||
snake[i].x = snake[i].x - (canvas.width / 10);
|
||||
}
|
||||
if (snake[i].y < 0) {
|
||||
snake[i].y = snake[i].y + (canvas.height / 10);
|
||||
}
|
||||
if (snake[i].y == canvas.height / 10) {
|
||||
snake[i].y = snake[i].y - (canvas.height / 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Autophagy death
|
||||
for (var i = 1; i < snake.length; i++) {
|
||||
if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
|
||||
showScreen(3);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Eat food
|
||||
if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
|
||||
snake[snake.length] = {
|
||||
x: snake[0].x,
|
||||
y: snake[0].y
|
||||
};
|
||||
score += 1;
|
||||
altScore(score);
|
||||
addFood();
|
||||
activeDot(food.x, food.y);
|
||||
}
|
||||
|
||||
// --------------------
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = "#111";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// --------------------
|
||||
|
||||
for (var i = 0; i < snake.length; i++) {
|
||||
activeDot(snake[i].x, snake[i].y);
|
||||
}
|
||||
|
||||
// --------------------
|
||||
|
||||
activeDot(food.x, food.y);
|
||||
|
||||
setTimeout(mainLoop, snake_speed);
|
||||
}
|
||||
|
||||
var newGame = function () {
|
||||
|
||||
showScreen(0);
|
||||
screen_snake.focus();
|
||||
|
||||
snake = [];
|
||||
for (var i = 4; i >= 0; i--) {
|
||||
snake.push({
|
||||
x: i,
|
||||
y: 15
|
||||
});
|
||||
}
|
||||
|
||||
snake_next_dir = 1;
|
||||
|
||||
score = 0;
|
||||
altScore(score);
|
||||
|
||||
addFood();
|
||||
|
||||
canvas.onkeydown = function (evt) {
|
||||
evt = evt || window.event;
|
||||
changeDir(evt.keyCode);
|
||||
}
|
||||
mainLoop();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Change the snake speed...
|
||||
// 150 = slow
|
||||
// 100 = normal
|
||||
// 50 = fast
|
||||
var setSnakeSpeed = function (speed_value) {
|
||||
snake_speed = speed_value;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////
|
||||
var setWall = function (wall_value) {
|
||||
wall = wall_value;
|
||||
if (wall == 0) {
|
||||
screen_snake.style.borderColor = '#606060';
|
||||
}
|
||||
if (wall == 1) {
|
||||
screen_snake.style.borderColor = '#FFF';
|
||||
}
|
||||
}
|
||||
|
||||
// 0 show the game (canvas)
|
||||
// 1 show the main menu
|
||||
// 2 show the settings menu
|
||||
// 3 show the gameover menu
|
||||
var showScreen = function (screen_opt) {
|
||||
switch (screen_opt) {
|
||||
case 0:
|
||||
screen_snake.style.display = "block";
|
||||
screen_menu.style.display = "none";
|
||||
screen_settings.style.display = "none";
|
||||
screen_gameover.style.display = "none";
|
||||
break;
|
||||
case 1:
|
||||
screen_snake.style.display = "none";
|
||||
screen_menu.style.display = "block";
|
||||
screen_settings.style.display = "none";
|
||||
screen_gameover.style.display = "none";
|
||||
break;
|
||||
case 2:
|
||||
screen_snake.style.display = "none";
|
||||
screen_menu.style.display = "none";
|
||||
screen_settings.style.display = "block";
|
||||
screen_gameover.style.display = "none";
|
||||
break;
|
||||
case 3:
|
||||
screen_snake.style.display = "none";
|
||||
screen_menu.style.display = "none";
|
||||
screen_settings.style.display = "none";
|
||||
screen_gameover.style.display = "block";
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
canvas = document.getElementById('snake');
|
||||
ctx = canvas.getContext('2d');
|
||||
// Screen
|
||||
screen_snake = document.getElementById('snake');
|
||||
screen_menu = document.getElementById('menu');
|
||||
screen_gameover = document.getElementById('gameOver');
|
||||
screen_settings = document.getElementById('settings');
|
||||
// Buttons
|
||||
button_newgame_menu = document.getElementById('newgame_menu');
|
||||
button_newgame_setting = document.getElementById('newgame_setting');
|
||||
button_newgame_gameover = document.getElementById('newgame_gameOver');
|
||||
button_setting_menu = document.getElementById('setting_menu');
|
||||
button_setting_gameover = document.getElementById('setting_gameOver');
|
||||
// etc
|
||||
ele_score = document.getElementById('score_value');
|
||||
speed_setting = document.getElementsByName('speed');
|
||||
wall_setting = document.getElementsByName('wall');
|
||||
|
||||
// -------------
|
||||
button_newgame_menu.onclick = function () {
|
||||
newGame();
|
||||
};
|
||||
button_newgame_gameover.onclick = function () {
|
||||
newGame();
|
||||
};
|
||||
button_newgame_setting.onclick = function () {
|
||||
newGame();
|
||||
};
|
||||
button_setting_menu.onclick = function () {
|
||||
showScreen(2);
|
||||
};
|
||||
button_setting_gameover.onclick = function () {
|
||||
showScreen(2)
|
||||
};
|
||||
|
||||
setSnakeSpeed(150);
|
||||
setWall(1);
|
||||
|
||||
showScreen("menu");
|
||||
|
||||
// --------------------
|
||||
// Settings
|
||||
|
||||
// speed
|
||||
for (var i = 0; i < speed_setting.length; i++) {
|
||||
speed_setting[i].addEventListener("click", function () {
|
||||
for (var i = 0; i < speed_setting.length; i++) {
|
||||
if (speed_setting[i].checked) {
|
||||
setSnakeSpeed(speed_setting[i].value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// wall
|
||||
for (var i = 0; i < wall_setting.length; i++) {
|
||||
wall_setting[i].addEventListener("click", function () {
|
||||
for (var i = 0; i < wall_setting.length; i++) {
|
||||
if (wall_setting[i].checked) {
|
||||
setWall(wall_setting[i].value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.onkeydown = function (evt) {
|
||||
if (screen_gameover.style.display == "block") {
|
||||
evt = evt || window.event;
|
||||
if (evt.keyCode == 32) {
|
||||
newGame();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})()
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user