學習履歷
- 這學期你學到了什麼？
貪吃蛇簡易版
簡易留言板
簡易動態型公告版
- 什麼東西是你還沒學會的？
資料庫結合網頁(動態網頁)
利用markdown撰寫網誌
- 學習筆記（gitbook or ...) (你曾經做過的習題筆記與成果！)
貪吃蛇
<html>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div class="wrap">
<h1>貪吃蛇</h1>
<p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p>
<input id="Pause" type="button" name="name" value="Pause">
<input id="Start" type="button" name="name" value="Start">
<input id="Refresh" type="button" name="name" value="Refresh">
<input id="Speed" type="button" name="name" value="Speed">
<div id="snake_map">
</div>
</div>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 600px;
margin: 0 auto;
position: relative;
}
p {
position: absolute;
left: 65%;
top: 10%;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#score {
text-align: center;
font-size: 20px;
}
#snake_map {
margin: 0 auto;
border: 1px solid skyblue;
}
.row {
height: 20px;
}
.col {
height: 20px;
width: 20px;
box-sizing: border-box;
border: 1px solid lightgray;
background: rgb(250, 250, 250);
float: left;
}
.activeSnake {
background: black;
}
.egg {
background: red;
}
#Pause {
margin-left: 18%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
}
#Start , #Refresh, #Speed{
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 50px;
height: 30px;
border-radius: 5px;
margin-left: 15px;
}
</style>
<script type="text/javascript">
var score = document.getElementById('score');
var map = document.getElementById('snake_map');
var rowNumber = 25;
var columnNumber = 20;
var mapWidth = columnNumber * 20 +'px';
var mapHeight = rowNumber * 20 +'px';
map.style.width = mapWidth;
map.style.height = mapHeight;
var snakeDIVPosition = [];
for (var i = 0; i < rowNumber; i++) {
var rowDIV = document.createElement('div');
rowDIV.className = 'row';
map.appendChild(rowDIV);
var rowArray = [];
for (var j = 0; j < columnNumber; j++) {
var columnDIV = document.createElement('div');
columnDIV.className = 'col';
rowDIV.appendChild(columnDIV);
rowArray.push(columnDIV);
}
snakeDIVPosition.push(rowArray);
}
var snake = [];
for (var i = 0; i < 3; i++) {
snakeDIVPosition[0][i].className = 'col activeSnake';
snake[i] = snakeDIVPosition[0][i];
}
var x = 2;
var y = 0;
var scoreCount = 0;
var eggX = 0;
var eggY = 0;
var direction = 'right';
var changeDir = true;
var delayTimer = null;
document.onkeydown = function(event) {
if (!changeDir) {
return;
}
event = event || window.event;
if (direction == 'right' && event.keyCode == 37) {
return;
}
if (direction == 'left' && event.keyCode == 39) {
return;
}
if (direction == 'up' && event.keyCode == 40 ) {
return;
}
if (direction == 'down' && event.keyCode == 38) {
return;
}
switch (event.keyCode) {
case 37:
direction = 'left';
break;
case 38:
direction = 'up';
break;
case 39:
direction = 'right';
break;
case 40:
direction = 'down';
break;
}
changeDir = false;
delayTimer = setTimeout(function () {
changeDir = true;
},300);
}
function snakeMove() {
switch (direction) {
case 'left':
x--;
break;
case 'right':
x++;
break;
case 'up':
y--;
break;
case 'down':
y++;
break;
}
if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) {
alert('Game Over!!!');
clearInterval(moveTimer);
return;
}
for (var i = 0; i < snake.length; i++) {
if (snake[i] == snakeDIVPosition[y][x]) {
alert('Game over!!!');
clearInterval(moveTimer);
return;
}
}
if (eggX == x && eggY == y) {
snakeDIVPosition[eggY][eggX].className = 'col activeSnake';
snake.push(snakeDIVPosition[eggY][eggX]);
scoreCount++;
score.innerHTML = scoreCount;
createNewEgg();
}else {
snake[0].className = 'col';
snake.shift();
snakeDIVPosition[y][x].className = 'col activeSnake';
snake.push(snakeDIVPosition[y][x]);
}
}
var moveTimer = setInterval('snakeMove()',300);
function random(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function createNewEgg() {
eggX = random(0,columnNumber - 1);
eggY = random(0,rowNumber - 1);
if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') {
createNewEgg();
}else {
snakeDIVPosition[eggY][eggX].className = 'col egg';
}
}
createNewEgg();
var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
pause.onclick = function () {
clearInterval(moveTimer);
}
start.onclick = function () {
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()',speed1);
}
refresh.onclick = function () {
window.location.reload();
}
var speed1 = 300;
speed.onclick = function () {
speed1 -= 20;
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()',speed1);
}
</script>
</body>
</html>
- 你做的專案 (github ...)
簡易型個人網誌
簡易型登錄系統
未結合