赵东昊--一周总结
阅读数：1977 发布时间：2016-07-14 22:42:33总结
- 来到秀野堂一个星期了，在这里我感受到了，规律的生活作息，紧张的学习过程，还有精彩的有吃有喝的户外活动。我觉得这样的生活很充实很有意义。以前在学校每天就是上课，之后的就是想着抓紧时间完成任务然后就去打游戏。一空下来想的就是去打游戏，其他的活动就很少了，以前还是一打篮球，后来都不打了。在这里学习时的时候紧张又紧凑，隔断时间累了就出去还嗨一把，不再是游戏而是户外活动吃喝玩乐，说实话还真有点期待之后的徒步活动呢。在来秀野堂之前，听了HR对堂主以及这里的情况的介绍，我一度以为堂主会是一个技术牛叉，两耳不闻窗外事一心只会敲代码的‘死宅男’。没想到，到这里才发现堂主是一个懂生活会享受的人，不光技术牛逼，而且还会弹吉他，敲代码听吉他也是一种享受。通过一个星期的学习，我觉得有些事认真做一做也没那么难，比如我完成了小鸟飞翔的动画，完成了招财进宝小游戏以及简单的贪吃蛇，以前一直觉得这些动画、游戏是一件很难的事情。不过经过一些知识的学习，以及自己的思考，自己还是可以完成这些任务的，觉得也没有现象中的那么难，我自己是可以完成的。
- 经过一个星期的学习我的收获还是很多的。大的方面，对于一些看似比较困难的东西，自身不应该有排斥心里，觉得这很难就不去尝试，有些事情通过对一些知识的学习以及自己对问题的分析，这些都是可以有解决之道的，再通过自己的思考以及尝试都是可以解决的。随意不应该畏惧看似困难的任务，排斥不了解的事物，新的东西。还有收获了规律的生活，以及远离外界的一种安静。第一次游泳回来，在路上，突然的下车，四下没有路灯，没有其他的吵闹，只有听取蛙声一片，感觉这样的意境真是一种享受。在技术上的收获，对linux系统有了些认识，对html,css,javascript有了更深的理解。比如说，如何在一个div里进行精确的等分以及按比例等分;对canvas的使用也更加得心应手;通过的setinterval的了解，可以完成一些简单的动画，比如小鸟飞翔的动画、招财进宝的游戏、简单的贪吃蛇。对nginx服务器有了了解，能够进行站点的配置，通过浏览器来访问站点下的网页。
- 在学习过程中遇到的困难的话也有不少。对于javascript中许多自带的功能函数还不清楚，自己写的方法费时费力。还有在命令行的操作还不是很熟练。用命令行来操作nginx和mysql还很吃力。html中对于canvas使用还不是很熟练，对于有些方法不熟悉。英语词汇还不够多，对于一些单词的拼写还不熟悉，很多单词不认识，单词读不准。
成果
div按比例划分
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.flex_container{
width:1000px;
height:100px;
display: flex;
flex-flow: row;
background-color:#ff0000;
}
#one{
flex: 5;
background-color: #00ff00;
border-right: 1px solid #000000;
}
#two{
flex: 3;
background-color: #00ff00;
border-right: 1px solid #000000;
}
#three{
flex: 2;
background-color: #00ff00;
border-right: 1px solid #000000;
}
</style>
</head>
<body>
<div class="flex_container">
<div id="one">
1
</div>
<div id="two">
2
</div>
<div id="three">
3
</div>
</div>
</body>
</html>
结果
小鸟飞翔
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="abc">
</div>
<div id="edf">
</div>
<canvas id="mycanvas" width="500" height="500"></canvas>
<script type="text/javascript">
var x1 = 0;
var y1 = 0;
var x2 = 500;
var y2 = 0;
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var img = new Image();
setInterval(function(){
img.src = "file:///home/zdh/%E5%9B%BE%E7%89%87/bf.png";
ctx.clearRect(0, 0, 500, 500);
img.onload = function(){
ctx.drawImage(img, x1, y1, 24, 27, Math.abs(x2), y2, 24, 27);
x1 = x1 + 24;
if(x1 > 48){
x1 = 0;
}
x2 = x2 - 10;
if(x2 < -500 )
{
x2 = 500;
}
if(x2 <= 0 && x2 >= -500)
{
y1 = 24;
}
if(x2 > 0 && x2 <= 500)
{
y1 = 0;
}
if(x2 > 500 )
{
x2 = -500;
}
if(x2 == 0 || x2 == -500){
y2 = y2 + 27;
}
if(y2 > 500)
{
y2 = 0;
}
}
}, 10);
</script>
</body>
</html>递归练习
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var sa = [
[1, 2, 0], [3, 4, 0], [5, 6, 0],
[7, 8, 0], [9, 0, 0], [10, 9, 1],
[11, 10, 2], [12, 11, 3], [13, 12, 4]
];
var h = '';
function fc(a, s, k)
{
var kg = '';
for(var j = 0; j < k ; j++){
kg = kg + ' ';
}
s = s + kg +a + '<br>';
var c = null;
for(var i = 0; i < sa.length; i++)
{
if(a == sa[i][1])
{
c = sa[i][0];
}
}
if(c == null){
return s;
}else{
k ++;
return fc(c, s, k);
}
}
for(var i = 0; i < sa.length; i++)
{
if(sa[i][2] == 0)
{
var s = '';
h = h + fc(sa[i][1], s, 1);
}
}
document.getElementById('abc').innerHTML = h;
}
</script>
</head>
<body>
<div id="abc"></div>
</body>
</html>结果
招财进宝
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var lx = 200;
var score = 0;
var wrong = 0;
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var imglz = new Image();
imglz.src = 'http://img42.nipic.com/20130125/10570612_114056484195_1.jpg';
var img = new Image();
img.src = 'http://img5.huitu.com/res/20121228/180468_20121228094410788361_2.jpg';
function dl(x){
var y = 0;
var timer = setInterval(function(){
ctx.clearRect(x, y-10, 50, 40);
ctx.drawImage(img, 0, 0, 140, 106, x, y, 50, 40);
if(x >= lx && x <= lx + 150 && y >= 360 && y <= 400){
score ++;
document.getElementById('sl').innerHTML = score;
ctx.clearRect(x, y, 50, 40);
clearInterval(timer);
}
if(y >= 450){
wrong ++;
document.getElementById('wl').innerHTML = wrong;
ctx.clearRect(x, y, 50, 40);
clearInterval(timer);
}
y = y + 10;
}, 100);
}
imglz.onload = function(){
ctx.drawImage(imglz, 0, 77, 150, 40, lx, 400, 150, 40);
document.onkeydown = function(e){
var keycode = e.which;
if(keycode == 39){//r
ctx.clearRect(lx, 400, 150, 40);
lx = lx + 50;
if(lx > 350){
lx = 350;
}
ctx.drawImage(imglz, 0, 77, 150, 40, lx, 400, 150, 40);
}
if(keycode == 37){//l
ctx.clearRect(lx, 400, 150, 40);
lx = lx - 50;
if(lx < 0){
lx = 0;
}
ctx.drawImage(imglz, 0, 77, 150, 40, lx, 400, 150, 40);
}
}
}
img.onload = function(){
setInterval(function(){
var rd = Math.round(Math.random() * 450);//0~450;
dl(rd);
}, 1000);
}
}
</script>
<style type="text/css">
#hd{
width: 500px;
text-align: center;
font-size: 20px;
font-family: 微软雅黑;
color: #FFD700;
}
#s{
color: #FF4500;
}
#w{
color: #FFA500;
}
#sl{
color: #000000;
}
#wl{
color: #000000;
}
</style>
</head>
<body>
<div id="hd">招 财 进 宝</div>
<canvas id="mycanvas" width="500" height="500" style="border:3px solid #FFD700">
</canvas>
<div id="s">抢到的财宝:<label id="sl">0</label>个金元宝</div>
<div id="w">漏掉的财宝:<label id="wl">0</label>个金元宝</div>
</body>
</html>结果
贪吃蛇
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var ayb = {};
ayb.$ = function (id){
return document.getElementById(id);
}
ayb.p = function (str){
console.log(str);
}
ayb.shtml = function(id, str){
ayb.$(id).innerHTML = str;
}
ayb.getctx = function (id){
var c = ayb.$('mycanvas');
return c.getContext('2d');
}
ayb.dl = function (ctx, x1, y1, x2, y2){
ctx.beginPath();
ctx.lineWidth="1";
ctx.strokeStyle="#000000";
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
ayb.dt = function (ctx, c, k){
var x = 0;
var y = 0;
while(x <= 500)
{
ayb.dl(ctx, x, 0, x, 500);
x = x + c;
}
while(y <= 500)
{
ayb.dl(ctx, 0, y, 500, y);
y = y + c;
}
}
ayb.fc = function (ctx, cx, cy){
var x = cx * 20 + 1;
var y = cy * 20 + 1;
ctx.fillStyle = '#ff0000';
ctx.fillRect(x, y, 18, 18);
}
ayb.food = function (ctx, cx, cy){
var x = cx * 20 + 1;
var y = cy * 20 + 1;
ctx.fillStyle = '#00ff00';
ctx.fillRect(x, y, 18, 18);
}
ayb.move = function (ctx, x, y, l, mx, my){
for(var i = 0; i < l; i ++){
ctx.clearRect(x[i] * 20 + 1, y[i] * 20 + 1, 18, 18);
}
ayb.fc(ctx, x[0] + mx, y[0] + my);
for(var j = 0; j < l - 1; j ++){
ayb.fc(ctx, x[j], y[j]);
}
for(var k = l - 1; k > 0; k --){
x[k] = x[k-1];
y[k] = y[k-1];
}
x[0] = x[0] + mx;
y[0] = y[0] + my;
}
ayb.sjs = function(){
return Math.round(Math.random() * 24);
}
window.onload = function(){
var ctx = ayb.getctx('mycanvas');
ayb.dt(ctx, 20, 20);
var x = new Array(50);
var y = new Array(50);
var xb = new Array(50);
var yb = new Array(50);
var l = 3;
var lb = 3;
var fx = ayb.sjs();
var fy = ayb.sjs();
x[0] = 5;
y[0] = 5;
x[1] = 6;
y[1] = 5;
x[2] = 7;
y[2] = 5;
ayb.food(ctx, fx, fy);
function eat(){
if(x[0] == fx && y[0] == fy - 1 || x[0] == fx && y[0] == fy + 1 ||
x[0] == fx - 1 && y[0] == fy || x[0] == fx + 1 && y[0] == fy ){
for(var i = 0; i < l; i ++){
xb[i] = x[i];
yb[i] = y[i];
}
lb = l;
}
if(x[0] == fx && y[0] == fy)
{
for(var i = 0; i < l; i ++){
ctx.clearRect(x[i] * 20 + 1, y[i] * 20 + 1, 18, 18);
}
l = l + 1;
for(var j = 0; j < lb; j ++){
x[j + 1] = xb[j];
y[j + 1] = yb[j];
}
x[0] = fx;
y[0] = fy;
for(var j = 0; j < l; j ++){
ayb.fc(ctx, x[j], y[j]);
}
fx = ayb.sjs();
fy = ayb.sjs();
ayb.food(ctx, fx, fy);
}
}
document.onkeydown = function(e){
var keycode = e.which;
if(keycode == 37){//zuo
ayb.move(ctx, x, y, l, -1, 0);
eat();
}
if(keycode == 38){//shang
ayb.move(ctx, x, y, l, 0, -1);
eat();
}
if(keycode == 39){//you
ayb.move(ctx, x, y, l, 1, 0);
eat();
}
if(keycode == 40){//xia
ayb.move(ctx, x, y, l, 0, 1);
eat();
}
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>结果
