<問題>
想要利用JavaScript來寫個小遊戲, 要如何做呢?!
<解答>
這裡參攷了 CNwander 高手分享的網頁程式(已小改)並示範 貪吃蛇 的做法 ... 如下:
<參攷>
Javascript小游戏贪吃蛇(详细注释)
<ps.>
想要做小遊戲是不難的, 但要做出人人都愛玩的, 不是件容易的事!!
想要利用JavaScript來寫個小遊戲, 要如何做呢?!
<解答>
這裡參攷了 CNwander 高手分享的網頁程式(已小改)並示範 貪吃蛇 的做法 ... 如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇 - by CNwander</title>
<style type="text/css">
* { margin:0; padding:0 }
body { background:#000; -moz-user-select:none; text-align:center; font-size:12px } /*防止鼠标拖拉*/
table { margin:80px auto 10px auto; overflow:hidden; border-collapse:collapse }
td { width:20px; height:20px; border:1px solid #eee; background:#f4f4f4 }
.cover { background:#39c } /*蛇身:淺藍色*/
.food { background:#093 } /*食物:绿色*/
.block { background:#333 } /*障碍:灰色*/
.brake { background:#f00 } /*刹车:红色*/
.skate { background:#00f } /*滑板:藍色*/
#say { margin-top:50px; color:white }
#help { width:420px; margin:0 auto; line-height:17px; color:white }
#help span { float:left; margin-right:10px }
#help .box { width:15px; height:15px; margin-right:5px; border:1px solid white }
#btnStart { font-weight:bold; clear:both; width:100px; margin-left: 65px; height:30px; margin-top:10px; padding:0; background:#bbb; color:#222; border:1px solid #fff; border-bottom-color:#000; border-right-color:#000; cursor:pointer }
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//code by CNwander.
//website at http://www.webjx.com/javascript/jsajax-16454.html
//common
function $(str) {
return document.getElementById(str);
}
function $tag(str, target) {
target = target || document;
return target.getElementsByTagName(str);
}
//创建二维数组
function multiArray(m, n) {
var arr = new Array(n); //创建Array对象构造器, n=数组最大下标长度
for(var i = 0; i < m; i++) {
arr[i] = new Array(m); //二维
}
return arr;
}
//global
//const
var WIDTH = 20, //网格宽度
HEIGHT = 20, //网格高度
SAY = ["讚！虽说和玩家还不是一个级别的。", "Ya！再加点油都可以和玩家媲美了。", "牛！连玩家都甘拜下风了。", "行！别把游戏玩爆了。"]; //对话
var len, //蛇的长度
speed, //爬行速度
gridElems = multiArray(WIDTH, HEIGHT), //单元格对象
carrier = multiArray(WIDTH, HEIGHT), //承载对象(遮蓋cover、食物food、障碍block、滑板skate、刹车brake)
snake, //蛇每节的坐标点
info, //交互对话
topScore, //最高分
btnStart, //开始按钮
snakeTimer, //蛇行走计时器
brakeTimers = [], //随机刹车
skateTimers = [], //随机滑板
directkey; //方向键值 37-40(左、上、右、下)
//创建网格
function initGrid() {
//var body = $tag("body")[0];
var table = document.createElement("table"),
tbody = document.createElement("tbody"); //tbody為HTML文件的表格元素(element)，用於設置表格內容
for(var j = 0; j < HEIGHT; j++) {
var col = document.createElement("tr");
for(var i = 0; i < WIDTH; i++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row);
}
tbody.appendChild(col);
}
table.appendChild(tbody);
$("snakeWrap").appendChild(table); //div
}
//输出信息
function trace(sth, who) {
who = who || info;
if(document.all) { //兼容判断是否是IE浏览器
who.innerText = sth; //Internet Explorer
} else {
who.textContent = sth; //Firefox
}
}
//产生指定范围随机点
function randomPointer(startX, startY, endX, endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || WIDTH;
endY = endY || HEIGHT;
var p = [],
x = Math.floor(Math.random() * (endX - startX)) + startX, //Math.floor=返回小于等于x的最大整数
y = Math.floor(Math.random() * (endY - startY)) + startY;
if(carrier[x][y]) { //查證承载对象是否已有物品
return randomPointer(startX, startY, endX, endY);
}
p[0] = x;
p[1] = y;
return p;
}
//清除画面
function clear() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = ""; //单元格对象=移除className
}
}
}
//创建蛇
function initSnake() {
var len1 = len - 1;
var pointer = randomPointer(len1, len1, WIDTH / 2, HEIGHT / 2);
for(var i = 0; i < len; i++) {
var x = pointer[0] - i,
y = pointer[1];
snake.push([x, y]); //向数组末尾添加一个或多个元素，并返回数组的长度
carrier[x][y] = "cover";
}
}
//添加物品
function addObject(name) {
var p = randomPointer();
carrier[p[0]][p[1]] = name;
gridElems[p[0]][p[1]].className = name;
}
//获取信息
function getText(target) {
if(document.all) {
return target.innerText;
} else {
return target.textContent;
}
}
//最高分累加顯示
function dispscore(addscore) {
topScore += addscore;
trace(topScore, $("score")); //最高分
}
//蛇行走目标点
function step() {
var speedup = false;
//获取目标点
var headX = snake[0][0],
headY = snake[0][1];
//方向键
switch(directkey) {
case 37: //左
headX -= 1;
break;
case 38: //上
headY -= 1;
break;
case 39: //右
headX += 1;
break;
case 40: //下
headY += 1;
break;
}
//碰到边界WIDTH or HEIGHT、障碍物block，则结束游戏
var carrierXY = carrier[headX][headY];
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrierXY == "block" || carrierXY == "cover" ) {
if(getText($("score")) * 1 < len) {
trace(len, $("score"));
}
btnStart.removeAttribute("disabled"); //按鈕致能
btnStart.style.color = "#000"; //按鈕字體顏色復原
window.clearInterval(snakeTimer); //取消由setInterval()方法设置的定时器
for(var i = 0; i < brakeTimers.length; i++) {
window.clearTimeout(brakeTimers[i]); //刹车, 取消由setTimeout()方法设置的timeout及其带来的行为
}
for(var i = 0; i < skateTimers.length; i++) {
window.clearTimeout(skateTimers[i]); //滑板, 取消由setTimeout()方法设置的timeout及其带来的行为
}
trace("GAME OVER！");
return false; //停止Javascript的處理程序
}
//加速
if(len % 4 == 0 && speed < 60 && carrierXY == "food") {
speed += 5;
walk();
speedup = true;
//trace("加速！");
topScore += 100;
}
//捡到刹车
if(carrierXY == "brake") {
speed = 5;
walk();
trace("恭喜！捡到刹车一个。");
topScore += 10;
}
//遭遇滑板
if(carrierXY == "skate") {
speed += 20;
walk();
trace("遭遇滑板！");
topScore += 100;
}
//添加障碍物
if(len % 6 == 0 && len < 60 && carrierXY == "food") {
addObject("block");
}
//对话: 鼓勵
if(len <= 40 && len % 10 == 0) {
var cheer = SAY[len / 10 - 1];
trace(cheer);
}
//吃东西
if(carrierXY != "food") {
var snake1 = snake.length - 1;
var lastX = snake[snake1][0],
lastY = snake[snake1][1];
carrier[lastX][lastY] = false;
gridElems[lastX][lastY].className = "";
snake.pop(); //删除数组最后一个元素并将该元素作为返回值返回。如果数组的长度为0，则返回undefined
} else {
carrier[headX][headY] = false;
addObject("food"); //添加食物
topScore += 10;
(speedup) ? trace("加速！") : trace("吃到食物！");
}
snake.unshift([headX, headY]); //向数组开头添加一个或多个元素，并返回新的数组长度
carrier[headX][headY] = "cover";
gridElems[headX][headY].className = "cover";
len = snake.length; //返回一个数组的长度
trace(topScore, $("score")); //最高分
}
//蛇行走控制
function walk() {
if(snakeTimer) {
window.clearInterval(snakeTimer); //取消由setInterval()方法设置的定时器
}
snakeTimer = window.setInterval(step, Math.floor(3000 / speed)); //按照指定的周期(以毫秒计)来调用函数或计算表达式, 參數1(step函數): 為重複動作的程式碼，參數2: 則是延遲時間
}
//产生随机整数
function randowNum(start, end) {
return Math.floor(Math.random() * (end - start)) + start;
}
function randNum() {
return Math.floor((Math.random() * 10) % 4);
}
//添加随机数量刹车和滑板
function addRandomBrake() {
var num = randowNum(1, 5);
for(var i = 0; i < num; i++) {
brakeTimers.push(window.setTimeout(function(){ addObject("brake") }, randowNum(10000, 100000))); //刹车, 按照一定周期调用计时函数
skateTimers.push(window.setTimeout(function(){ addObject("skate") }, randowNum(5000, 100000))); //滑板, 按照一定周期调用计时函数
}
}
//游戏开始
function start() {
len = randNum() + 1; //蛇的随机长度
speed = 10; //蛇的爬行速度 = 10 (1000 ms = 1 second)
directkey = 36 + len; //随机決定方向
topScore = len; //分数
carrier = multiArray(WIDTH, HEIGHT); //承载对象 = 二维数组(WIDTH, HEIGHT)
snake = new Array(); //宣告一個新的陣列
clear(); //清除画布
initSnake(); //蛇初始化
addObject("food"); //添加食物
walk(); //蛇行走
addRandomBrake(); //添加刹车和滑板
trace("GAME START..."); //顯示文字
trace(topScore, $("score")); //最高分
}
//添加键盘事件
function attachEvents(e) {
e = e || event;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
return false; //停止Javascript的處理程序
}
window.onload = function() {
info = $("say");
initGrid(); //网格初始化
document.onkeydown = attachEvents; //绑定方向事件
btnStart = $("btnStart");
btnStart.onclick = function (e) {
btnStart.blur(); //firefox中必须释放焦点
btnStart.setAttribute("disabled", true);
btnStart.style.color = "#aaa"; //中等亮度的灰色阴影
start(); //游戏开始
}
}
</script>
</head>
<body onSelectStart="return false"><!--防止鼠标拖拉-->
<div id="say">贪吃蛇</div>
<div id="snakeWrap"></div>
<div id="help">
<span class="box food"></span><span>绿色食物</span>
<span class="box block"></span><span>灰色障碍</span>
<span class="box skate"></span><span>蓝色滑板</span>
<span class="box brake"></span><span>红色刹车</span>
<span style="float:right">最高分：<strong id="score">0</strong></span>
<input type="button" id="btnStart" value="开始游戏" />
</div>
</body>
</html>
<參攷>
Javascript小游戏贪吃蛇(详细注释)
<ps.>
想要做小遊戲是不難的, 但要做出人人都愛玩的, 不是件容易的事!!
留言